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

在ECharts中，地图图例的点击颜色变化可以通过以下几种方式自定义：

方法一：使用selectedMode和selected属性

option = {
    series: [{
        type: 'map',
        map: 'china',
        selectedMode: 'multiple', // 允许多选
        itemStyle: {
            normal: {
                // 默认状态样式
                areaColor: '#e0e0e0',
                borderColor: '#fff'
            },
            emphasis: {
                // 高亮状态样式
                areaColor: '#ffeb3b'
            }
        },
        selected: {
            // 选中状态样式
            '北京': {
                areaColor: '#f44336'
            },
            '上海': {
                areaColor: '#4caf50'
            }
        },
        data: [
            {name: '北京', value: 100},
            {name: '上海', value: 200}
            // 其他数据...
        ]
    }]
};

方法二：使用visualMap组件

option = {
    visualMap: {
        type: 'piecewise',
        pieces: [
            {min: 150, color: '#f44336'}, // 高值区域
            {min: 100, max: 149, color: '#ff9800'}, // 中值区域
            {max: 99, color: '#4caf50'} // 低值区域
        ],
        inRange: {
            color: ['#4caf50', '#ff9800', '#f44336'] // 颜色渐变
        }
    },
    series: [{
        type: 'map',
        map: 'china',
        data: [
            {name: '北京', value: 100},
            {name: '上海', value: 200}
            // 其他数据...
        ]
    }]
};

方法三：使用自定义事件处理

myChart.on('legendselectchanged', function(params) {
    var option = myChart.getOption();
    var selected = params.selected;
    var legendName = params.name;

    // 根据图例选择状态更新地图颜色
    option.series[0].itemStyle.normal.areaColor = function(params) {
        // 根据区域名称和图例选择状态返回不同颜色
        if (selected[legendName]) {
            return '#ff0000'; // 选中颜色
        } else {
            return '#e0e0e0'; // 默认颜色
        }
    };

    myChart.setOption(option);
});

方法四：使用geo组件（适用于地理坐标系）

option = {
    geo: {
        map: 'china',
        itemStyle: {
            normal: {
                areaColor: '#e0e0e0',
                borderColor: '#fff'
            },
            emphasis: {
                areaColor: '#ffeb3b'
            }
        },
        regions: [{
            name: '广东',
            itemStyle: {
                normal: {
                    areaColor: '#4caf50'
                }
            }
        }]
    }
};

注意事项

1. 确保引入了正确的ECharts地图数据文件
2. 对于不同版本的ECharts，API可能略有不同（如4.x和5.x）
3. 如果需要更复杂的交互效果，可以结合ECharts的事件系统实现

以上方法可以根据实际需求选择或组合使用，实现地图图例点击时的颜色自定义效果。