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

news/2024/10/3 0:25:37

需求是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.ryyt.cn/news/58434.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

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 潜在空间中的协作嵌入或通过外部模…