Echarts 地图点击板块高亮，再次点击还是高亮，在地图外点击返回，则不高亮。

**ECharts 地图点击事件处理**

在使用 ECharts 的地图功能时，经常需要实现点击板块高亮的效果。这个需求可以通过设置地图的 `click`事件来实现。在本文中，我们将一步步地讲解如何实现点击板块高亮，再次点击还是高亮，在地图外点击返回，则不高亮。

### 一、准备工作首先，我们需要在 HTML 文件中引入 ECharts 的 JavaScript 和 CSS 文件：

html<script src=" /><link rel="stylesheet" href=" />

javascript// 创建地图实例var myChart = echarts.init(document.getElementById('map'));

// 设置地图配置项option = {
 // ...
};
myChart.setOption(option);

javascript// 设置点击事件myChart.on('click', function(params) {
 // 在这里处理点击事件});

javascript// 设置点击事件myChart.on('click', function(params) {
 // 获取点击的坐标 var geoCoord = params.name;
 // 更新地图配置项 myChart.setOption({
 series: [{
 name: '高亮区域',
 type: 'map',
 mapType: 'china',
 itemStyle: {
 normal: {
 color: '#FF0000'
 }
 },
 data: [geoCoord]
 }]
 });
});

javascript// 设置点击事件var isHighLight = false;
myChart.on('click', function(params) {
 // 获取点击的坐标 var geoCoord = params.name;
 // 如果已经高亮过，则不再高亮 if (isHighLight && geoCoord === '高亮区域') return;
 // 更新变量 isHighLight = true;
 // 更新地图配置项 myChart.setOption({
 series: [{
 name: '高亮区域',
 type: 'map',
 mapType: 'china',
 itemStyle: {
 normal: {
 color: '#FF0000'
 }
 },
 data: [geoCoord]
 }]
 });
});

javascript// 设置点击事件myChart.on('click', function(params) {
 // 获取点击的坐标 var geoCoord = params.name;
 // 如果点击的是地图外，则清除高亮效果 if (geoCoord === '') {
 myChart.setOption({
 series: [{
 name: '高亮区域',
 type: 'map',
 mapType: 'china'
 }]
 });
 } else {
 // ...
 }
});