前言：

大家都知道，一般情况下，想要使用前端设置一个 中国地图 需要使用 canvas 画布进行编写，不仅代码多，逻辑处理麻烦，今天交大家使用一个插件，使用它就可以轻松的做出各种图。

什么是 Echarts 插件

echars是一棵树
这个图标是简单还是复杂，取决你在这棵树上绘制的枝干有多少
树就是dom容器，初始化，挂载到dom容器上，把枝干在配置进来
枝干可以在示例中，具体代码里有配置，在文档中查看具体效果

中国地图成品展示

在这里插入图片描述

步骤：

1. 首先下载 Echarts 插件，下载需要的版本即可，我这里使用的是 4.9.0 版本（最新版的一般都有一些 BUG）

cnpm install echarts@4.9.0 --save

1. 引入 Echarts 插件（在vue中一般都是引入到main.js组件中）

import echarts from 'echarts'

// 挂载到vue原型中就可以全局使用
Vue.prototype.$echarts = echarts

1. 在js中使用需要进行的步骤：

引入中国地图的地址在 node_modules_echarts@4.9.0@echarts\map\json 文件夹下

1. 先设置一个显示的标签
<div id="main" style="width: 600px;height:400px;"></div>
2. 引入中国地图代码
import geoJson from "echarts/map/json/china";
3. 初始化echatrs实例，并挂载到dom容器中
let myChart = this.$echarts.init(document.getElementById("main"));
4. 注册地图
this.$echarts.registerMap("china", geoJson);
5. 对照着需求，来逐个编写配置项(参考文档)和接收数据
let option = {}
6. 将配置和数据添加到实例中
myChart.setOption(option);

注册的是中国地图，必须包括geo组件或者mep图标类型的时候才可以使用
地图分为：世界地图，中国地图，省份地图，市区地图

下面代码的意思，可以跳转至官方网站进行查看

完成中国地图代码

<template>
  <div class="map-view">
    <div id="main"></div>
  </div>
</template>

<script>
import geoJson from "echarts/map/json/china";
export default {
  data() {
    return {};
  },
  mounted() {
    let myChart = this.$echarts.init(document.getElementById("main"));
    // 注册的是中国地图，必须包括geo组件或者mep图标类型的时候才可以使用
    // 地图：世界地图，中国地图，省份地图，市区地图
    this.$echarts.registerMap("china", geoJson);
    myChart.setOption({
      // 背景色
      backgroundColor: "rgb(121,145,200)",
      // 配置项(组件)
      geo: {
        map: "china",
        // 地图的长宽比例
        aspectScale: 0.75,
        // 图层
        zoom: 1.1,
        // 样式
        itemStyle: {
          // 标准
          normal: {
            // 地图区域的颜色
            areaColor: {
              type: "radial",
              x: 0.5,
              y: 0.5,
              r: 0.8,
              // 颜色的步骤
              colorStops: [
                {
                  offset: 0,
                  color: "#09132c",
                },
                {
                  offset: 1,
                  color: "#274d68",
                },
              ],
              // 延长作用域
              globalCoord: true,
            },
            // 盒子的阴影
            shadowColor: "rgb(58,115,192)",
            // 偏移
            shadowOffsetX: 10,
            shadowOffsetY: 11,
          },
        },
        region: [
          {
            name: "南海诸岛",
            itemStyle: {
              opacity: 0,
            },
          },
        ],
      },
      series: [
        // 配置地图相关的数据参数
        {
          type: "map",
          label: {
            normal: {
              // 显示文字
              show: true,
              textStyle: {
                color: "#1DE9B6",
              },
            },
            emphasis: {
              textStyle: {
                color: "rgb(183,185,14)",
              },
            },
          },
          // 图层
          zoom: 1.1,
          map: "china",
          itemStyle: {
            normal: {
              // 背景色
              backgroundColor: "rgb(147,235,248)",
              // 边框
              borderWidth: 1,
              // 区域颜色
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                // 文档
                r: 0.8,
                colorStops: [
                  { offset: 0, color: "rgb(34,54,150)" },
                  { offset: 1, color: "rgb(89,128,142)" },
                ],
                // 全局生效
                globalCoord: true,
              },
            },
            // 高亮效果
            emphasis: {
              areaColor: "rgb(46,229,206)",
              borderWidth: 0.1,
            },
          },
        },
      ],
    });
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.map-view {
  width: 100%;
  #main {
    width: 100%;
    height: 600px;
  }
}
</style>