echarts地图上绘制散点的正确姿势

2024-01-03 09:47:19

前言

前段时间，负责的项目上有一个开发echarts地图需求，有了之前的经验，配置地图相对来说简单很多。但是这次要求在地图上铺设散点，这个是之前没有做过的，单独开发地图或者单独开发散点图难度都不是很大。

但是在在地图上开发散点就有点意思了，因为地图上已经有了一个series，如果再加一个的话，那就需要设置zlevel和z，这样散点才会在地图上面，就像这样：

series: [
    // 地图
    {
        type: 'map',
        ...
    },
    // 散点
    {
        type: 'scatter',
        ...
    }
]

这样，在地图上就可以显示出散点，但是有个很大的问题，就是当把鼠标放到散点上时，地图上是不会有任何反应的，比如提示框和高亮显示，这是因为鼠标点击事件被散点抢走了。

解决办法

解决这个问题，有两种方案。

1. 修改地图的 `silent: true`

比如：

{
    // ...
    silent: true,
    ...
}

这样可以将地图的鼠标事件设置为静默，即使鼠标放在地图上，地图也不会产生任何响应。

2. 增加一个空series，防止地图事件被抢占

为了不影响之前的地图事件，在原始的地图和散点之间增加一个空的series。

series: [
    // 地图
    {
        type: 'map',
        ...
    },
    // 空series
    {
        type: 'scatter',
        silent: true,
        data: []
    },
    // 散点
    {
        type: 'scatter',
        ...
    }
]

这样就可以解决鼠标事件被抢占的问题了。

示例

下面是一个使用echarts在地图上绘制散点的示例。该示例将在中国地图上绘制各省的人口数据。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.3/dist/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script>
        // 创建echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 设置数据
        var data = [
            {name: '北京', value: 21542000},
            {name: '上海', value: 24152900},
            {name: '广州', value: 15301700},
            {name: '深圳', value: 17560600},
            {name: '天津', value: 15202100},
            {name: '武汉', value: 11894300},
            {name: '重庆', value: 30165500},
            {name: '成都', value: 16417600},
            {name: '南京', value: 8860100},
            {name: '杭州', value: 9466000},
        ];

        // 设置地图
        var mapOption = {
            title: {
                text: '中国人口分布图'
            },
            tooltip: {
                trigger: 'item'
            },
            visualMap: {
                min: 0,
                max: 30000000,
                text:['高','低'],
                realtime: false,
                calculable: true,
                inRange: {
                    color: ['lightskyblue','yellow', 'orangered']
                }
            },
            series: [
                // 地图
                {
                    type: 'map',
                    map: 'china',
                    itemStyle: {
                        emphasis: {
                            label: {
                                show: true
                            }
                        }
                    },
                    data: data
                },
                // 空series
                {
                    type: 'scatter',
                    silent: true,
                    data: []
                },
                // 散点
                {
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    symbolSize: 10,
                    label: {
                        show: true,
                        formatter: '{b}'
                    },
                    itemStyle: {
                        color: 'red'
                    },
                    data: data
                }
            ]
        };

        // 显示地图
        myChart.setOption(mapOption);
    </script>
</body>
</html>