echarts map, select the color setting; cancel the default mouse event, click to select the map to change the color, select highlight, select highlight, uncheck (click again to uncheck), take the following map as an example

echarts map, select the color setting; cancel the default mouse event, click to select the map to change the color, select highlight, select highlight, uncheck (click again to uncheck), the following takes some maps of Sichuan as an example
Insert image description here

series: [
          {
    
    
            // left: '0%',
            // top: '0%',
            zoom: 1.2,
            type: "map",
            map: name,
            roam: false, //鼠标平移或者缩放
            silent: silent,
            itemStyle: {
    
    
              normal: {
    
    //未对地图作任何操作时的样式,加载想默认展示的样式
                borderWidth: 2, //边框大小
                borderColor: "#ffffff",
                areaColor: "#2DD4D6", //背景颜色
                label: {
    
    
                  show: true,
                  formatter: function (params) {
    
    
                    return `{pic|${
      
      
                      params.value.toString() == "NaN" ? 0 : params.value
                    }}\n{fline|${
      
      params.name}}`;
                  },
                  position: "top",
                  rich: {
    
    
                    pic: {
    
    
                      backgroundColor: "rgba(25, 31, 37, 0.34)",
                      padding: [2, 5],
                      width: "auto",
                      height: 15,
                      align: "center",
                      color: "#FFFFFF",
                      fontSize: "10px",
                      borderRadius: 5,
                    },
                    fline: {
    
    
                      color: "#FFFFFF",
                      align: "center",
                      fontSize: "12px",
                    },
                  },
                },
              },
              emphasis: {
    
    // 这个是鼠标移上去就会选中的样式,鼠标mouseover
                  borderWidth:1,
                  borderColor:'yellow',
                  areaColor:"#77e8e4",
              }
            },
            //重点下面,与点击事件不同,虽然也是点击选中,但是事件不一样
            selectedMode:"single", //选择模式,单选,只能选中一个地市
            select:{
    
    //这个就是鼠标点击后,地图想要展示的配置
              disabled:false,//可以被选中
              itemStyle:{
    
    //相关配置项很多,可以参考echarts官网
                areaColor:"#77e8e4"//选中
              }
            },
            data: this.map.data,//你的地图数据
          },
        ],

For selection mode, non-click (click), selection events, you can obtain relevant map data, use the event method mapselectchanged of echarts map

var myChart = echarts.init(this.$refs.echart_map);
myChart.setOption(option, true);
myChart.on('mapselectchanged',(e)=>{
    
    
        console.log(e,111111111111);
}); 

Guess you like

Origin blog.csdn.net/qq_40739261/article/details/129668462