vue使用echarts实现中国地图

 效果图

旧版echarts须引入

import "echarts/map/js/china.js";

新版echarts移除了地图包，需要下载地图包才可以使用 echarts地图包

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

<script>
//引入中国地图数据 （*********重中之重）
import "@/components/Charts/map/js/china.js";
export default {
  name: "map",
  data() {
    return {};
  },
  mounted() {
    // 渲染echarts-地图
    this.initEchartsMap();
  },
  methods: {
    // 渲染echarts-地图
    initEchartsMap() {
      let dataList = [
        {
          name: "南海诸岛",
          value: 0,
          eventTotal: 100,
          specialImportant: 10,
          import: 10,
          compare: 10,
          common: 40,
          specail: 20,
        },
        {
          name: "北京",
          value: 0,
        },
        {
          name: "天津",
          value: 0,
        },
        {
          name: "上海",
          value: 10,
        },
        {
          name: "重庆",
          value: 20,
        },
        {
          name: "河北",
          value: 30,
        },
        {
          name: "河南",
          value: 0,
        },
        {
          name: "云南",
          value: 0,
        },
        {
          name: "辽宁",
          value: 0,
        },
        {
          name: "黑龙江",
          value: 40,
        },
        {
          name: "湖南",
          value: 0,
        },
        {
          name: "安徽",
          value: 0,
        },
        {
          name: "山东",
          value: 50,
        },
        {
          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,
        },
      ];
      let options = {
        tooltip: {
          triggerOn: "mousemove", //mousemove、click
          padding: 8,
        },
        visualMap: {
          show: true,
          type: "continuous",
          min: 0,
          max: 100,
          left: 0,
          top: 0,
          itemGap: 0,
          showLabel: true,
          realtime: false,
          itemWidth: 12,
          itemHeight: 90,
          calculable: true,
        },
        geo: {
          map: "china",
          scaleLimit: {
            min: 1,
          },
          zoom: 1,
          roam: true,
          top: 30,
          bottom: 10,
          label: {
            normal: {
              show: true,
              fontSize: "8",
              color: "rgba(0,0,0)",
            },
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(0, 0, 0, 0.2)",
            },
            emphasis: {
              areaColor: "#f2d5ad",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              borderWidth: 0,
            },
          },
        },
        series: [
          {
            name: "地区分布",
            type: "map",
            roam: true,
            geoIndex: 0,
            data: dataList,
          },
        ],
      };
      let mapWrapper = document.getElementById("china_map");
      let initChart = this.$echarts.init(mapWrapper);
      initChart.setOption(options);
    },
  },
};
</script>
<style lang="scss" scoped>
#china_map {
  height: 100%;
  width: 100%;
}
</style>