echarts 地图选中某个省份颜色高亮，点击空白处之后取消高亮？

Question

echarts 地图
单击某个省份之后高亮，点击空白处之后取消高亮，应该怎么做，大佬们

echarts 配置项如下：

 {
        tooltip: {
          padding: 0,
          borderColor: '#ccc',
          // 数据格式化
          formatter: function (params, callback) {
            return '<div style="height: 30px;line-height: 30px;min-width:120px; padding: 0 5px;border-bottom:1px solid #ccc">' + params.data.name + '</div>' +
            '<div>' + '<i style="display:inline-block;border-radius:50%;width:10px;height:10px;left:5px;background-color: #ccc;margin:0 5px"></i>' + '项目数' + ' : ' + params.data.value + '</div>' +
            '<div>' + '<i style="display:inline-block;border-radius:50%;width:10px;height:10px;left:5px;background-color: #ccc;margin:0 5px"></i>' + '设备数' + ' : ' + params.data.deviceCount + '</div>'
          }
        },
        visualMap: {
          min: 0,
          left: 'left',
          top: 'bottom',
          text: ['高', '低'], // 取值范围的文字
          inRange: {
            color: ['#f7f7f7', '#4a78f2'] // 取值范围的颜色
          },
          show: false // 图注
        },
        series: [
          {
            name: '省份数据',
            type: 'map',
            selectedMode: true,
            geoIndex: 0, // 不可缺少，否则无tooltip 指示效果
            map: name,
            roam: false, // 不开启缩放和平移
            data: value,
            itemStyle: {
              normal: {
                borderColor: '#eee',
                borderWidth: 2,
                label: {
                  show: true,
                  formatter: function (params) {
                    if (params.data.value === 0) {
                      return ''
                    } else {
                      return params.data.value
                    }
                  },
                  color: '#fff'
                }
              },
              emphasis: {
                label: {
                  show: true,
                  formatter: function (params) {
                    if (params.data.value === 0) {
                      return null
                    } else {
                      return params.data.value
                    }
                  },
                  color: '#fff'
                },
                areaColor: 'none', // 鼠标选择区域颜色
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 3,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            emphasis: {
              label: {
                show: false
              }
            },
            select: {
              itemStyle: {
                areaColor: 'red'
              }
            },
            left: '5%',
            right: '5%',
            top: '2%',
            bottom: '5%'
          }
        ]
      }

Answer 1

这个可以通过调用 echarts 实例的 dispatchAction 派发取消选中指令来实现，详见官方文档https://echarts.apache.org/zh...

echartInstance.dispatchAction({
  // 如果绑定了 geo 图层（指定了geoIndex），则是 geoUnSelect 事件
  type: 'unselect', 
  // 指定 series 的索引
  seriesIndex: 0,
  // 指定要取消选中数据的索引, 如果要取消全部选中，则把所有数据的下标数组作为 dataIndex 即可
  dataIndex: [0] // 0 代表取消选中 data 中第1项的选中，依此类推
})

简单说下点击空白处取消选中的实现思路

1. 绑定一个全局的点击事件
2. 通过 e.target 判断事件源是否是 canvas，是 canvas 则直接返回
3. 调用 dispatchAction 触发取消选中