ECharts 地图图例点击后颜色变化自定义方法

在 ECharts 中，当用户点击图例时，默认会显示/隐藏对应的数据系列，并改变其颜色（通常变为灰色）。以下是自定义图例点击后颜色变化的方法：

方法一：通过 legend 的 inactiveColor 属性

option = {
    legend: {
        data: ['图例1', '图例2'],
        inactiveColor: '#ccc' // 设置图例点击后变灰的颜色
    },
    series: [
        {
            name: '图例1',
            type: 'map',
            // 其他配置...
        },
        {
            name: '图例2',
            type: 'map',
            // 其他配置...
        }
    ]
};

方法二：通过 visualMap 控制

如果使用 visualMap 组件，可以这样控制：

option = {
    visualMap: {
        inRange: {
            color: ['#50a3ba', '#eac736', '#d94e5d'] // 正常颜色范围
        },
        outOfRange: {
            color: ['#999'] // 图例点击后显示的颜色
        }
    },
    // 其他配置...
};

方法三：通过 series 的 emphasis 状态

option = {
    series: [
        {
            name: '系列名称',
            type: 'map',
            itemStyle: {
                normal: {
                    color: '#4bacc6' // 正常颜色
                },
                emphasis: {
                    color: '#f79646' // 高亮颜色
                }
            },
            // 其他配置...
        }
    ]
};

方法四：完全自定义图例点击行为

如果需要更复杂的控制，可以使用 legendselectchanged 事件：

myChart.on('legendselectchanged', function(params) {
    var option = myChart.getOption();
    // 根据params.name获取点击的图例名称
    // 修改对应series的颜色
    myChart.setOption(option);
});

注意事项

1. 确保图例名称与 series 名称匹配
2. 对于地图类型，颜色变化可能会影响视觉映射效果
3. 在最新版本的 ECharts 中，itemStyle.normal 和 itemStyle.emphasis 可能需要简化为 itemStyle 和 emphasis

希望这些方法能帮助你实现地图图例点击后的自定义颜色变化效果。