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...

相关推荐
子兮曰2 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰2 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
前端小万2 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝2 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
三十而立洋2 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
卡布鲁2 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
汉堡大王95272 天前
Jev:不是聊天机器人, 而是一个智能 if 语句
前端·人工智能·后端
梦想很大很大2 天前
从运行事实到回归证据:Workrun 的 Telemetry 与 Evaluation 实践
前端·人工智能·后端
计算机魔术师2 天前
Meta Muse agent 接入 Shopify 的 Shop Pay 实现代理式购物
前端
沙蒿同学2 天前
我用 Go 搭了一条 AI Agent 流水线:从 1 张商品图到一整套淘宝详情页
前端·javascript·后端