ECharts 地图轮廓绘制边框的创意实现

2023-10-07 18:05:58

导言

ECharts 是一款强大的数据可视化库，它以其丰富的图表类型、交互功能和美观的外观而著称。然而，对于地图图表来说，ECharts 目前尚未提供直接绘制边框的功能。这使得想要在地图轮廓上添加边框的开发者们绞尽脑汁。不过，最近笔者在探索 ECharts 地图功能时发现了一种巧妙的解决方案，可以轻松实现地图轮廓边框的绘制。

图层叠加法

该解决方案的关键在于图层叠加技术。我们通过创建两个图层，其中一个图层作为底图，另一个图层作为边框。底图负责显示地图轮廓，而边框图层负责绘制轮廓边框。通过将这两个图层叠加在一起，就可以达到在地图轮廓上绘制边框的效果。

底图配置

首先，我们需要配置底图。底图负责显示地图轮廓，因此需要将 mapType 属性设置为 轮廓。同时，为了使底图的边框更明显，我们需要将 areaColor 属性设置为与背景色相同的颜色。这样，底图的轮廓线将成为边框的内部边缘。

var baseMapOption = {
    mapType: 'contour',
    areaColor: '#ffffff',
    ...
};

边框图层配置

接下来，我们需要配置边框图层。边框图层负责绘制轮廓边框，因此需要将 mapType 属性设置为与底图相同的 轮廓。同时，我们需要将 itemStyle 属性的 borderWidth 属性设置为边框的宽度，并将 borderColor 属性设置为边框的颜色。

var borderMapOption = {
    mapType: 'contour',
    itemStyle: {
        borderWidth: 1,
        borderColor: '#000000',
    },
    ...
};

图层叠加

最后，我们需要将两个图层叠加在一起。我们可以通过将底图选项和边框图层选项同时传递给 setOption 方法来实现。

echarts.init(document.getElementById('map')).setOption({
    series: [baseMapOption, borderMapOption],
    ...
});

示例展示

以下是使用图层叠加法绘制地图轮廓边框的示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>
<body>
    <div id="map" style="width: 600px; height: 400px;"></div>

    <script>
        var baseMapOption = {
            mapType: 'contour',
            areaColor: '#ffffff',
            ...
        };

        var borderMapOption = {
            mapType: 'contour',
            itemStyle: {
                borderWidth: 1,
                borderColor: '#000000',
            },
            ...
        };

        echarts.init(document.getElementById('map')).setOption({
            series: [baseMapOption, borderMapOption],
            ...
        });
    </script>
</body>
</html>