vue-echarts-v3——浙江省地图下钻（eg:浙江省-嘉兴市-嘉善县）

        vue-echarts-v3和echarts的地图下钻配置项其实是一样的，本身就vue-echarts-v3而言，它只是echarts在vue的使用中，打包成了一个组件。

        浙江省地图下钻需要geoJson数据包，浙江省及浙江省下的省市，geoJson的数据，可以通过这个链接（阿里云DATAV.GeoAtlas）获取geo数据包，很好用~（超推荐！！！！）

        复制input中的.json数据地址，新窗口打开，然后就可以整个复制下来，新建一个.json文件存放复制下来的内容，然后引到项目里，我是为了保险起见，把浙江省的市级的geoJson数据包也分别引入了，先给大家看一下我的目录。

        接下来可以进行开发：

        引入vue-echarts-v3

npm install --save  vue-echarts-v3

        我看其他文章有说要在webpack里配置，我没有配置也引用成功了，这里就不放了，如果出现错误的话，自行百度引用下哈~，不过私信我也可以，互相学习的嘛~~

接下来，就是在(src->views->echarts->ZJMap.vue)代码里引入这个，就等于引入了IEcharts的所有组件，不需要在引入title，legend，tooltip等组件。

<script>
    import IEcharts from "vue-echarts-v3/src/full.js";
</script>

引入刚才复制的geoJson包，我这边是以浙江省为例，看名字可以看出来是浙江省及下级市的geoJson数据，后面的33000/330100等是省市代码。

<script>
    import zhejiangMap from "../../../static/json/map/330000.json";
    import hangzhouMap from "../../../static/json/map/330100.json";
    import ningboMap from "../../../static/json/map/330200.json";
    import wenzhouMap from "../../../static/json/map/330300.json";
    import jiaxingMap from "../../../static/json/map/330400.json";
    import huzhouMap from "../../../static/json/map/330500.json";
    import shaoxingMap from "../../../static/json/map/330600.json";
    import jinhuaMap from "../../../static/json/map/330700.json";
    import quzhouMap from "../../../static/json/map/330800.json";
    import zhoushanMap from "../../../static/json/map/330900.json";
    import taizhouMap from "../../../static/json/map/331000.json";
    import lishuiMap from "../../../static/json/map/331100.json";
</script>

现在需要通过省市代码查询省市数据的js文件(src->js->city-ZJ-map.js)。

const cityZJMap = {
    "浙江": '330000',
    "杭州市": "330100",
    "宁波市": "330200",
    "温州市": "330300",
    "嘉兴市": "330400",
    "湖州市": "330500",
    "绍兴市": "330600",
    "金华市": "330700",
    "衢州市": "330800",
    "舟山市": "330900",
    "台州市": "331000",
    "丽水市": "331100"
}

export default cityZJMap

Html的代码：注意:option="mapZJOption"，这个option是配置项，在script中设置。

<template>
  <div class="echarts">
    <a class="to-Back" v-show="isShowBack" @click="onBack()">返回上级</a>
    <IEcharts :option="mapZJOption" :resizable="true" @click="onClick" />
  </div>
</template>

接下来是script的逻辑代码

this.mapZJOption = {
        visualMap: {
          show: true,
          min: 0,
          max: 2000,
          type: "piecewise",
          orient: "horizontal",
          padding: 0,
          x: "center",
          y: "bottom",
          pieces: [
            {
              min: 30,
              label: "C类>30家",
              color: "#ee5918"
            },
            {
              max: 30,
              min: 20,
              label: "20<C<30",
              color: "#51a4f7"
            },
            {
              max: 20,
              min: 10,
              label: "10<C<20",
              color: "#7e47ff"
            },
            {
              max: 10,
              min: 0,
              label: "0<C<10",
              color: "#5cddce"
            }
          ]
        },
        tooltip: {
          trigger: "item",
          formatter: function(params) {
            if (params.data != undefined) {
              return (
                "<p>总数量：" +
                params.data.enterPriseCount +
                "家</p>" +
                "<p>AA数量：" +
                params.data.aaenterPriseCount +
                "家</p>" +
                "<p>A数量：" +
                params.data.aenterPriseCount +
                "家</p>" +
                "<p>B数量：" +
                params.data.benterPriseCount +
                "家</p>" +
                "<p>C数量：" +
                params.data.value +
                "家</p>"
              );
            }
          }
        },
        series: [
          {
            type: "map",
            map: name,
            data: this.initMapData(this.ZJCityInformationList),
            itemStyle: {
              borderColor: "rgb(62,215,213)",
              borderWidth: 1
            },
            label: {
              show: true,
              textStyle: {
                color: "#fff", //地图初始化区域字体颜色
                fontSize: 12,
                opacity: 1,
                backgroundColor: "rgba(0,0,0,0)"
              }
            }
          }
        ]

onClick(event, instance, echarts) {  //这个是地图的点击事件，判断是否有下级地图数据
      //   console.log(arguments);
      let cityId = cityMap[event.name];
      if (cityId) {
        this.isShowBack = true;
        //代表有下级地图
        this.ZJId = Number(cityId);
        this.ZJName = event.name;
        this.mapJson = this.getMapData(this.ZJId);
      } else {
        console.log("没有下一级");
      }
    },

具体的源码获取，请扫码关注公众号“DataShow Charts”，回复“浙江地图”