vue2使用echarts地图

首先echarts4.90版本以上移除了中国地图依赖包有两种办法解决：

1.下载echarts4.90版本

npm install echarts@4.9.0

如果项目中已经安装了echarts的最新版本，又不方便卸载

可以将打开下载了4.90版本的vue项目中的node_modules找到里面的map包，移动到echarts最新版本的同样位置目录下

2.再vue项目的main.js中做如下配置

import * as echarts from 'echarts'
import china from 'echarts/map/json/china.json' //导入china包
echarts.registerMap('china', china) 
Vue.prototype.$echarts = echarts

 3.使用

<template>
<div class="map" ref="map"></div>
</template>
 

<style lang="less" scoped>
.map{
    width: calc(100% - 40px);
    height: 600px;
}
 
</style>

在 mounted()里面调用此方法，用ecahrts的map实现

  data() {
    return {
      ecMap: null,
    };
  },
 mounted() {
    this.$nextTick(() => {
      this.map();
    });
  },
methods:{
      map() {
      const that = this;
      let ec = this.$echarts.init(this.$refs.map);
      let option = {
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            type: "map",
            map: "china",
            // 悬浮地图 改变区域字体颜色
            label: {
              show: true,
              color: "#fff",
              emphasis: {
                color: "#fff", // 设置悬浮时的字体颜色
                fontSize: that.transformFontSize(17),
              },
              fontSize: that.transformFontSize(14),
            },
            aspectScale: 0.75,
            layoutCenter: ["50%", "50%"], //地图位置
            layoutSize: "100%",
            roam: false, //关闭缩放
            itemStyle: {
              normal: {
                borderColor: "rgba(147, 235, 248, 0.6)",
                borderWidth: 0.8,
                areaColor: {
                  type: "linear-gradient",
                  x: 0,
                  y: 1200,
                  x2: 1000,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#111", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#000", // 50% 处的颜色
                    },
                  ],
                  global: true, // 缺省为 false
                },
              },
              emphasis: {
                areaColor: " rgba(147, 235, 248, 0)",
              },
            },
            // 点击地图 改变区域字体颜色
            select: {
              itemStyle: {
                areaColor: {
                  type: "linear-gradient",
                  x: 0,
                  y: 1200,
                  x2: 1000,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#111", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#d13535", // 50% 处的颜色
                    },
                  ],
                },
              },
              label: {
                show: true,
                color: "#fff",
                fontSize: that.transformFontSize(22),
              },
            },
            zlevel: 1,
            // data: data,
          },
        ],
        geo: {
          map: "china",
          roam: false,
          zoom: 1,
          aspectScale: 0.75,
          layoutCenter: ["50%", "51.5%"], //地图位置
          layoutSize: "100%",
          itemStyle: {
            normal: {
              borderColor: "rgba(147, 235, 248, 1)",
              borderWidth: 0.5,
              color: {
                type: "linear-gradient",
                x: 0,
                y: 1500,
                x2: 2500,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "#009DA1", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#005B9E", // 50% 处的颜色
                  },
                ],
                global: true, // 缺省为 false
              },
              opacity: 0.5,
            },
            emphasis: {
              areaColor: "#2a333d",
            },
          },
          regions: [
            {
              name: "南海诸岛",
              itemStyle: {
                areaColor: "rgba(0, 10, 52, 1)",
                borderColor: "rgba(0, 10, 52, 1)",
              },
              emphasis: {
                areaColor: "rgba(0, 10, 52, 1)",
                borderColor: "rgba(0, 10, 52, 1)",
              },
            },
          ],
          silent: true,
        },
      };
      ec.on("click", (params) => {
        console.log(params);
      });
      ec.setOption(option);
      this.ecMap = ec;
    },
},