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

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

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

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

效果:

笔记:Echarts地图 被选中更改颜色一系列配置_第1张图片

 

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地图 被选中更改颜色一系列配置_第2张图片

 

你可能感兴趣的:(echarts,前端,javascript)