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

2023年1月2日 586次阅读 来源: skyseey

废话不多说直接直接起飞

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

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

效果：

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

 

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"
              }
            },
            }          
        ]
}

效果：

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

 

    原文作者：skyseey
    原文地址: https://blog.csdn.net/sky8880/article/details/122322988
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞