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.mzph.cn/news/803475.shtml

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

相关文章

【H3C】开启web管理页面H3C S5120V2 Series

配置步骤 1.创建对应vlan并放行通过 2.添加vlanfi的ip地址 3.开启http和https的服务 4.创建用户,配置密码,配置服务类型,赋予权限 假设终端连接在交换机的g1/0/1口 假设终端的ip地址为(Ubuntu):192.168.200.11 /24 假设交换机vlan…

【Java 刷题记录】双指针

双指针 1. 移动零 283. 移动零 - 力扣(LeetCode) 给定一个数组 nums,编写一个函数将所有 0 移动到数组的末尾,同时保持非零元素的相对顺序。 请注意 ,必须在不复制数组的情况下原地对数组进行操作。 示例 1: 输入: n…

关于Ansible模块 ④

转载说明:如果您喜欢这篇文章并打算转载它,请私信作者取得授权。感谢您喜爱本文,请文明转载,谢谢。 继《关于Ansible的模块 ①》、《关于Ansible的模块 ②》与《关于Ansible的模块 ③》之后,继续学习ansible常用模块之…

P3654 First Step (ファーストステップ) Python深搜

First Step (ファーストステップ) 题目背景 知らないことばかりなにもかもが(どうしたらいいの?) 一切的一切 尽是充满了未知数(该如何是好) それでも期待で足が軽いよ(ジャンプだ!&#xff09…

已解决:windows 下无法加载文件 xxx.ps1,因为在此系统上禁止运行脚本

目录 1,问题描述2,问题解决 1,问题描述 当通过 npm 全局安装依赖后(比如 ts 对应的 tsc 命令,还有 pnpm),想直接使用安装的命令,就会报错: 2,问题解决 以管…

12+炫酷地图可视化效果,这次还真的有源码。

2023-09-17 22:35贝格前端工场 Hi,大家好,我是贝格前端工场,之前分享过各类UI图、动图、3D图、流程图,好多粉丝朋友给我要源文件,因为种种原因,无法提供。 本次分享12个炫酷的地图可视化效果,…

实现几何对象按照一定距离向外缓冲

1、首先&#xff0c;确保你已经引入了Turf.js库。你可以通过在HTML文件中添加以下代码来引入 <script src"https://cdn.jsdelivr.net/npm/turf/turf6.5.0/turf.min.js"></script>2、使用turf.buffer实现几何对象按照设定距离扩充 let originalCoordinat…

LeetCode 使数组连续的最少操作数

地址&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 难度&#xff1a;困难 题目描述&#xff1a;给你一个整数数组 nums 。每一次操作中&#xff0c;你可以将 nums 中 任意 一个元素替换成 **任意 **整数。 如果 nums 满足以下条件&#xff0c;那么它是 连续的 &#x…

Shopee虾皮100%有效提高广告效果的案例分享

Shopee 店铺运营中存在三种广告类型&#xff0c;分别是:关键词广告、关联广告和店铺广告。其中使用最为普遍&#xff0c;主控权最为直接的就是关键词广告&#xff0c;TA的适用范围最广&#xff0c;起效最快&#xff0c;并且可根据自身运营的能力去调控投入产出比&#xff0c;深…

SVM向量支持机

1.通俗理解 svm&#xff1a;support vector machine目标&#xff1a;利用超平面将两类数据分割开来&#xff0c;这个超平面就是我们要设计的对象 如何设计&#xff1f;我们设计之后会有间隔&#xff0c;间隔越大分类效果就越好&#xff1b;距离决策边界最近的点我们成为支持向…

个人求职简历(精选8篇)

HR浏览一份简历也就25秒左右&#xff0c;如果你连「好简历」都没有&#xff0c;怎么能找到好工作呢&#xff1f; 如果你不懂得如何在简历上展示自己&#xff0c;或者觉得怎么改简历都不出彩&#xff0c;那请你一定仔细读完。 互联网运营个人简历范文> 男 22 本科 AI简历…

【已完成】把Win10右键改回Win7的模样

win11右键设置成原来模样的方法如下&#xff1a; 1、winr打开运行窗口&#xff0c;输入regedit&#xff0c;按下回车键确认即可打开注册表。 2、在路径中输入&#xff1a;HKEY_CURRENT_USER\SOFTWARE\CLASSES\CLSID&#xff0c;或者是依次定位点开到CLSID。 3、右键点击CLSID&…

python--面向对象的三大特征---封装、继承、多态

1.封装&#xff1a; 1&#xff0c;在面向对象中&#xff0c;封装指的是一种安全机制&#xff0c;不让外界修改或者直接操作&#xff0c;将属性私有化&#xff1b; 如果要访问属性&#xff0c;提供公开的方法&#xff08;getter&#xff0c;setter&#xff09; 2. python的类如…

面试算法-166-排序链表

题目 给你链表的头结点 head &#xff0c;请将其按 升序 排列并返回 排序后的链表 。 示例 1&#xff1a; 输入&#xff1a;head [4,2,1,3] 输出&#xff1a;[1,2,3,4] 解 class Solution {public ListNode sortList(ListNode head) {if (head null || head.next null…

【stm32】I2C通信协议

【stm32】I2C通信协议 概念及原理 如果我们想要读写寄存器来控制硬件电路&#xff0c;就至少需要定义两个字节数据 一个字节是我们要读写哪个寄存器&#xff0c;也就是指定寄存器的地址 另一个字节就是这个地址下存储寄存器的内容 写入内容就是控制电路&#xff0c;读出内容就…

R-Tree的简单介绍

一、R-Tree简介 R-Tree&#xff0c;全称是“Real Tree”&#xff0c;是一种专门为处理多维空间数据&#xff08;尤其是二维空间数据&#xff0c;如地理坐标&#xff09;设计的树形数据结构。 简单来说&#xff0c;它就像是一个特殊的目录&#xff0c;将空间数据按照它们的位置…

NIKKE胜利女神PC怎么设置中文 手把手教你设置中文教程

这个游戏中的妮姬分四个企业&#xff0c;其中朝圣者这个派别的妮姬很少而且不在愿望单理&#xff0c;朝圣者的所有姐姐都很哇塞&#xff0c;红莲更是其中的大姐大。一般想抽朝圣者只能靠歪或者出限定卡池&#xff0c;举个栗子&#xff0c;我入坑的时候 朝圣者 神罚 是限定卡池&…

计算系数(acwing,数论)

题目描述&#xff1a; 给定一个多项式 (axby)^k&#xff0c;请求出多项式展开后 x^n*y^m 项的系数。 输入格式&#xff1a; 共一行&#xff0c;包含 5 个整数&#xff0c;分别为 a&#xff0c;b&#xff0c;k&#xff0c;n&#xff0c;m&#xff0c;每两个整数之间用一个空格…

【STL】stack与queue的底层原理及其实现

文章目录 stack的介绍库中stack的使用栈的模拟实现queue的介绍库中queue的使用queue的模拟实现 stack的介绍 &#xff08;图片来自知乎&#xff09; 1.stack是一种容器适配器&#xff0c;模拟了栈的数据结构。数据只能从一端进去&#xff0c;另一端出来&#xff08;先进后出&am…

基于单片机水质检测仪系统仿真设计

**单片机设计介绍&#xff0c; 基于单片机水质检测仪系统仿真设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机水质检测仪系统仿真设计的主要目标是&#xff0c;通过仿真手段验证基于单片机的水质检测仪系统的设计方…