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();
  }
};