echart map图标切换多选,单选,默认选中

news/2024/9/20 9:08:42/文章来源:https://www.cnblogs.com/hpx2020/p/18405143

需求是echart默认地图选中之前的去过的城市,一开始多选,后面点击为单选

const option = {tooltip: {trigger: 'item',formatter: '{b}'},series: [{type: 'map',roam : true,//是否开启缩放和平移zoom : 1,//当前视角缩放比例selectedMode: 'multiple', // 只允许单选// 设置为一张完整经纬度的世界地图left: 0,top: 0,right: 0,// botto: 0,itemStyle : {//地图区域的多边形 图形样式hoverAnimation : true,normal : {opacity : .6,borderWidth: 1,areaColor: '#4C525D', //默认的地图板块颜色borderColor: 'rgba(255,255,255,0.2)',//地图边框颜色
        },// 点击选中的颜色
        emphasis : {areaColor: '#6D717A', //默认的地图板块颜色borderColor: 'rgba(255,255,255,0.6)',//地图边框颜色opacity : 1,label: {show : false,fontSize : 0}},},// 默认选中的颜色select: {itemStyle: {areaColor: '#6D717A', //默认的地图板块颜色borderColor: 'rgba(255,255,255,0.6)',//地图边框颜色opacity : 1,},label: false},mapType: 'world',animation: false,data : [{name: '广东省',selected: true, // 设置广东默认高亮
        },{name: '四川省',selected: true, // 设置北京默认高亮
        }],}],};

myChart.setOption(option);
 
// 添加点击事件处理函数
myChart.on('click', function (params) {
// 动态切换数据为单选
myChart.setOption({
series: [{
selectedMode: 'single',
}]
});

// 切换到单选点击的
myChart.dispatchAction({
type: 'select',
// 图例名称
name: params.name
})
});
 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/794630.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CH58x/CH59x/CH57x RF_PHY(2.4g)切换Channel发送接收

前言:在做某些应用的时候可能需要我们发送或者接收时切换对应的channel。 此次完成测试的平台在WCH的CH592F上完成的。 在工作发送过程中切换37、38、39三个信道进行轮询发送。具体需要使用最关键的函数是:RF_SetChannel 实现代码如下:if(events & channl_37_tx_evt){RF…

ArmSoM-Sige5 的 RK3576 SoC 主线内核支持进展

我们很高兴地宣布,基于 RK3576 SoC 的 ArmSoM-Sige5 开发板的主线内核支持,collabora正在稳步推进中。RK3576 SoC 是 Rockchip 家族的一员,其设计和功能与广受欢迎的 RK3588 相似,许多硬件模块都得到了复用,这为我们在主线内核中添加支持提供了有利条件。 RK3576主线内核…

P3579

今天有点高效啊,切数论题都这样喵? #include<bits/stdc++.h> using namespace std; int main() {int n,a,b,c,d,s,m;cin>>n;while(n--){cin>>a>>b>>c>>d; m=min(b,d);for(int i=1;i<=m;i++){i=min(b/(b/i),d/(d/i));//优化,只考虑b/…

机器学习作业

Ch3-K均值聚类算法 【9月4日】 学号:102102156 姓名:高涛 1. make_circles方法生成数据 1.1 源代码 from sklearn.cluster import KMeans from sklearn.datasets import make_circles, make_moons, make_blobs import matplotlib.pyplo…

volta 管理多个node版本时,Volta error: Could not download node

设置代理 在终端中执行以下命令,替换为你自己的代理地址: bash $env:HTTP_PROXY="你的代理地址" $env:HTTPS_PROXY="你的代理地址" 然后重启终端: Windows 用户需要以管理员身份重新打开终端。 Mac 用户只需重启终端即可。 这样可以确保你在终端中通过代…

el-upload点击问题

问题描述: 今天在写vue项目时,用到了element plus中的el-upload组件,发现这么一个问题: 组件各个功能都是正常的,也可以上传图片,但是 虚线框里那么大一片区域只有中间那个十字是可以点击的点击查看代码 <el-uploadclass="ImageUpload":action="http:/…

P2424

1.逃课做法 第一眼看到: 感觉有点像内啥分解只因数 然后就不会了那我写这个干什么 这时,聪明的我们就想到了打表 怎么打呢? 如图:我们可以把它分成几个块,提前打好每个块的答案 这样,我们就用普及的算法过了提高的题 2.正解 氧化钙(CaO)的怎么和上题一样 #include<c…

BinLLM论文阅读笔记

Text-like Encoding of Collaborative Information in Large Language Models for Recommendation论文阅读笔记 Abstract 现存的问题: ​ 在调整用于推荐的大型语言模型(LLMRec)时,整合协作信息至关重要。现有的方法通过从头开始学习 LLM 潜在空间中的协作嵌入或通过外部模…

线上问题排查-定时任务状态未复位

项目业务 用户授权登录后,负责把本 app 的运动同步到第三方,分别对接了 A、B、C、D 等第三方,各个平台的推送方式不太一样,有一些是主动查询,有一些是主动推送 场景 周五线上 Redis 报了内存不足,代码排查后发现用户数据占用了很大一部分,并且只存储不查询也不设置过期事…

java基础 -线程(基础)的 笔记

581,多线程机制 因为需要敌人的坦克可以自由移动并发射子弹,我们的坦克可以移动并发射子弹,这些要用到线程的知识。根据JConsole监控线程执行情况,发现,主线程执行完了,子线程还没有执行完,并不能表示当前进程死亡了,只有当所有的子线程执行完了,主进程才会结束。真正…

Leangoo领歌:一站式敏捷缺陷管理平台,助力产品迭代

在敏捷开发环境下,缺陷管理的效率直接影响到项目的质量和交付周期。对于追求高效、透明和灵活的敏捷团队来说,Leangoo领歌无疑是一个不可或缺的工具。​在开发过程中,缺陷(BUG)管理一直是项目管理中的一个关键环节。及时发现并修复BUG,不仅能够提高产品质量,还能有效提升…