vue中展示echarts中国地图

在vue项目中展示中国地图可以使用echarts库，根据配置数据区分不同颜色展示地图等功能。
先看效果

一、安装Echarts

npm install echarts@4.9.0 --save 我这里安装的版本号是4.9.0

二、组件中引入js文件

// 引入echarts
import echarts from "echarts";
// 引入js
import "echarts/map/js/china.js";

三、放置一个地图容器

在组件页面中放置一个地图的容器标签，可以给设定宽高样式

<div style="display: flex; justify-content: center">
  <div id="map-china" style="width: 1000px; height: 800px"></div>
</div>

四、创建echarts实例并配置地图相关参数

详细配置如下

initMap() {
   
      // 初始化echarts实例
      this.chinachart = echarts.init(document.getElementById("map-china"));
      // 进行相关配置
      this.chartOption = {
   
        // geo配置详解： https://echarts.baidu.com/option.html#geo
        geo: {
   
          // 地理坐标系组件用于地图的绘制
          map: "china", // 表示中国地图
          // roam: true, // 是否开启鼠标缩放和平移漫游
          zoom: 1.2, // 当前视角的缩放比例（地图的放大比例）
          label: {
   
            show: true,
          },
          itemStyle: {
   
            // 地图区域的多边形 图形样式。
            borderColor: "rgba(0, 0, 0, 0.2)",
            emphasis: {
   
              // 高亮状态下的多边形和标签样式
              shadowBlur: 20,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
        series: