echarts地图选中

Echarts是一个基于JavaScript的开源可视化库，它提供了丰富的图表类型和交互功能。其中，地图是Echarts中的一个重要组件，可以用来展示各种地理数据。在Echarts地图中，可以通过设置selectedMode属性来实现选中效果。具体来说，可以设置为single（单选）、multiple（多选）或false（不可选中）。同时，可以通过dispatchAction方法来触发选中效果，例如在鼠标移动或点击事件中使用。在选中效果中，可以设置选中的系列和数据索引，从而实现对地图上特定区域的高亮显示。

下面是一个示例代码，用于实现Echarts地图的选中效果：

option = {
    tooltip: {
        trigger: 'item',
        formatter: '{b}'
    },
    series: [
        {
            name: '中国',
            type: 'map',
            mapType: 'china',
            selectedMode: 'multiple', // 多选
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data:[
                {
                    name:'广东',
                    selected:true // 默认选中
                }
            ]
        }
    ]
};

// 选中效果
let index = 0;
charts.dispatchAction({
    type: 'highlight',
    seriesIndex: 0,
    dataIndex: 0,
});

charts.on('mouseover', function(e) {
    if (e.dataIndex != index) {
        charts.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: index,
        });
    }
});

charts.on('mouseout', function(e) {
    index = e.dataIndex;
    charts.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: e.dataIndex,
    });
});

charts.on("click", function(e) {
    if (e.dataIndex != index) {
        charts.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: index,
        });
    }
    index = e.dataIndex;
    charts.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: e.dataIndex,
    });
});