Apache ECharts,一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。

方案

实现对应的样式发现对应的配置参数中是存在对应的配置的，但是配置上之后发现每一块区域的边界都会出现阴影，因为配置是在 itemStyle 中，如何实现呢？可以换种思路，如果阴影不是从他身上出现的话这个问题就可以解决了。如果存在两张大小一样的地图的话，错开一部分是不是可以实现阴影呢？答案是可以的。

// 指定图表的配置项和数据
const option = {
    geo: {
      layoutCenter: ['51%', '51%'],  // 阴影地图位置稍错开一点
      layoutSize: '100%',
      map: '地图',
      itemStyle: {
        areaColor: 'rgb(0,35,86)',   // 颜色加深
        borderColor: 'rgb(0,35,86)', // 边界线颜色与区域色保持一致
      },
      silent: true, //静默处理
    },
    series: [
      {
        layoutCenter: ['50%', '50%'],
        layoutSize: '100%',
        type: 'map',
        map: '地图',
        itemStyle: {
          areaColor: 'rgb(6,131,210)',
        },
      },
    ],
};
echartIns.setOption(option);

其实发现上边最后的效果和图片上的不一致。在变通一下就可以了。设置底部地图的颜色与上边地图颜色一致。之后设置后边地图的 itemStyle 就会发现成功的实现了对应的样式！

// 指定图表的配置项和数据
const option = {
    geo: {
      layoutCenter: ['51%', '51%'],  // 阴影地图位置稍错开一点
      layoutSize: '100%',
      map: '地图',
      itemStyle: {
        areaColor: 'rgb(0,35,86)',   // 颜色加深
        borderColor: 'rgb(0,35,86)', // 边界线颜色与区域色保持一致
      },
      silent: true, //静默处理
    },
    series: [
      {
        layoutCenter: ['50%', '50%'],
        layoutSize: '100%',
        type: 'map',
        map: '地图',
        itemStyle: {
            areaColor: "rgb(6,131,210)",
            
            /** ----- 设置阴影 ----- */
            shadowColor: "rgba(6,131,210, 0.7)",
            shadowBlur: 10,
            shadowOffsetX: 15,
            shadowOffsetY: 15,
            /** ----- 设置阴影 ----- */
            
        },
      },
    ],
};
echartIns.setOption(option);