使用vue+Echarts实现中国地图

首先安装Echarts，这个不多说，官网直接按照步骤安装、在main.js中引入就好了。

其次是china.json文件，因为Echarts官网已经没有中国地图了，所以只能下载china.json文件，放在项目中引入就行了，需要china.json文件的小伙伴可以留言，可以直接发到你的邮箱（china.json文件里面不是乱码，请放心使用）。

第一次搞这个东西，基础的功能都可以实现，例如：地图背景颜色，省份字体大小和颜色；点击省份后背景颜色变化以及鼠标滑过省份时候，背景色、字体大小和颜色的变化，先看一下效果图。

一定要注意要正确引入china.json文件，不然会报错的。

下面是代码部分，有详细的注释，大家可以根据注释内容，根据自己的需要自行更改，里面没有加数据，只是简单的一个中国地图，其中有的地方也是请教了其他人才实现的效果。

欢迎大家有问题或者补充的地方，可以留言，大家一起学习，一起进步，非常感谢！

<template>
  <div>
    <div id="mapChart" style="width: 800px; height: 800px"></div>
  </div>
</template>

<script>
import chinaJson from "../js/china";
export default {
  data() {
    return {};
  },

  mounted() {
    this.getMapChart();
  },
  methods: {
    getMapChart() {
      let myChart = this.$echarts.init(document.getElementById("mapChart"));
      // 注册默认全国地图的json，小写的china
      this.$echarts.registerMap("china", chinaJson);
      let option = {
        myChart: null,
        mapName: "china",
        tooltip: {
          trigger: "item",
          formatter: "{b}",
        },
        geo: {
          map: "china",
          zoom: 1.25,
          roam: true, //放大缩小地图、可拖拽
          label: {
            normal: {
              show: true, //省份名展示
              fontSize: "10", //省份字体大小
              color: "white", //省份字体颜色
            },
            emphasis: {
              show: true,
              textStyle: {
                color: "white", //鼠标移入省份字体颜色变化
                fontSize: "14px", //鼠标移入省份字体大小变化
              },
            },
          },
          itemStyle: {
            normal: {
              borderColor: "black", //地图边框颜色
              areaColor: "skyblue", //地图背景颜色
            },
            emphasis: {
              show: true,
              areaColor: "#357375", //鼠标放到地图上显示的颜色
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
          //点击省份后背景颜色改变
          select: {
            itemStyle: {
              color: "yellow",
              areaColor: "#357375", //点击省份后背景颜色改变
            },
          },
        },
        series: [
          {
            type: "map",
            map: "中国",
            mapType: "china",
            geoIndex: 0, // 解决设置geo后地图重影问题
            zoom: 1.25,
            silent: false,
            selectedMode: "multiple",
          },
        ],
      };
      option && myChart.setOption(option);
    },
  },
};
</script>
<style></style>