vue中使用echarts地图（异步请求接口版）

China.js

(function (root, factory) {
  if (typeof define === "function" && define.amd) {
    define(["exports", "echarts"], factory);
  } else if (
    typeof exports === "object" &&
    typeof exports.nodeName !== "string"
  ) {
    factory(exports, require("echarts"));
  } else {
    factory({}, root.echarts);
  }
})(this, function (exports, echarts) {
  var log = function (msg) {
    if (typeof console !== "undefined") {
      console && console.error && console.error(msg);
    }
  };
  if (!echarts) {
    log("ECharts is not Loaded");
    return;
  }
  if (!echarts.registerMap) {
    log("ECharts Map is not loaded");
    return;
  }
  echarts.registerMap("china", {
    /* 这里是GeoJSON数据放置位置 */
  });
});

<template>
  <div id="china_map_box">
    <div id="china_map"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import "./china.js";
import { getCarStatus } from "../../../api/cockpit";
export default {
  data() {
    return {
      //echart 配制option
      options: {
        tooltip: {
          triggerOn: "mousemove", //mousemove、click
          padding: 8,
          borderWidth: 1,
          borderColor: "#409eff", // 悬浮框的边框颜色
          backgroundColor: "rgba(255,255,255,0.7)", // 悬浮框的背景色
          textStyle: {
            color: "#000000",
            fontSize: 13,
          }, // 悬浮框的文字设置
          formatter: function (e, t, n) {
            let data = e.data;
            //模拟数据
            // data.specialImportant = (Math.random() * 1000) | 0;
            // data.import = (Math.random() * 1000) | 0;
            // data.compare = (Math.random() * 1000) | 0;
            // data.common = (Math.random() * 1000) | 0;
            // data.specail = (Math.random() * 1000) | 0;

            // let context = `
            //    <div>
            //        <p><b style="font-size:15px;">${data.name}</b>(2020年第一季度)</p>
            //        <p class="tooltip_style"><span class="tooltip_left">事件总数</span><span class="tooltip_right">${data.value}</span></p>
            //        <p class="tooltip_style"><span class="tooltip_left">特别重大事件</span><span class="tooltip_right">${data.specialImportant}</span></p>
            //        <p class="tooltip_style"><span class="tooltip_left">重大事件</span><span class="tooltip_right">${data.import}</span></p>
            //        <p class="tooltip_style"><span class="tooltip_left">较大事件</span><span class="tooltip_right">${data.compare}</span></p>
            //        <p class="tooltip_style"><span class="tooltip_left">一般事件</span><span class="tooltip_right">${data.common}</span></p>
            //        <p class="tooltip_style"><span class="tooltip_left">特写事件</span><span class="tooltip_right">${data.specail}</span></p>
            //    </div>
            // `;

            let context = ` <div> <p><b style="font-size:15px;">${data.name}</b></p>
                              <p class="tooltip_style"><span class="tooltip_left">车辆总数：</span><span class="tooltip_right">${data.value}</span></p>
                          </div> `;
            return context;
          },
        },
        visualMap: {
          show: true,
          left: 26,
          bottom: 40,
          showLabel: true,
          pieces: [
            {
              gte: 100,
              label: ">= 1000",
              color: "#1f307b",
            },
            {
              gte: 500,
              lt: 999,
              label: "500 - 999",
              color: "#3c57ce",
            },
            {
              gte: 100,
              lt: 499,
              label: "100 - 499",
              color: "#6f83db",
            },
            {
              gte: 10,
              lt: 99,
              label: "10 - 99",
              color: "#9face7",
            },
            {
              lt: 10,
              label: "<10",
              color: "#bcc5ee",
            },
          ],
          textStyle: {
            color: "#fff",
            fontSize: 13,
          },
        },
        geo: {
          map: "china",
          scaleLimit: {
            min: 1,
            max: 2,
          },
          zoom: 1,
          top: 120,
          label: {
            normal: {
              show: true,
              fontSize: "14",
              color: "rgba(0,0,0,0.7)", // 地图中省份的文字颜色
            },
          },
          itemStyle: {
            normal: {
              //shadowBlur: 50,
              //shadowColor: 'rgba(0, 0, 0, 0.2)',
              borderColor: "rgba(0, 0, 0, 0.2)", // 地图中各省边境分割线的颜色
            },
            emphasis: {
              areaColor: "#f2d5ad", // 地图中省份 hover 时的颜色
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              borderWidth: 0,
            },
          },
        },
        series: [
          {
            name: "车辆",
            type: "map",
            geoIndex: 0,
            data: [],
          },
        ],
      },
      //echart data
      dataList: [
        {
          name: "南海诸岛",
          value: 0,
          eventTotal: 100,
          specialImportant: 10,
          import: 10,
          compare: 10,
          common: 40,
          specail: 20,
        },
        {
          name: "北京",
          value: 0,
        },
        {
          name: "天津",
          value: 0,
        },
        {
          name: "上海",
          value: 0,
        },
        {
          name: "重庆",
          value: 0,
        },
        {
          name: "河北",
          value: 0,
        },
        {
          name: "河南",
          value: 0,
        },
        {
          name: "云南",
          value: 0,
        },
        {
          name: "辽宁",
          value: 0,
        },
        {
          name: "黑龙江",
          value: 0,
        },
        {
          name: "湖南",
          value: 0,
        },
        {
          name: "安徽",
          value: 0,
        },
        {
          name: "山东",
          value: 0,
        },
        {
          name: "新疆",
          value: 0,
        },
        {
          name: "江苏",
          value: 0,
        },
        {
          name: "浙江",
          value: 0,
        },
        {
          name: "江西",
          value: 0,
        },
        {
          name: "湖北",
          value: 0,
        },
        {
          name: "广西",
          value: 0,
        },
        {
          name: "甘肃",
          value: 0,
        },
        {
          name: "山西",
          value: 0,
        },
        {
          name: "内蒙古",
          value: 0,
        },
        {
          name: "陕西",
          value: 0,
        },
        {
          name: "吉林",
          value: 0,
        },
        {
          name: "福建",
          value: 0,
        },
        {
          name: "贵州",
          value: 0,
        },
        {
          name: "广东",
          value: 0,
        },
        {
          name: "青海",
          value: 0,
        },
        {
          name: "西藏",
          value: 0,
        },
        {
          name: "四川",
          value: 0,
        },
        {
          name: "宁夏",
          value: 0,
        },
        {
          name: "海南",
          value: 0,
        },
        {
          name: "台湾",
          value: 0,
        },
        {
          name: "香港",
          value: 0,
        },
        {
          name: "澳门",
          value: 0,
        },
      ],
      count: 0, // 全部车辆
    };
  },
  methods: {
    //初始化中国地图
    initEchartMap() {
      let mapDiv = document.getElementById("china_map");
      let myChart = this.$echarts.init(mapDiv);
      myChart.setOption(this.options);
    },
    //修改echart配制
    setEchartOption() {
      this.getCarStatus(); // 获取全部车辆
      setTimeout(() => {
        this.options.series[0]["data"] = this.dataList;
      }, 200)
    },

    /**
     * @Interface 获取全部车辆数据
     * */
    getCarStatus() {
      getCarStatus().then((res) => {
        if (res.code === 1) {
          this.count = res.data.count;
          this.dataList.forEach((item, index) => {
            if (item.name === "江苏") {
              item.value = res.data.count;
            }
          });
        }
      });
    },
  },
  created() {
  },
  mounted() {
    this.setEchartOption();

    setTimeout(() => {
      this.initEchartMap();
    }, 500)

    this.$nextTick(() => {
    });
  },
};
</script>

<style scoped>
#china_map_box {
  height: 100%;
  position: relative;
}
#china_map_box #china_map {
  height: 100%;
}
#china_map_box .china_map_logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 45px;
}
</style>
<style>
#china_map .tooltip_style {
  line-height: 1.7;
  overflow: hidden;
}
#china_map .tooltip_left {
  float: left;
}
#china_map .tooltip_right {
  float: right;
}
</style>