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

最新推荐文章于 2026-05-05 11:04:44 发布

原创最新推荐文章于 2026-05-05 11:04:44 发布 · 1w 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了Echarts中地图颜色配置的三种方法，包括点击选中变色、鼠标经过高亮以及区域聚焦淡出效果。通过示例代码详细展示了如何设置`itemStyle`和`emphasis`属性，实现地图区域的颜色变化和高亮显示，帮助读者理解并应用到自己的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"
              }
            },
            }          
        ]
}

效果：