Vue 中使用echarts 绘制地图

图形如下

第一步，下载echarts

npm install echarts --save-dev

第二步，创建echarts.js文件，按需导入echarts

//echarts.js
import echarts from 'echarts/lib/echarts';
//引入地图
import 'echarts/lib/chart/map';
//引入柱状图
import 'echarts/lib/chart/bar';
//引入饼图
import 'echarts/lib/chart/pie';
import 'echarts/lib/chart/scatter';
//引入折线图
import 'echarts/lib/chart/line';

//引入插件
import 'echarts/lib/component/legend';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/geo'
import 'echarts/lib/component/toolbox'
import 'echarts/lib/component/visualMap'
import 'echarts/lib/component/title'

//导出echarts
export default echarts

第三步，下载所需区域地图的json数据

网站为http://datav.aliyun.com/tools/atlas/#&lat=31.840232667909365&lng=104.2822265625&zoom=4.
进入网站找到需要的省市，点击左下角的geojson下载到本地

通过第四步import方式引入数据即可使用。

第四步，建立地图组件

<template>
  <div class="echarts">
    <div :style="{height:'400px',width:'100%'}" ref="myEchart"></div>
  </div>
</template>
<script>
  import echarts from "../plugins/echarts";
  import JSON from "../assets/hz.json"; // 引入杭州市地图数据(引入方式重点，本人用其他方式报错)
  export default {
    name: "echarts",
    data() {
      return {
        mapOption:{
        	//标题内容
	        title: {
	          text: "杭州市各区案件分布图 ",
	        },
	        //鼠标移入时显示的内容
	        tooltip: {
	          trigger: "item",
	          formatter: "{b}<br/>{c} (p / km2)",
	        },
	        //左下角显示内容高低
	        visualMap: {
	          min: 100,
	          max: 5000,
	          text: ["高", "低"],
	          realtime: false,
	          calculable: true,
	          inRange: {
	            color: ["lightskyblue", "yellow", "orangered"],
	          },
	        },
	        
	        series: [
	          {
	           	type: "map",//图标类型
	            mapType: "杭州市", // 自定义扩展图表类型
	            name: "杭州市各区案件完成数量对比",
	            label: {
	              show: true,
	            },
	            //用于修改正常显示地图颜色边框等内容
	              normal: {
	                borderWidth: 1,
	                borderColor: "#e1e1e1",
	                color: "#90c31d",
	                opacity : 0.8
	              },
	              //用于修改鼠标移入时地图颜色边框等内容
	              emphasis: {
	                areaColor:"#749f83",//修改移入时地图颜色
	              },
	            data: [
	              { name: "西湖区", value: 2057.34 },
	              { name: "余杭区", value: 1577.48 },
	              { name: "临安区", value: 386.1 },
	              { name: "淳安区", value: 692.6 },
	              { name: "建德市", value: 445.49 },
	              { name: "桐庐县", value: 489.64 },
	              { name: "富阳区", value: 376.78 },
	              { name: "萧山区", value: 451.97 },
	              { name: "拱墅区", value: 520.26 },
	              { name: "下城区", value: 210.9 },
	              { name: "江干区", value: 418.26 },
	              { name: "滨江区", value: 581.84 },
	              { name: "上城区", value: 418.01 },
	            ],
	          },
	        ],
        }
      };
    },
    mounted() {
      this.drawMap();
    },
    beforeDestroy() {
      if (!this.chart) {
        return;
      }
      this.chart.dispose();
      this.chart = null;
    },
    methods: {
     drawMap() {
      //折线图
      let leftchart1 = echarts.init(document.getElementById("leftchart1"));
      leftchart1.setOption(this.leftchart1);
      let leftchart2 = echarts.init(document.getElementById("leftchart1"));
      leftchart2.setOption(this.leftchart2);

      //地图
      var myChart = echarts.init(document.getElementById("centerMap"));
      echarts.registerMap("杭州市", JSON, {}); //这个是关键，之前拿到的青州各街道数据
      let option = {
        title: {
          text: "杭州市案件分布图 ",
        },
        tooltip: {
          trigger: "item",
          formatter: "{b}<br/>{c} (p / km2)",
        },

        visualMap: {
          min: 100,
          max: 5000,
          text: ["高", "低"],
          realtime: false,
          calculable: true,
          inRange: {
            color: ["lightskyblue", "yellow", "orangered"],
          },
        },

        series: [
          {
            name: "杭州市各区案件完成数量对比",
            type: "map",
            mapType: "杭州市", // 自定义扩展图表类型
            label: {
              show: true,
            },
            data: [
              { name: "西湖区", value: 2057.34 },
              { name: "余杭区", value: 1577.48 },
              { name: "临安区", value: 386.1 },
              { name: "淳安区", value: 692.6 },
              { name: "建德市", value: 445.49 },
              { name: "桐庐县", value: 489.64 },
              { name: "富阳区", value: 376.78 },
              { name: "萧山区", value: 451.97 },
              { name: "拱墅区", value: 520.26 },
              { name: "下城区", value: 210.9 },
              { name: "江干区", value: 418.26 },
              { name: "滨江区", value: 581.84 },
              { name: "上城区", value: 418.01 },
            ],
          }
      myChart.setOption(this.mapOption);
     }
  }
</script>