vue+echarts+geoJson+MakeAPie实现地图下钻和数据显示

Posted 2021-11-03 尔嵘

一、参考示例：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