当前位置: 首页 > news >正文

vue3+echarts:echarts地图打点显示的样式

colorStops是打点的颜色和呼吸灯、label为show是打点是否显示数据、rich里cnNum是自定义的过滤模板用来改写显示数据的样式

series: [{type: "effectScatter",coordinateSystem: "geo",rippleEffect: {brushType: "stroke",},showEffectOn: "render",itemStyle: {color: {type: "radial",x: 0.5,y: 0.5,r: 0.5,colorStops: [{offset: 0,color: 'rgba(14,245,209,0.2)' //打点颜色},{offset: 0.8,color: 'rgba(14,245,209,0.2)'},{offset: 1,color: 'rgba(14,245,209,1)'},],global: false, // 缺省为 false},},label: {show: true,// 打点显示数据color: "#fff",fontWeight: "bold",position: "inside",formatter: function (para) {      return "{cnNum|" + para.data.name + "}"; //打点的显示以及样式定义为cnNum},rich: {cnNum: {fontSize: 10.5,//文字大小fontWeight: 'bold',//文字加粗color: "#ABF8FF",},},},symbol: "circle",//气泡大小symbolSize: function (val) {if (val[2] === 0) {return 0;}let a = (maxSize4Pin - minSize4Pin) / (max - min);let b = maxSize4Pin - a * max;return a * val[2] + b * 1.2;},data: convertData(data),zlevel: 1,},      ]const maxSize4Pin = 100,minSize4Pin = 20;

上一篇文章,

vue3+elementPlus:实现数字滚动效果(用于大屏可视化)-CSDN博客文章浏览阅读46次。vue3+elementPlus:实现数字滚动效果。自行封装注册一个公共组件,或拉取vue-count-to插件源码,因为这个插件在vue3里不能用https://blog.csdn.net/weixin_43928112/article/details/137358802?spm=1001.2014.3001.5501

http://www.lryc.cn/news/331178.html

相关文章:

  • vue3从精通到入门7:ref系列
  • 灵动翻译音频文件字幕提取及翻译;剪映视频添加字幕
  • 在Gitee上创建新仓库
  • linux 配置NFS
  • 大疆御Pro(一代)更换晓spark摄像头评测
  • 【小技巧】gitlab怎么在每次git push的时候不用输入账号密码?使用 SSH 密钥 的原理是什么?
  • 笔记: JavaSE day15 笔记
  • 【Golang星辰图】数据处理的航海家:征服数据海洋的航行工具
  • 容器网络测试关键问题
  • 6、Cocos Creator 2D 渲染组件:​Sprite 组件​
  • 算法沉淀——动态规划篇(子数组系列问题(上))
  • 通知中心架构:打造高效沟通平台,提升信息传递效率
  • 【Arduino使用SNR9816TTS模块教程】
  • 牛客练习赛123(A,B,C,D)
  • docker部署-RabbitMq
  • 【智能算法】蜜獾算法(HBA)原理及实现
  • 9、鸿蒙学习-开发及引用静态共享包(API 9)
  • [Pytorch]:PyTorch中张量乘法大全
  • 【软考】防火墙技术
  • OpenHarmony实战:Makefile方式组织编译的库移植
  • 嵌入式C语言--GPT通用定时器
  • 『Apisix系列』破局传统架构:探索新一代微服务体系下的API管理新范式与最佳实践
  • 如何在极狐GitLab 自定义 Pages 域名、SSL/TLS 证书
  • React Native 应用打包
  • 单链表就地逆置
  • MTU/TCPMSS/VLAN/ACCESS/TRUNK/HYBRID
  • Spring Boot的基础知识和应用
  • 【Linux】详解动静态库的制作和使用动静态库在系统中的配置步骤
  • 开源模型应用落地-qwen1.5-7b-chat-LoRA微调(二)
  • 【现代企业管理】企业组织结构和组织文化的理论与实践——以华为为例