Echarts map 点击地图某个区域上色

Echarts 官方文档引用地址:echarts.apache.org/zh/option.h...

当设定了 geoIndex 后,series-map.map 属性,以及 series-map.itemStyle 等样式配置不再起作用,而是采用 geo 中的相应属性。(论熟读官方文档的重要性)

在Echarts---map---option---geo的配置选项中有一个select配置项,这个select专门配置地图选中之后的itemStyle样式以及label样式,下面放一部分我改动成功的代码供大家参考一下。

js 复制代码
var option = {
          backgroundColor: "transparent",
          graphic: [],
          geo: {
            map: opt.mapName,
            roam: false, // 是否允许缩放
            zoom: 1.1,
            label: {
              normal: {},
              emphasis: {},
            },
            itemStyle: {
              normal: { // 默认地图区域样式
                areaColor: '#ddd',
                borderColor: "#4ECEE6",
                borderWidth: 1,
                shadowColor: "#2C99F6",
                shadowOffsetY: 0,
                shadowBlur: 25,
              },
              emphasis: { // 鼠标悬浮地图区域样式
                show: true,
                areaColor: "#0075FF",
              },
            },
            select: { // 地图选中区域样式
              label:{ // 选中区域的label(文字)样式
                color: '#fff'
              },
              itemStyle: {// 选中区域的默认样式
                areaColor: '#0075FF'
              },
            },
            layoutCenter: ["45%", "51%"], // 距离左右,上下距离的百分比
            layoutSize: "90%", // map百分比大小
          },
          series: [],
        };

如果想要添加更详细的样式设置,可以取看一下Echarts的官方文档 Ecahrts-geo

原文链接:blog.csdn.net/Programming...

相关推荐
猫3284 分钟前
echarts 日常问题解决
前端·javascript·echarts
新中地GIS开发老师7 分钟前
地信职业百科④:GIS开发工程师
前端·数据库·gis·webgis·三维gis开发
我是大卫16 分钟前
【图】React源码解析-从数据结构、调度器、源码设计模式到状态计算引擎,深挖useReducer原理
前端·react.js·源码
willes23 分钟前
列表中的倒计时组件
前端
LVZ24 分钟前
用了半年 AI 写代码,最烦的不是代码,是环境
前端·后端·开源
polaris_tl25 分钟前
一行 `compress: false`,为什么让 SSE 首包恢复实时返回
前端
海边的云27 分钟前
别再让 AI 瞎改代码:一套让大模型「收敛」的前端专家 Skill》
前端
kisshyshy27 分钟前
给端侧大模型装上“发动机”:React 合成事件 + 进度条组件全解
前端·react.js·node.js
hunterandroid39 分钟前
DataStore 工程化实践:迁移、并发更新与异常恢复
android·前端
晓说前端39 分钟前
TypeScript 核心语法进阶 —— 字面量类型与类型推论
前端·typescript