vue+echart手动绘制地图并显示数据

效果图

 

一.准备json

1.考虑是否存在已经有人写好的地图json，贴上网站（最小单位市）

http://datav.aliyun.com/tools/atlas/#&lat=33.521903996156105&lng=104.29849999999999&zoom=4

2.若实在没有，则要自己绘制地图，贴上网站

http://geojson.io/#map=2/20.0/0.0

以长春净月潭为例，先放大地图

点击右侧多边形工具，分区截取，这里截了三块

可以看到，随着截取地图，右边出现了同等的json代码，截取完毕后先不着急拷贝

点击各个区域，添加属性name，再输入值，这样后续就不用再处理了

这里注意不要，只可以添加选区，不能添加marker，否则会无法运行。

全部完成后，在vue项目的static文件夹中新建一个changli.json（文件名自定，注意和下文的对应），将网页里右侧的json代码拷贝进去

二.使用echart

<div style="width:500px;height:500px" ref="chart"></div>

export default {
  data() {
    return {};
  },
  methods: {
    getEchart() {
      let that = this;
      that.axios.get("../../static/changli.json").then(data => {
        that.$echarts.registerMap("changli", data.data);
        let chart = that.$echarts.init(that.$refs.chart);
        chart.setOption({
          tooltip: {
            trigger: "item"
          },
          series: [
            {
              type: "map",
              map: "changli",
              data: [
                { name: "北区", value: 100 },
                { name: "南区", value: 100 },
                { name: "东区", value: 10 }
              ]
            }
          ]
        });
      });
    }
  },
  mounted() {
    this.getEchart();
  }
};