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

news2024/10/5 13:39:14

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.coloradmin.cn/o/1566819.html

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

相关文章

Redis的值有5种数据结构,不同数据结构的使用场景是什么?

文章目录 字符串缓存计数共享Session限速 哈希缓存 列表消息队列文章列表栈队列有限集合 集合标签抽奖社交需求 有序集合排行榜系统 字符串 缓存 (1)使用原生字符类型缓存 优点:简单直观,每个属性都支持更新操作 缺点&#xff1…

大话设计模式之状态模式

状态模式是一种行为设计模式,它允许对象在其内部状态发生变化时改变其行为。在状态模式中,对象将其行为委托给当前状态对象,从而在不同的状态下执行不同的行为,而不必在对象自身的代码中包含大量的条件语句。 通常,状…

WE博客代码系统

WE博客代码系统 说明文档 运行前附加数据库.mdf(或sql生成数据库) 主要技术: 基于asp.net mvc架构和sql server数据库,并采用EF实体模型开发。 三层架构并采用EF实体模型开发 功能模块: WE博客代码系统 WE博客代码系…

使用SpringBoot实现的登录注册后端功能

1、系统演示视频(演示视频) 2、需要交流和学习请联系

java网络编程——网络编程概述及UDP/TCP通信编程的实现

前言: 学习到通信了,整理下相关知识点。打好基础,daydayup!!! 网络编程 网络编程指可以让设备中的程序与网络上其他设备中的程序进行数据交互。 基本的通信架构 基本的通信架构有两种形式:CS架构(Client客户端/Server服…

2024年购买阿里云服务器多少钱?100元-5000元预算

2024年阿里云服务器租用费用,云服务器ECS经济型e实例2核2G、3M固定带宽99元一年,轻量应用服务器2核2G3M带宽轻量服务器一年61元,ECS u1服务器2核4G5M固定带宽199元一年,2核4G4M带宽轻量服务器一年165元12个月,2核4G服务…

KV260 BOOT.BIN更新 ubuntu22.04 netplan修改IP

KV260 2022.2设置 BOOT.BIN升级 KV260开发板需要先更新BOOT.BIN到2022.2版本,命令如下: sudo xmutil bootfw_update -i “BOOT-k26-starter-kit-202305_2022.2.bin” 注意BOOT.BIN应包含全目录。下面是更新到2022.1 FW的示例,非更新到2022.…

数据质量决定大模型能力,景联文科技提供高质量大模型数据

随着大模型的深入发展,各类资源要素的配置状态已悄然变化。其中,数据的价值已被提升到一个新高度。 大模型往往拥有庞大的参数和复杂的网络结构,需要大量的数据来学习和优化。数据的质量和数量直接决定了模型的训练效果。若数据不足或质量不佳…

【Flutter】windows环境配置

windows 11 环境 官方教程 配置了flutter 环境变量在系统的path里 bin 路径。 死活没反应 关闭了git关闭了dart.exe关闭了vs还是不行卸载重新来 新版git flutter doctor 还需要android 环境

WPF动画教程(PointAnimationUsingPath的使用)

PointAnimationUsingPath的介绍 PointAnimationUsingPath 是 WPF 中的一个类,它用于创建一个动画,该动画会沿着指定的路径移动一个点。 关于 PointAnimationUsingPath这些属性比较重要: 属性类型说明PathGeometryPathGeometry这个属性定义了…

【Django学习笔记(四)】JavaScript 语言介绍

JavaScript 语言介绍 前言正文1、JavaScript 小案例2、代码位置2.1 在当前 HTML 文件中2.2 在其他 js 文件中 3、代码注释3.1 HTML的注释3.2 CSS的注释3.3 Javascript的注释 4、变量 & 输出4.1 字符串4.2 数组4.3 对象(python里的字典) 5、条件语句6、函数7、DOM7.1 根据 I…

【动态规划】【背包问题】基础背包

【动态规划】【01背包问题】 解法 二维dp数组01背包解法 一维dp数组(滚动数组)01背包 ---------------🎈🎈题目链接🎈🎈------------------- 解法 二维dp数组01背包 😒: 我的代码实现> …

RedCap轻量化5G提升生产效率,多领域应用

在工业数字化时代,工业智能化已经成为了各行各业的发展趋势。而在这个过程中,5G作为新一代网络通信技术正逐渐成为工业领域的核心力量。而在5G技术的应用中,RedCap轻量化5G工业网关路由器便是低成本畅享5G的最佳选择。 RedCap轻量化5G工业网…

可视化大屏的应用(18):网络安全和信息安全领域

可视化大屏在物联网领域具有以下价值: 实时监控和可视化: 可视化大屏可以将物联网设备和传感器的数据以图表、图形和动画等形式实时展示,帮助用户直观地了解物联网系统的运行状态和数据趋势。通过可视化大屏,用户可以快速发现异…

说说对排序算法的一些理解

对排序 - 冒泡排序的理解 冒泡排序是一种简单的排序算法,其基本思想是通过多次遍历数组,每次比较相邻的两个元素。如果前一个元素大于后一个元素,则交换它们的位置。这样,每一次遍历都会将当前未排序部分的最大元素“冒泡”到数组…

游戏引擎中的物理应用

一、 角色控制器 Character Controller和普通的动态对象(Dynamic Actor )是不同的,主要的三个特点是: 它拥有可控制的刚体间的交互假设它是有无穷的摩擦力(可以站停在位置上),没有弹性加速和刹车几乎立即…

图论(Graph theory)

抽象数据结构类型 Graphic操作接口 操作接口功能描述操作接口功能描述e()获取图的总边数n()顶点的总数exits(v,u)判断v,u两个顶点是否存在边insert(v) 在顶点集 V 中插入新顶点 v remove(v,u)删除从v 到u的 关联边 remove(v) 将顶点 v 从顶点集中删除 type(v,u)边所属的类型(…

蓝桥杯物联网竞赛_STM32L071_15_ADC/脉冲模块

ADC模块用的是RP1不用多说了,主要是脉冲模块,这个模块没考过 这个脉冲模块放出脉冲,主要能用TIM捕获到这个脉冲的高电平持续时间即可 CubMx配置: 脉冲模块的引脚与PB0相连,所以用PB0读取上升沿记的数和下降沿记的数&am…

【第十一届大唐杯全国大学生新一代信息通信技术大赛】赛题分析

赛道一 一等奖 7% 二等奖 15% 三等奖 25% 赛道二 参考文档: 《第十一届大唐杯全国大学生新一代信息通信技术大赛(产教融合5G创新应用设计)专项赛说明.pdf》 一等奖:7% 二等奖:10% 三等奖:20% 赛项一&am…

【SQL】1873. 计算特殊奖金(CASE WHEN;IF())

题目描述 leetcode题目:1873. 计算特殊奖金 Code 写法一: CASE WHEN select employee_id, (case when employee_id % 2 0 or name like M% then salary 0 else salary end) as bonus from Employees order by employee_id写法二 :IF() …