vue+echarts+geojson+makeapie实现地图下钻和数据显示(代码片段)

一、参考示例：Make A Pie

 说明：上面这个是JQuery实现的地区分布图 

二、实现过程：

1、下载json:

地址： https://hxkj.vip/demo/echartsMap/

或者：EasyMap 

下载的有的并非是严格的json文件，选用用  json.cn 进行转换

2、vue文件中引入json，直接使用

import jsonData from "../assets/json/411300.json"; //引入josn文件

3、将参考实例中的参考代码语法改成vue能直接用的

4、绘制地图

三、完整代码如下：

components新建组件jmap.vue，代码如下：

<template>
  <div id="container"></div>
</template>
<script>
import jsonData from "../assets/json/411300.json"; //引入josn文件

export default 
  props: ,
  data() 
    return 
        jsonData: [],
        geoCoordMap: 
            内乡县: [111.843801, 33.046358],
            南召县: [112.435583, 33.488617],
            卧龙区: [112.528789, 32.989877],
            唐河县: [112.838492, 32.687892],
            宛城区: [112.544591, 32.994857],
            新野县: [112.365624, 32.524006],
            方城县: [113.010933, 33.255138],
            桐柏县: [113.406059, 32.367153],
            淅川县: [111.489026, 33.136106],
            社旗县: [112.938279, 33.056126],
            西峡县: [111.485772, 33.302981],
            邓州市: [112.092716, 32.681642],
            镇平县: [112.232722, 33.036651]
        ,
        jData: [
           name: "唐河县", value: 12 ,
           name: "西峡县", value: 6 ,
           name: "宛城区", value: 16 ,
           name: "社旗县", value: 2000 ,
           name: "新野县", value: 10 ,
           name: "南召县", value: 11 
        ],

    ;
  ,
  mounted() 
    this.init();
  ,
  created() 
    this.jsonData = jsonData;
  ,

  methods: 
    convertData(data) 
        var res = [];
        for (var i = 0; i < data.length; i++) 
            var geoCoord = this.geoCoordMap[data[i].name];
            if (geoCoord) 
                res.push(
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value).concat(data[i].img)
                );
            
        
        return res;
    ,

    //初始化数据
    init() 
        var chartDom = document.getElementById('container');
        var myChart = this.$echarts.init(chartDom);
        var option;
        myChart.showLoading();
        this.$echarts.registerMap("nanyang", jsonData);//注册地图
        myChart.hideLoading();

        option = 
          title: 
            top: 20,
            text: "VIP分布",
            subtext: "VIP分布",
            textStyle: 
              color: "#000"
            
          ,
          tooltip: 
            formatter: function(params) 
              var html = "";
              html =
                "<div>" +
                "<div >" +
                params.name +
                "</div>" +
                "<div>" +
                '<span style="font-size:14px;font-weight:bold;">' +
                "IVP数：" +
                params.data.value[2] +
                " " +
                "</span>" +
                "</div>" +
                "</div>";
              return html;
            
          ,
          geo: 
            map: "nanyang",
            type: "map",
            zoom: 1,
            showLegendSymbol: true,
            label: 
              normal: 
                show: true,
                color: "#fff"
              ,
              emphasis: 
                show: true,
                color: "red"
              
            ,
            itemStyle: 
              normal: 
                areaColor: "#3a7fd5",
                borderColor: "#0a53e9", //线
                shadowColor: "#092f8f", //外发光
                shadowBlur: 20
              ,
              emphasis: 
                areaColor: "#0a2dae" //悬浮区背景
              
            
          ,
          series: [
            
              name: "666",
              type: "scatter",
              coordinateSystem: "geo",
              symbol: "pin",
              symbolSize: [50, 50],
              label: 
                normal: 
                  show: true,
                  textStyle: 
                    color: "#fff",
                    fontSize: 10
                  ,
                  formatter(value) 
                    return value.data.value[2];
                  
                
              ,
              itemStyle: 
                normal: 
                  color: function(val) 
                    if (val.dataIndex == "0") 
                      return "blue";
                     else if (val.dataIndex == "1") 
                      return "green";
                     else if (val.dataIndex == "2") 
                      return "#ff9900";
                     else 
                      return "red";
                    
                  
                
              ,
              data: this.convertData(
                this.jData.sort(function(a, b) 
                  return b.value - a.value;
                )
              ),
              showEffectOn: "render",
              rippleEffect: 
                brushType: "stroke"
              ,
              hoverAnimation: true,
              zlevel: 1
            
          ]
        ;
        myChart.setOption(option);
    
  
;
</script>

父组件中使用上述组件

先引入：import jMap from "@/components/jmap"; 

再注册：components: jMap

使用：

<div class="home">
 <div class="mapp">
     <jMap style="width: 100%;height: 100%"></jMap>
 </div>
</div>

class为home的记得要给个具体的宽高

参考：

【1】https://www.makeapie.com/editor.html?c=xYSCeb6QAd

【2】Examples - Apache ECharts