2023-11-22

<template>
  <div>
    <div class="title">Echarts中国地图三级钻取</div>
    <div class="box">
      <button class="backBtn" @click="back()">返回上级</button>
      <div id="mapChart" class="chart"></div>
    </div>
    <div class="myBlog">
      <a href="https://dongkelun.com" target="_blank" title="伦少的博客">
        <img src="https://dongkelun.com/img/favicon.ico" alt="伦少的博客">
        伦少的博客
      </a>
    </div>
    <div class="bottom">
      <a href="https://github.com/dongkelun/vue-echarts-map" target="_blank" title="点我查看源码">
        <svg height="26" viewBox="0 0 16 16" version="1.1" width="26" aria-hidden="true">
          <path
            fill-rule="evenodd"
            d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47
                    7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72
                    1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18
                    1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54
                    1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"
          ></path>
        </svg>
      </a>
    </div>
  </div>
</template>

<script>
import cityMap from "@/js/china-main-city-map.js";
import echarts from "echarts";
import axios from "axios";
import Vue from "vue";
// import registerAndsetOption from '@/js/echarts-map'

//中国地图（第一级地图）的ID、Name、Json数据
var chinaId = 100000;
var chinaName = "china";
var chinaJson = null;

//记录父级ID、Name
var mapStack = [];
var parentId = null;
var parentName = null;


let arr =
  [{name: "北京", area: "华北"},
    {name: "天津", area: "华北"},
    {name: "河北", area: "华北"},
    {name: "山西", area: "华北"},
    {name: "内蒙古", area: "华北"},
    {name: "辽宁", area: "东北"},
    {name: "黑龙江", area: "东北"},
    {name: "吉林", area: "东北"},
    {name: "上海", area: "华东"},
    {name: "安徽", area: "华东"},
    {name: "山东", area: "华东"},
    {name: "台湾", area: "华东"},
    {name: "浙江", area: "华东"},
    {name: "福建", area: "华东"},
    {name: "江苏", area: "华东"},
    {name: "云南", area: "西南"},
    {name: "重庆", area: "西南"},
    {name: "贵州", area: "西南"},
    {name: "西藏", area: "西南"},
    {name: "四川", area: "西南"},
    {name: "广西", area: "中南"},
    {name: "河南", area: "中南"},
    {name: "湖南", area: "中南"},
    {name: "湖北", area: "中南"},
    {name: "广东", area: "中南"},
    {name: "甘肃", area: "西北"},
    {name: "陕西", area: "西北"},
    {name: "青海", area: "西北"},
    {name: "宁夏", area: "西北"},
    {name: "新疆", area: "西北"},
    {name: "江西", area: "中南"},
    {name: "海南", area: ""},
    {name: "香港特别行政区", area: ""},
    {name: "澳门特别行政区"}

  ]

//Echarts地图全局变量，主要是在返回上级地图的方法中会用到
var myChart = null;
export default {
  name: "chinaMap",
  props: {
    msg: String
  },
  mounted: function () {
    this.mapChart("mapChart");
  },
  methods: {
    /**
     * 返回上一级地图
     */
    back() {
      if (mapStack.length != 0) {
        //如果有上级目录则执行
        var map = mapStack.pop();
        axios
          .get("./static/json/map/" + map.mapId + ".json", {})
          .then(response => {
            const mapJson = response.data;
            registerAndsetOption(
              myChart,
              map.mapId,
              map.mapName,
              mapJson,
              false
            );

            //返回上一级后，父级的ID、Name随之改变
            parentId = map.mapId;
            parentName = map.mapName;
          });
      }
    },
    /**
     * Echarts地图
     */

    mapChart(divid) {
      axios.get("./static/json/map/" + chinaId + ".json", {}).then(response => {
        const mapJson = response.data;
        chinaJson = mapJson;
        myChart = echarts.init(document.getElementById(divid));
        registerAndsetOption(myChart, chinaId, chinaName, mapJson, false);
        parentId = chinaId;
        parentName = "china";
        myChart.on("click", function (param) {
          var cityId = cityMap[param.name];
          if (cityId) {
            //代表有下级地图
            axios
              .get("./static/json/map/" + cityId + ".json", {})
              .then(response => {
                const mapJson = response.data;
                registerAndsetOption(
                  myChart,
                  cityId,
                  param.name,
                  mapJson,
                  true
                );
              });
          } else {
            //没有下级地图，回到一级中国地图，并将mapStack清空
            registerAndsetOption(myChart, chinaId, chinaName, chinaJson, false);
            mapStack = [];
            parentId = chinaId;
            parentName = chinaName;
          }
          // $.get('./asset/json/map/'+param.data.id+'.json', function (mapJson,status) {

          //     registerAndsetOption(myChart,param.data.id,param.name,mapJson,true)

          // }).fail(function () {
          //     registerAndsetOption(myChart,chinaId,'china',chinaJson,false)
          // });
        });
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          name: '四川'
        })

        myChart.on("mouseover", function (params) {
          // console.log(params)

          if (params.data && params.data.selected) {
            myChart.dispatchAction({
              type: 'select',
              seriesIndex: 0,
              name: params.data.name

            })
          } else {
            myChart.dispatchAction({
              type: "unselect",
              seriesIndex: 0,
              name: params.data.name
            })
          }
          let area = {}
          let _temp = arr.filter(item => item.name === params.name)
          let areaList = []
          let noareaList = []
          if (_temp.length > 0) {
            area = _temp[0]
          }
          areaList = arr.filter(item => item.area === area.area)
          noareaList = arr.filter(item => item.area !== area.area)
          if (areaList.length > 0) {
            // console.log(areaList.map(item => item.name))
            // console.log(noareaList.map(item => item.name))
            myChart.dispatchAction({
              type: 'highlight',
              // seriesIndex: 0,
              name: areaList.map(item => item.name)
            })
          } else {

          }
          myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            name: noareaList.map(item => item.name)
          })
        })

        myChart.on("mouseout", function (params) {
          myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            name: arr.map(item => item.name)
          })
        })
      });
    }
  }
};

/**
 *
 * @param {*} myChart
 * @param {*} id        县Id
 * @param {*} name      县名称
 * @param {*} mapJson   地图Json数据
 * @param {*} flag      是否往mapStack里添加parentId，parentName
 */
function registerAndsetOption(myChart, id, name, mapJson, flag) {
  echarts.registerMap(name, mapJson);
  myChart.setOption({
    width: 800,
    height: 600,
    geo:
      {
        show: false,
        label: {
          emphasis: {
            show: false
          }
        },
        room: true,
        itemStyle: {
          emphasis: {
            areaColor: "#2a333d"
          },
          normal: {
            opacity: 1,
            backgroundColor: "#000",
            borderWidth: 3,
            areaColor: "#f8911b"
          }
        }
      }
    ,
    regions: arr,
    // tooltip:{
    //   trigger:'item',
    //   formatter:function (params){
    //     // console.log('')
    //     return 'xxxasdadaq'
    //   }
    // },
    series: [
      {
        type: "map",
        map: name,
        roam: true,
        itemStyle: {
          normal: {
            areaColor: "#fff",
            borderColor: "#fff",
            borderWidth: 0
          }
        },
        label: {
          normal: {
            show: true,
            formatter: function (param) {
              if (param.name === '新疆') {
                return '{div|西部}'
              } else {
                return ''
              }
            },
            rich: {
              div: {
                color: '#f00'
              }
            }
          }
        },
         data: initMapData(mapJson)
        //data: arr
        // [
        // {       name: "新疆"},
        // {name: "西藏"}
        // ]
      }
    ]
  });

  if (flag) {
    //往mapStack里添加parentId，parentName,返回上一级使用
    mapStack.push({
      mapId: parentId,
      mapName: parentName
    });
    parentId = id;
    parentName = name;
  }
}

function initMapData(mapJson) {
  var mapData = [];
  for (var i = 0; i < mapJson.features.length; i++) {
    mapData.push({
      name: mapJson.features[i].properties.name
      //id:mapJson.features[i].id
    });
  }
  return mapData;
}
</script>

<style>
body {
  background-image: url("../../assets/beijingtupian.png");
}
</style>

<style scoped>
.title {
  width: 100%;
  height: 10vh;
  text-align: center;
  color: #fff;
  font-size: 2em;
  line-height: 10vh;
}

.box {
  position: absolute;
  width: 90%;
  height: 80vh;
  left: 5%;
  top: 10%;
  background-color: rgba(24, 27, 52, 0.62);
}

.chart {
  position: relative;
  height: 90%;
  top: 10%;
}

.backBtn {
  position: absolute;
  top: 0;
  background-color: #00c298;
  border: 0;
  color: #fff;
  height: 27px;
  font-family: Microsoft Yahei;
  font-size: 1em;
  cursor: pointer;
}

.myBlog {
  position: absolute;
  top: 2px;
  right: 5%;
  display: block;
  border: 2px solid #262a53;
}

.myBlog a {
  text-decoration: none;
  display: inline-block;
  color: #fff;
  padding: 5px;
  font-size: 1em;
}

.myBlog a img {
  vertical-align: middle;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  margin: -5px 5px auto auto;
}

.bottom {
  position: absolute;
  width: 100%;
  height: 5%;
  line-height: 100%;
  left: 0;
  bottom: 0%;
  text-align: center;
}
</style>