<template>  <div class="">    <div class="map-nav">            <Icon type="md-pin" />      <span v-for="t in currArea" @click="gotoMap(t.id||t.adcode,t.level||'province')" v-if="t.name!= undefined">{{t.name}} / </span>      <span @click="gotoMap('100000')">全國</span>    </div>    <v-chart      ref="mapChart"      :options="options"      :style="{ height: winHeight - 135 + 'px' }"      :autoresize="true"      @dblclick="mapChatClick"    />  </div></template><script>var districtList = ["北京","山東","江西","湖南","新疆","哈密", "濰坊", "濟南", "南昌", "長沙", "常德","吉安","昌平"];const dataTest = [];districtList.forEach((t, i) => {  dataTest.push({ name: t, value: Math.random() * 100+200});});function convertData(data, geoCoordMap) {  const res = [];  for (let i = 0; i < data.length; i++) {    const geoCoord = geoCoordMap[data[i].name];    if (geoCoord) {      res.push({        name: data[i].name,        value: geoCoord.concat(data[i].value),      });    }  }  return res;}var areaMap=new Map();import echarts from "echarts";export default {  name: "mapChart",  data() {    return {      currArea:{district:{},city:{},province:{}},      areaMap:areaMap,      options: {          backgroundColor: '#404a59',    title: {        text: '',        subtext: '',        sublink: '',        left: 'center',        textStyle: {            color: '#fff'        }    },        visualMap: {          min: 0,          max: 50,          // text: ['High', 'Low'],          realtime: true,          calculable: true,          inRange: {            color: ["lightskyblue", "yellow", "orangered"],          },        },        tooltip: {          trigger: "item",        },        /*  legend: {        orient: 'vertical',        y: 'bottom',        x: 'right',        data: ['銷售數量'],        textStyle: {            color: '#fff'        }    },*/        geo: {          map: "100000",          zoom: 1.2,          roam:false,//移動地圖          //   center: [115.97, 29.71],          // regions:[{name:'北京',selected:true}],          label: {            emphasis: {              show: true,            },          },          itemStyle: {            color:'#eee',            normal: {              areaColor: '#eee',              borderColor: '#111'            },            emphasis: {              areaColor: "#00deff",            },          },        },        series: [          {            name: "銷售數量",            type: "scatter",            coordinateSystem: "geo",            data: [],//convertData(dataTest, geoCoordMap),            symbolSize: function (val) {              return val[2] / 10;            },            left: "center",            encode: {              value: 2,            },            label: {              formatter: "{b}",              position: "right",              show: true,            },            emphasis: {              label: {                show: true,              },            },          }        ],      },      winHeight: window.innerHeight,    };  },  methods: {    mapChatClick(e) {      if (e.event.target.id) {        event.stopPropagation(); // 阻止冒泡        if (e.componentType == "geo") {          // 獲取省名物件          // let info = this.areaMap.find((item) => {          //   return item.name.indexOf(e.name)>=0;          // });          let info=this.areaMap.get(e.name);          if (info == undefined) {            return;          }          var level=info.level||'province';           this.currArea[level]=info;          this.gotoMap(info.id||info.adcode,level);        } else if (e.componentType == "series") {        }      }    },    gotoMap(code,level) {        if(code=='100000'){            this.currArea = {district:{},city:{},province:{}};        }        switch (level){             case 'province':               this.currArea['city']={};               this.currArea['district']={};             case 'city':               this.currArea['district']={};           }        this.http.get(            this,            `/static/map/json/code/${code}.json`,            (res) => {              echarts.registerMap(code, res);              this.options.geo.map = code;              var areaList = {};              res.features.forEach((item, i) => {                console.log("res",item);                areaList[item.properties.name.replace('市','').replace('縣','').replace('自治','').replace('地區','').replace('區','').replace('州','')] = item.properties.cp||item.properties.centroid;                this.areaMap.set(item.properties.name,item.properties);              });              this.options.series[0].data=convertData(dataTest,areaList);            }          );    },  },  mounted() {      this.gotoMap('100000');  }};</script><style lang="less" scoped>.echarts {  top: 50px;  width: 100%;  margin: 0 auto;}.map-nav {  color: #fff;  font-size: 1.5rem;  position: absolute;  top: 50px;  right: 0px;  z-index: 100;}</style>

效果圖：