echarts地图点击后变色

ECharts是一款常用的JavaScript数据可视化库，它提供了一种方便的方式来创建交互式图表，包括地图。在ECharts的地图组件中，你可以通过设置`click`事件处理函数来实现在地图上点击时的颜色变化。

首先，你需要有一个地图实例，并配置好数据。然后，在配置项中添加`series`部分，针对地图系列，设置`emphasis`状态下的颜色，这个状态会在鼠标悬停或点击时应用：

// 示例配置
var option = {
    series: [{
        type: 'map', // 地图类型
        mapType: 'your_map_type', // 替换为你的地图类型，如'map_china'
        roam: true, // 是否开启缩放平移
        data: your_data, // 地图的数据
        emphasis: { // 鼠标点击时的样式
            itemStyle: {
                color: 'new_color' // 可以设置成新的颜色值，例如 '#ff0000' 或者 'red'
            }
        },
        onClick: function(params) { // 点击事件处理器
            var target = params.name; // 获取点击的区域名称
            console.log('点击了', target);
            this.setOption({
                emphasis: { // 更新高亮颜色
                    itemStyle: { color: 'your_new_highlighted_color' }
                }
            });
        }
    }]
};

// 初始化并渲染ECharts实例
echarts.init(document.getElementById('main')).setOption(option);

在这个例子中，当你点击地图上的某个区域时，该区域会变色，并打印出被点击区域的信息。你可以根据需要调整颜色和事件处理逻辑。