vue项目中引入echarts中国地图

 最近项目中根据项目需求，展示中国地图

一、下载echarts插件（我这里使用的是 4.9.0 版本）

　　npm install [email protected] --save

二、在需要使用的页面引入echarts （这里是单独封装了地图组件）  components/map.vue

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

<script>
import * as echarts from 'echarts'
import geoJson from "echarts/map/json/china";
export default {
  data() {
    return {};
  },
  mounted() {
    let myChart = echarts.init(this.$el,document.getElementById("main"));
    // 注册的是中国地图，必须包括geo组件或者mep图标类型的时候才可以使用
    // 地图：世界地图，中国地图，省份地图，市区地图
    echarts.registerMap("china", geoJson);

    myChart.setOption({
      // 背景色
      backgroundColor: "rgb(70, 70, 231)",
      // 配置项(组件)
      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: 5,
            shadowOffsetY: 7,
          },
        },
        region: [
          {
            name: "南海诸岛",
            itemStyle: {
              opacity: 0,
            },
          },
        ],
      },
      series: [
        // 配置地图相关的数据参数
        {
          type: "map",
          label: {
            normal: {
              // 显示文字
              show: true,
              textStyle: {
                color: "#fff",
              },
            },
            emphasis: {
              textStyle: {
                color: "red",//鼠标滑过字体颜色
              },
            },
          },
          // 图层
          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(50,50,150)" },
                  { offset: 1, color: "rgb(90,158,162)" }, //每个省的地图背景色
                ],
                // 全局生效
                globalCoord: true,
              },
            },
            // 高亮效果
            emphasis: {
              areaColor: "reb(70,70,150)",//鼠标滑过背景颜色
              borderWidth: 0.1,
            },
          },
        },
      ],
    });
  },
  methods: {},
};
</script>

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

三、在需要的页面引入地图组件