返回

echarts地图不再有缝隙，你这样操作过吗？

前端

作为一个数据可视化大牛，echarts地图绝对是你的必备武器。然而，当你兴致勃勃地使用echarts地图时，却发现地图各个省之间链接处有很大的空隙，瞬间热情减半。别担心，这绝非绝症，只需稍加调整即可轻松修复。

解决方案

  1. 下载地图数据

    首先，我们需要下载中国地图数据。可在网上搜索“echarts地图下载”找到相关资源。下载后，将数据文件保存到本地。

  2. 加载地图数据

    接下来，在echarts中加载地图数据。具体步骤如下：

    var myChart = echarts.init(document.getElementById('main'));

var geoCoordMap = {
    '北京': [116.4551, 39.9038],
    '上海': [121.4648, 31.2891],
    // 其他城市坐标...
};

var mapData = [];
for (var city in geoCoordMap) {
    mapData.push({
        name: city,
        value: [geoCoordMap[city][0], geoCoordMap[city][1]]
    });
}

var option = {
    geo: {
        map: 'china',
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#009688',
                borderColor: '#fff'
            },
            emphasis: {
                areaColor: '#ffeb3b'
            }
        },
        data: mapData
    },
    series: [
        {
            name: '城市',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: mapData,
            symbolSize: 10,
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            itemStyle: {
                normal: {
                    color: '#f44336'
                }
            }
        }
    ]
};

myChart.setOption(option);

  3. 修复缝隙

    为了修复地图缝隙，我们需要在echarts中添加如下代码：

    geo: {
    ...
    regions: [
        {
            name: '南海诸岛',
            type: 'lines',
            coordinateSystem: 'geo',
            data: [
                [[117.13, 20.3], [117.3, 19.5], [118.6, 18.9], [119.5, 18.4], [119.9, 18.3], [120.4, 17.8], [121.1, 17.4], [121.8, 17.1], [122.4, 16.9], [123.1, 16.7], [123.7, 16.5], [124.2, 16.4], [124.8, 16.3], [125.3, 16.1], [125.9, 16], [126.3, 15.9], [126.8, 15.8], [127.2, 15.7], [127.8, 15.5], [128.2, 15.5], [128.7, 15.4], [129.1, 15.4], [129.5, 15.4], [129.9, 15.3], [130.4, 15.2], [130.8, 15.2], [131.2, 15.1], [131.6, 15.1], [132, 15.1], [132.4, 15], [132.8, 15], [133.1, 15], [133.5, 15], [133.9, 15], [134.2, 15], [134.6, 15], [135, 15], [135.4, 15], [135.7, 15], [136.1, 15], [136.5, 15], [136.9, 15], [137.2, 14.9], [137.6, 14.9], [138, 14.8], [138.4, 14.8], [138.7, 14.8], [139.1, 14.8], [139.5, 14.7], [139.9, 14.7], [140.2, 14.7], [140.6, 14.6], [141, 14.6], [141.4, 14.6], [141.7, 14.6], [142.1, 14.5], [142.5, 14.5], [142.8, 14.5], [143.2, 14.5], [143.5, 14.5], [143.9, 14.4], [144.2, 14.4], [144.6, 14.4], [144.9, 14.4], [145.3, 14.3], [145.7, 14.3], [146.1, 14.3], [146.4, 14.3], [146.8, 14.2], [147.1, 14.2], [147.5, 14.2], [147.8, 14.2], [148.2, 14.2], [148.5, 14.1], [148.9, 14.1], [149.3, 14.1], [149.6, 14.1], [150, 14.1], [150.3, 14.1], [150.7, 14], [151, 14], [151.4, 14], [151.7, 14], [152.1, 14], [152.5, 14], [152.8, 14], [153.2, 14], [153.5, 13.9], [153.9, 13.9], [154.2, 13.9], [154.6, 13.9], [155, 13.9], [155.3, 13.8], [155.7, 13.8], [156, 13.8], [156.4, 13.8], [156.8, 13.8], [157.1, 13.8], [157.5, 13.7], [157.9, 13.7], [158.2, 13.7], [158.6, 13.7], [159, 13.7], [159.3, 13.7], [159