vue 可视化数据大屏 项目开发中,经常会需要echarts来渲染地图效果，在设置地图颜色的时候一般使用
itemStyle下的areaColor来控制地图的颜色，但是在echarts-gl下，areaColor是无效的

使用版本

因为后期可能这些问题会在新版本里解决，所以这里把版本号写出来，可能问题只会出现在当前的版本中。

"echarts": "^5.2.0",
"echarts-gl": "^2.0.8",

无效配置

itemStyle: {
    areaColor: '#6089d1',
},

echarts-gl配置地图颜色

根据文档来看，我们要配置echarts-gl地图颜色，不是areaColor而是color字段。除了在itemStyle下配置地图颜色外，我们还可以配置地图的边线宽度，地图的边线颜色。但是实际配置的时候，文档中虽然有透明度的配置，但是透明度配置是无效的，不知道是不是因为版本的问题。

itemStyle: {
    color: '#6089d1',
    borderWidth: 0.8,
    borderColor: '#a9dbff'
},

鼠标移入后的颜色

我们配置完地图颜色后，还需要一个高亮后的颜色，当鼠标移入后的颜色也需要配置一下，要配置高亮颜色，我们通过emphasis来实现。在emphasis.itemStyle配置高亮颜色。虽然说明文档中也有borderWidth和borderColor但是实际测试是无效的。

emphasis:{
    itemStyle: {
      color: '#ddb84c',
      borderWidth: 0.8,
      borderColor: '#a9dbff'
    },
},

完整实例代码

<template>
  <div class="item1">
    <div class="centerMap" ref="centerMap">
    </div>
  </div>
</template>

<script>

import data from '../assets/data.json'
import * as echarts from "echarts"
import 'echarts-gl'

export default {
  name: "item1",
  data() {
    return {
      data,
      list: []
    }
  },
  components: {},
  watch: {},
  mounted() {
    var that = this;
    const viewElem = document.body;
    // 监听窗口变化,重绘echarts
    const resizeObserver = new ResizeObserver(() => {
      setTimeout(() => {
        that.drawEcharts();
      }, 300)
    });
    resizeObserver.observe(viewElem);
  },

  methods: {
    drawEcharts() {
      var that = this;
      var chartDom = that.$refs.centerMap;
      var myChart = echarts.init(chartDom);
      myChart.clear()
      myChart.resize()
      var nameMap = '地图数据';
      // 图标数据
      echarts.registerMap(nameMap, this.data);
      var optionMap = {
        geo3D: {
          map: nameMap,
          roam: true,
          itemStyle: {
            color: '#6089d1',
            borderWidth: 0.8,
            borderColor: '#a9dbff'
          },
          emphasis:{
            itemStyle: {
              color: '#ddb84c'
            },
          },
          label: {
            show: true,
            color: '#fff', //地图初始化区域字体颜色
            fontSize: 14,
            opacity: 1,
          },
        },
      };
      myChart.clear()
      myChart.resize()
      myChart.setOption(optionMap);
    }
  },
}
</script>

<style lang="scss" scoped>
.item1 {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
}

.map {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  margin: 0 auto;
  position: absolute;
  z-index: 0;

  img {
    height: 100%;
    max-width: 100%;
    max-height: 100%;
  }
}

.centerMap {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  top: 0;
}
</style>

更多echarts 3d地图

vue3 echarts-gl 3d地图实例汇总