【echarts】echarts实现地图通过数据控制多个板块选中，用户点击不影响选中状态

最近在一个活动中需要实现这种操作，就是通过接口数据控制特定的地图板块选中，然后点击地图板块后展示另一个页面（展示当前地图板块的详细信息），但是这个地图板块的选中状态不会因为用户的点击而改变状态。

参考：

配置项
selectedMode: https://echarts.apache.org/zh/option.html#legend.selectedMode
API
on: https://echarts.apache.org/zh/api.html#echartsInstance.on
dispatchAction: https://echarts.apache.org/zh/api.html#echartsInstance.dispatchAction

代码实现

// 这里我只粘下来了series中的配置
	let myChart = echarts.init(document.getElementById('my_charts'));
	let option = {
		series: [{
		    name: '浙江',
		    type: 'map',
		    map: 'GX', //上面注册省的名字
		    data: data_map,
		    selectedMode: 'multiple', // 设置为多选模式
		    roam: false, //是否开启鼠标缩放和平移漫游。默认不开启
		}]
	}
	myChart.setOption(option);
	myChart.on('click', function (params) {
		// 用户点击时通过data_map数据项中的selected标识判断是不是选中了
	        if (params.data.selected) {
	        	// 通过数据控制是否选中
	             myChart.dispatchAction({
	                 type: 'select',
	                 seriesIndex: 0,
	                 name: params.data.name
	             })
	         } else {
	         	// 亦或者不选中
	             myChart.dispatchAction({
	                 type: 'unselect',
	                 seriesIndex: 0,
	                 name: params.data.name
	             })
	         }
	         // 这时候用户点击后就不会改变对应的选中状态了
	         // 在下面控制显示地图相关的详细信息
	     })

中间还用到了地图板块颜色渐变,配置如下：

	itemStyle: {
       normal: { //地图边框
            label: { show: true },
            areaColor: '#fceeed',
            borderColor: '#ec7d7b',
            borderWidth: 1.3,
        },
        emphasis: { // 地图区域
            label: { show: true },
            // areaColor: '#ed4040',
            areaColor: new echarts.graphic.LinearGradient(
                0, 1, 0, 0, 
                // 4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 
                // 0 0 0 1则代表渐变色从正上方开始
                [
                    { offset: 1, color: '#ff7e4c' },
                    { offset: 0.5, color: '#fea173' },
                    { offset: 0, color: '#ff7e4c' }
                ]
            )
        },
    },