vue中使用ECharts引入中国地图

坑我来踩 代码你们看 

china.js 提取码：iwn9 

百度网盘 请输入提取码

<template>
  <div class="echarsMap">
    <div id="china_map" style="width: 100%; height: 100%;></div>
  </div>
</template>

<script>
import "../assets/js/china.js";
export default {
  data() {
    return {
      dataList: [
        {
          name: "南海诸岛",
          value: 0,
        },
        {
          name: "北京",
          value: 54,
        },
        {
          name: "天津",
          value: 13,
        },
        {
          name: "上海",
          value: 40,
        },
        {
          name: "重庆",
          value: 75,
        },
        {
          name: "河北",
          value: 13,
        },
        {
          name: "河南",
          value: 83,
        },
        {
          name: "云南",
          value: 11,
        },
        {
          name: "辽宁",
          value: 19,
        },
        {
          name: "黑龙江",
          value: 15,
        },
        {
          name: "湖南",
          value: 69,
        },
        {
          name: "安徽",
          value: 60,
        },
        {
          name: "山东",
          value: 39,
        },
        {
          name: "新疆",
          value: 4,
        },
        {
          name: "江苏",
          value: 31,
        },
        {
          name: "浙江",
          value: 104,
        },
        {
          name: "江西",
          value: 36,
        },
        {
          name: "湖北",
          value: 1052,
        },
        {
          name: "广西",
          value: 33,
        },
        {
          name: "甘肃",
          value: 7,
        },
        {
          name: "山西",
          value: 9,
        },
        {
          name: "内蒙古",
          value: 7,
        },
        {
          name: "陕西",
          value: 22,
        },
        {
          name: "吉林",
          value: 4,
        },
        {
          name: "福建",
          value: 18,
        },
        {
          name: "贵州",
          value: 5,
        },
        {
          name: "广东",
          value: 98,
        },
        {
          name: "青海",
          value: 1,
        },
        {
          name: "西藏",
          value: 0,
        },
        {
          name: "四川",
          value: 44,
        },
        {
          name: "宁夏",
          value: 4,
        },
        {
          name: "海南",
          value: 22,
        },
        {
          name: "台湾",
          value: 3,
        },
        {
          name: "香港",
          value: 5,
        },
        {
          name: "澳门",
          value: 5,
        },
      ],
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 初始化echarts实例
      this.chinachart = this.$echarts.init(
        document.getElementById("china_map")
      );
      // 进行相关配置
      this.chartOption = {
        tooltip: {
          backgroundColor: "rgba(0, 0, 0, 0.7)",
          borderColor: "rgba(0, 0, 0, 0.7)",
          textStyle:{
              color:"#fff"
          },
          triggerOn: "mousemove",
          formatter: function (e, t, n) {
            return e.name + "：" + e.value;
          },
        },
        visualMap: {
          min: 0,
          max: 1000,
          left: 400,
          bottom: 40,
          showLabel: !0,
          pieces: [
            {
              gt: 10000,
              label: "> 10000 ",
              color: "#F57567",
            },
            {
              gte: 1000,
              lte: 9999,
              label: "1000 - 9999 ",
              color: "#FF9985",
            },
            {
              gte: 1,
              lt: 999,
              label: "1 - 999 ",
              color: "#FFE0D9",
            },
            {
              value: 0,
              color: "#ffffff",
            },
          ],
          show: !0,
        },
        geo: {
          map: "china",
          roam: !1,
          scaleLimit: {
            min: 1,
            max: 2,
          },
          layoutCenter: ["55%", "50%"],
          // 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
          layoutSize: 600,
          zoom: 1.23,
          top: 120,
          label: {
            normal: {
              show: !0,
              fontSize: "14",
              color: "rgba(0,0,0,0.7)",
            },
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(0, 0, 0, 0.2)",
            },
            emphasis: {
              areaColor: "#3FD8E3 ",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              borderWidth: 0,
            },
          },
        },
        series: [
          {
            name: "",
            type: "map",
            geoIndex: 0,
            data: this.dataList,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示地图数据
      this.chinachart.setOption(this.chartOption);
    },
  },
};
</script>

<style scoped>
.echarsMap {
  height: 788px;
  width: 100%;
  margin-top: 60px;
}
</style>