笔记：Echarts地图 被选中更改颜色一系列配置

✈ 废话不多说直接直接起飞

1.点击选中变颜色配置字段：

let option = {
    geo: [
            // 👇👇👇👇👇👇👇👇👇👇👇
            select: {
              itemStyle: {
                areaColor: "yellow",
                borderColor: "#f18355",
                borderWidth: "3"
              }
            }
            // 👆👆👆👆👆👆👆👆👆👆👆
          }
        ],
}

效果：

 

2.换过变颜色配置字段：

let option = {
    geo: [
          {
            // 👇👇👇👇👇👇👇👇👇👇👇
            //鼠标经过高亮显示
            emphasis: {
              itemStyle: {
                opacity: 1,
                borderColor: "#f18355",
                borderWidth: "3",
                areaColor: "yellow"
              }
            }
            // 👆👆👆👆👆👆👆👆👆👆👆
          }
        ],
}

注意：配置有多种方式 上面上面这种是最简单的地图自带的配置比较简单

3.推荐一种效果还不错 ：

let option = {
    geo: [
            {

            emphasis: {
// 👇👇👇👇👇👇👇👇👇👇👇
              focus: "self", //突出选中的区域 其它区域谈化效果
// 👆👆👆👆👆👆👆👆👆👆👆
              itemStyle: {
                opacity: 1,
                borderColor: "#f18355",
                borderWidth: "3",
                areaColor: "yellow"
              }
            },
            }          
        ]
}

效果：