ECharts - 实现地图轮廓增加阴影效果（附样例）

    ECharts 是一款强大而灵活的数据可视化库，除了可以创建各种交互式图表外，还可以实现地图的展示。本文通过样例演示如何为 ECharts 地图轮廓添加阴影效果，使得地图更加立体，以提升地图的视觉吸引力和信息传达效果。

1，样例代码

<template>
  <!-- 地图容器 -->
  <div ref="mapContainer" style="width: 100%; height: 600px;"></div>
</template>

<script>
// 引入echarts库
import echarts from 'echarts'

export default {
  data() {
    return {
      // 导入江苏省地图的JSON数据
      jsMap: require("@/libs/mapJson/320000.json"),
      // ECharts的配置项
      chartOption: {
        geo: [
          {
            // 地图名称，这里为江苏省
            map: '江苏',
            // 地图缩放级别
            zoom: 1,
            // 地图上的标签配置
            label: {
              show: true,           // 是否显示标签
              fontSize: 13,         // 标签字体大小
              color: '#333',        // 标签字体颜色
              position: ['50%', '50%'],  // 标签位置
            },
            // 地图区域的样式配置
            itemStyle: {
              areaColor: '#5FC5C1',  // 地图区域颜色
              borderColor: '#fff',   // 地图区域边界颜色
              fontWeight: 700,       // 地图区域字体粗细
              borderWidth: 1,        // 地图区域边界宽度
              shadowColor: "rgba(0, 0, 0, 0.5)", // 阴影颜色
              shadowBlur: 10 // 阴影模糊度
            },
            // 地图区域在强调（hover）状态下的样式配置
            emphasis: {
              itemStyle: {
                label: {
                  color: '#222',       // 强调状态下的标签颜色
                  fontWeight: 700,     // 强调状态下的标签字体粗细
                },
                areaColor: '#2D8F8A',  // 强调状态下的地图区域颜色
                borderColor: '#fff',   // 强调状态下的地图区域边界颜色
              },
            },
          },
        ]
      },
    }
  },
  mounted() {
    // 在组件挂载完成后初始化地图
    this.initChart()
  },
  methods: {
    // 初始化地图
    initChart() {
      // 注册江苏省地图
      echarts.registerMap("江苏", this.jsMap)
      // 初始化ECharts实例，并将地图挂载到指定的容器上
      this.chart = echarts.init(this.$refs.mapContainer)
      // 设置ECharts的配置项
      this.chart.setOption(this.chartOption)
    },
  },
  beforeDestroy() {
    // 在组件销毁前，释放ECharts实例占用的资源
    if (this.chart) {
      this.chart.dispose()
    }
  },
}
</script>

2，运行结果