ECharts 地图图例点击后颜色自定义控制

在 ECharts 中，地图图例点击后的颜色可以通过以下几种方式进行自定义控制：

方法一：通过 visualMap 配置

option = {
    visualMap: {
        type: 'piecewise', // 分段型
        pieces: [
            {min: 1500, color: '#c23531'}, // 自定义颜色
            {min: 900, max: 1500, color: '#2f4554'},
            {min: 310, max: 900, color: '#61a0a8'},
            {max: 310, color: '#d48265'}
        ],
        inRange: {
            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026'] // 自定义颜色范围
        },
        outOfRange: {
            color: '#999' // 超出范围的颜色
        }
    }
}

方法二：通过 series.itemStyle 配置

option = {
    series: [{
        type: 'map',
        itemStyle: {
            normal: {
                color: '#ddd', // 默认颜色
                borderColor: '#fff'
            },
            emphasis: { // 高亮状态样式
                color: '#ff0000' // 点击后的颜色
            }
        },
        selectedMode: 'single' // 单选模式
    }]
}

方法三：通过 selected 和 select 配置

option = {
    series: [{
        type: 'map',
        selectedMode: 'multiple', // 多选模式
        select: {
            itemStyle: {
                color: '#ff0000' // 选中后的颜色
            }
        }
    }]
}

方法四：通过 legend 的 selected 事件

myChart.on('legendselectchanged', function(params) {
    // 根据图例选择状态更新颜色
    var option = myChart.getOption();
    option.series[0].data.forEach(function(item) {
        if (params.selected[item.name] === false) {
            item.itemStyle = {color: '#ccc'}; // 未被选中的颜色
        } else {
            item.itemStyle = {color: '#1e90ff'}; // 被选中的颜色
        }
    });
    myChart.setOption(option);
});

注意事项

1. 确保 selectedMode 设置为 'single' 或 'multiple' 以启用选择功能
2. 不同版本的 ECharts 可能有细微的 API 差异，请根据实际版本调整
3. 对于地图数据，可能需要先注册地图数据 echarts.registerMap()
4. 颜色值可以使用十六进制、RGB 或颜色名称

以上方法可以单独使用，也可以组合使用以达到更复杂的效果。