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

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

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

相关文章

外链工具源码版V2

请将zip文件全部解压缩即可访问! 源码全部开源,支持上传二级目录访问 #已更新增加大量高质量外链(若需要增加修改其他外链请打开txt文件) #修复优化页面端 源码下载地址:外链工具源码版V2

记录一次官网访问很慢的情况

客户查看云监控,带宽未超限,客户取的是1分钟的原生值,也就是1分钟也是个平均值。 但是客户的原始值,其实就是1分钟内的平均值。所以客户的瞬时超限,其实是看不出来的。但是后端同事从实时监控里面可以看到超限的情况。 客户升带宽后, 发现还…

二维动画制作软件 Animate 2024 for mac激活版

Animate 2024 for Mac是一款功能强大的二维动画制作软件,专为Mac用户打造。它提供了丰富的动画编辑功能,使用户能够轻松创建出生动逼真的动画作品。无论是短片、广告还是游戏等应用领域,Animate 2024都能发挥出出色的表现。 软件下载&#xf…

Vue和FastAPI实现前后端分离

前言 近期接触了一些开源大模型应用服务,发现很多用的都是FastAPI web框架,于是乎研究了一下它的优势,印象最深有两个:一个是它的异步处理性能比较好,二是它可以类似java swagger的API交互文档,这个对应前…

微服务连接不上rabbitmq解决

1.把端口port: 15672改成port:5672 2:virtual-host: my_vhost一定对应上

VSCode安装及Python、Jupyter插件安装使用

VSCode 介绍 Visual Studio Code(简称VSCode)是一个由微软开发的免费、开源的代码编辑器。VSCode是一个轻量级但是非常强大的代码编辑器,它支持多种编程语言(如C,C#,Java,Python,PHP&#xff0…

云存储中常用的相同子策略的高效、安全的基于属性的访问控制的论文阅读

参考文献为2022年发表的Efficient and Secure Attribute-Based Access Control With Identical Sub-Policies Frequently Used in Cloud Storage 动机 ABE是实现在云存储中一种很好的访问控制手段,但是其本身的计算开销导致在实际场景中应用收到限制。本论文研究了…

Raven:一款功能强大的CICD安全分析工具

关于Raven Raven是一款功能强大的CI/CD安全分析工具,该工具旨在帮助广大研究人员对GitHub Actions CI工作流执行大规模安全扫描,并将发现的数据解析并存储到Neo4j数据库中。 Raven,全称为Risk Analysis and Vulnerability Enumeration for C…

4大企业实例解析:为何MongoDB Atlas成为AI服务构建的首选

随着人工智能和生成式AI技术的迅猛发展,众多企业和机构正积极利用自然语言处理(NLP)、大型语言模型(LLM)等前沿技术,打造出一系列AI驱动的产品、服务和应用程序。 本文将展示四家已在AI创新领域取得显著成…

鸿蒙实战开发:【实现应用悬浮窗】

如果你要做的是系统级别的悬浮窗&#xff0c;就需要判断是否具备悬浮窗权限。然而这又不是一个标准的动态权限&#xff0c;你需要兼容各种奇葩机型的悬浮窗权限判断。 fun checkPermission(context: Context): Boolean if (Build.VERSION.SDK_INT < Build.VERSION_CODES.M)…

IDEA 解决 java: 找不到符号 符号: 类 __ (使用了lombok的注解)

原因IDEA版本太高&#xff0c;在 ProcessingEnvironement 预编译的时候是以代理的方式来执行的&#xff0c;不再是直接 javac方式, lombok依赖的 javac方式的 annotation processors 不再生效了 解决办法&#xff1a;下面这一句&#xff0c;加在下图中 -Djps.track.ap.depen…

权限提升-Linux系统权限提升篇VulnhubRbash绕过DockerLXD容器History泄漏shell交互

知识点 1、普通用户到Linux-泄漏-History 2、普通用户到Linux-限制-Rbash绕过 3、普通用户到Linux-容器-LXD&Docker 4.Linux系统提权-web/普通用户-docker逃逸&提权&shell交互 章节点&#xff1a; 1、Web权限提升及转移 2、系统权限提升及转移 3、宿主权限提升及…

[计算机效率] 格式转换工具:格式工厂

3.14 格式转换工具&#xff1a;格式工厂 格式工厂是一款功能强大的多媒体格式转换软件&#xff0c;可以实现音频、视频、图片等多种格式的转换。它支持几乎所有类型的多媒体格式&#xff0c;包括视频、音频、图片、字幕等&#xff0c;可以轻松实现格式之间的转换&#xff0c;并…

java Web 健身管理系统idea开发mysql数据库LayUI框架java编程计算机网页源码maven项目

一、源码特点 java Web健身管理系统是一套完善的信息管理系统&#xff0c;结合java 开发技术和bootstrap完成本系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 前段主要技术 layUI bootst…

【前端面试3+1】10 npm run dev 发生了什么、vue的自定义指令如何实现、js的数据类型有哪些及其不同、【最长公共前缀】

一、npm run dev发生了什么 运行npm run dev时&#xff0c;通常是在一个基于Node.js的项目中&#xff0c;用来启动开发服务器或者执行一些开发环境相关的任务。下面是一般情况下npm run dev会执行的步骤&#xff1a; 1. 查找package.json中的scripts字段&#xff1a; npm会在项…

SQL server 查询数据库中所有的表名及行数

SQL server 查询数据库中所有的表名及行数 select a.name,b.rows from sysobjects as ainner join sysindexes as bon a.id b.id where (a.type u)and (b.indid in (0, 1)) and b.rows<50 and b.rows>20 order by a.name, b.rows desc;

elementui 左侧或水平导航菜单栏与main区域联动

系列文章目录 一、elementui 导航菜单栏和Breadcrumb 面包屑关联 二、elementui 左侧导航菜单栏与main区域联动 三、elementui 中设置图片的高度并支持PC和手机自适应 四、elementui 实现一个固定位置的Pagination&#xff08;分页&#xff09;组件 文章目录 系列文章目录…

glm2大语言模型服务环境搭建

一、模型介绍 ChatGLM2-6B 是开源中英双语对话模型 ChatGLM-6B 的第二代版本&#xff0c;在保留了初代模型对话流畅、部署门槛较低等众多优秀特性的基础之上&#xff0c;ChatGLM2-6B 引入了如下新特性&#xff1a; 更强大的性能&#xff1a;基于 ChatGLM 初代模型的开发经验&…

当Pycharm中右键运行python程序时出现Run ‘pytest in tests ***py‘,如何解决?

1、在Pycharm中右键运行python程序时出现Run pytest in tests ***py &#xff0c;这是进入了Pytest模式。 2、解决办法 进入到File->Settings->Tools->Python integrated Tools页面或者快捷键&#xff08;CtrlAltS&#xff09; 找到Testing下的Default test runner …

用QT调用FFMPEG的接口

1、调用FFmpeg接口 打开Qt&#xff0c;新建工程&#xff1b; 在工程的pro文件中&#xff0c;添加如下字段&#xff1b; TEMPLATE app CONFIG console CONFIG - app_bundle CONFIG - qtSOURCES \main.c INCLUDEPATH /home/wxw/ffmpeg_build/includeLIBS /home/wxw/ffmpe…