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

Echarts 水波图实现

开发的项目中需要实现这样一个水波图,例如下图

在echarts官网中找了很久没找到,后面是在Echarts社区中找到的,实现了大部分的样式,但是还有一些数据的展示没有实现。水波图的数值展示是默认整数百分比,我的需求是需要保留两位小数。

先展示一下在社区中找到的水波图代码如下:

option = {backgroundColor: "#0e2147",title: {show: true,text: '违规项',x: '50%',y: '60%',z: 10,textAlign: 'center',textStyle: {color: '#ffffff',fontSize: 68,fontWeight: 500},},series: [{name: '违规项',type: 'liquidFill',radius: '60%',center: ['50%', '45%'],data: [70/100],label:{normal:{textStyle:{color: '#ffffff',fontSize: 68,}}},color: ['#4366f3'],backgroundStyle: {color: 'rgba(39,115,229,0.12)'},outline: {borderDistance: 0,itemStyle: {borderWidth: 5,borderColor: 'rgba(49,102,255,0.5)',}},// amplitude: 0,}]
};

发现水波图的类型是“liquidFill”,在官网中没有找到这个类型,后面发现是需要单独封装的类型,需要单独下载安装包。

我安装的依赖版本(水波图的类型应该是在echarts 5版本支持,小伙伴们使用时注意版本):

echarts:5.2.2

echarts-liquidfill:3.1.0

主要修改的代码是series里面的data控制数据展示和series里面的color控制水波的颜色渐变

option = {backgroundColor: "#0e2147", // 背景颜色title: {show: true,text: '水波图', // 标题名字x: '50%',y: '60%',z: 10,textAlign: 'center', // 文字位置textStyle: {  // 文字样式设置color: '#ffffff',fontSize: 50,fontWeight: 500},},series: [{name: '水波图',type: 'liquidFill',radius: '60%',center: ['50%', '45%'],data: [{value: [55.2 / 100],label: {normal: {formatter: `${55.2}%`,show: true,}}}],label:{normal:{textStyle:{ // 数值样式设置color: '#ffffff',fontSize: 60,}}},color: [{type: 'linear',x: 0,y: 1,x2: 0,y2: 0,colorStops: [ // 水波颜色渐变{offset: 1,color: ['rgba(11,175,202,1)'], // 0% 处的颜色},{offset: 0,color: ['rgba(0,145,255,1)'], // 100% 处的颜色}], // 水波纹颜色}],backgroundStyle: {color: 'rgba(39,115,229,0.12)'},outline: {borderDistance: 0,itemStyle: {borderWidth: 5, // 边 宽度borderColor: 'rgba(49,102,255,0.5)',}},}]
};

以上是我遇到的问题,简单记录一下(虽然...但是没有找到echarts的全部类型,官网中的只是一部分),欢迎各位小伙伴来交流~

代码参考echarts社区:https://www.isqqw.com/viewer?id=17830

相关文章:

Echarts 水波图实现

开发的项目中需要实现这样一个水波图,例如下图在echarts官网中找了很久没找到,后面是在Echarts社区中找到的,实现了大部分的样式,但是还有一些数据的展示没有实现。水波图的数值展示是默认整数百分比,我的需求是需要保…...

逻辑优化基础-shannon decomposition

1. 简介 在逻辑综合中,香农分解(Shannon decomposition)是一种常用的布尔函数分解方法。它将一个布尔函数分解为两个子函数的和,其中每个子函数包含一个布尔变量的取反和非取反的部分。 具体来说,假设对于一个布尔函…...

Java中线程池的创建与使用

前言:默认线程池的弊端在线程池应用中,参考阿里巴巴java开发规范:线程池不允许使用Executors去创建,不允许使用系统默认的线程池,推荐通过ThreadPoolExecutor的方式,这样的处理方式让开发的工程师更加明确&…...

关于HashMap与OkHttp的使用

写了一个okhttp的post请求方法,添加参数很麻烦,需要封装: //post请求public static void sendOkHttpRequestPost(String address , Callback callback) {OkHttpClient client new OkHttpClient();// 创建表单参数RequestBodyRequestBody fo…...

华为OD机试 - 单词倒序(C 语言解题)【独家】

最近更新的博客 华为od 2023 | 什么是华为od,od 薪资待遇,od机试题清单华为OD机试真题大全,用 Python 解华为机试题 | 机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南)华为od机试,独家整理 已参加机试人员的实战技巧文章目录 使用说明本期题目:单词倒序…...

搭建Samba服务器

搭建Samba服务器 文章目录搭建Samba服务器samba安装安装命令配置-ubuntu侧为samba服务器创建一个共享目录share创建使用该共享文件夹的账号修改samba服务器配置文件重启samba服务windows创建映射1.点击映射网络驱动器2.输入Ubuntu中的ip地址及其用户信息3.输入用户信息及其密码…...

Matlab进阶绘图第5期—风玫瑰图(WindRose)

风玫瑰图(Wind rose diagram)是一种特殊的极坐标堆叠图/统计直方图,其能够直观地表示某个地区一段时期内风向、风速的发生频率。 风玫瑰图在建筑规划、环保、风力发电、消防、石油站设计、海洋气候分析等领域都有重要作用,所以在一些顶级期刊中也能够看…...

【SQL开发实战技巧】系列(二十四):数仓报表场景☞通过执行计划详解”行转列”,”列转行”是如何实现的

系列文章目录 【SQL开发实战技巧】系列(一):关于SQL不得不说的那些事 【SQL开发实战技巧】系列(二):简单单表查询 【SQL开发实战技巧】系列(三):SQL排序的那些事 【SQL开发实战技巧…...

XILINX AXI总线学习

AXI介绍什么是AXI?AXI(高级可扩展接口),是ARM AMBA的一部分;AMBA:高级微控制器总线架构;是1996年首次引入的一组微控制器总线;开放的片内互联的总线标准,能在多主机设计中实现多个控…...

2022CCPC女生赛(补题)(A,C,E,G,H,I)

迟了好久的补题&#xff0c;&#xff0c;现在真想把当时赛时的我拉出来捶一拳排序大致按照题目难度。C. 测量学思路&#xff1a;直接循环遍历判断即可&#xff0c;注意角度要和2π取个最小值。AC Code&#xff1a;#include <bits/stdc.h>typedef long long ll; const int…...

【Nginx】Nginx的安装配置

环境说明系统&#xff1a;Centos 7一、编译安装Nginx官网下载地址nginx: download#安装依赖 [rootnginx nginx-1.22.1]# yum install gcc pcre pcre-devel zlib zlib-devel -y #从官网下载Nginx安装包&#xff0c;并进行解压、编译、安装 [rootnginx ~]# wget https://nginx.or…...

数学小课堂:统计时有效地筛选数据

文章目录引言I 被爆冷门的原因II 统计时有效地筛选数据2.1 统计数据的常见问题2.2 大数据的特征2.3 有效筛选数据的原则引言 在博弈论中很多结果有发生的概率&#xff0c;而概率这件事只是估计出来的&#xff0c;并不准确。因此&#xff0c;一旦加入博弈的选手多了之后&#x…...

MySQL安装优化

hello&#xff0c;大家好&#xff0c;我是小鱼 本文主要通过针对 MySQL Server&#xff08;mysqld&#xff09;相关实现机制的分析&#xff0c;得到一些相应的优化建议。主要 涉及 MySQL 的安装以及相关参数设置的优化&#xff0c;但不包括 mysqld 之外的比如存储引擎相关的参…...

RocketMQ系列开篇

RocketMQ系列开篇 今天开始学习RocketMQ相关系列源码。我会带着自己的目的去学习源码。所以不会像一般的技术博客一样&#xff0c;写一个完整的流程&#xff0c;介绍每一步干了啥。而是提出一个问题&#xff0c;然后去看代码里面是怎么实现的。说明一下&#xff0c;本次系列我…...

logback无法删除太久远的日志文件?logback删除日志文件源码分析

logback无法删除太久远的日志文件&#xff1f;logback删除日志文件源码分析 最近发现logback配置滚动日志&#xff0c;但是本地日志文件甚至还有2年前的日志文件&#xff0c;服务器是却是正常的&#xff01; 网上搜索了一波没有发现&#xff0c;只找到说不能删除太久远的旧日志…...

【MyBatis-Plus】基于@Version注解的乐观锁实现

引入mybatis-plus依赖&#xff0c;注意这里的版本要求 since 3.4.0&#xff1b;&#xff08;3.4.1,3.4.2已测&#xff09; 3.2.0肯定是不支持的&#xff0c;无法引入MybatisPlusInterceptor&#xff1b; 乐观锁 当要更新一条记录的时候&#xff0c;希望这条记录没有被别人更新…...

ubuntu20.04搭建detectron2环境

Ubuntu22.04安装Cuda11.3 Linux下驱动安装 # 以下命令按顺序执行 sudo apt update && sudo apt upgrade -y # or sudo apt update # 查看显卡信息 ubuntu-drivers devices sudo ubuntu-drivers autoinstall # or sudo apt install nvidia-driver-510 reboot nvidia-s…...

Navicate远程连接Linux上docker安装的MySQL容器

Navicate远程连接Linux上docker安装的MySQL容器失败 来自&#xff1a;https://bluebeastmight.github.io/ 问题描述&#xff1a;windows端的navicat远程连接不上Linux上docker安装的mysql&#xff08;5.7版本&#xff09;容器&#xff0c;错误代码10060 标注&#xff1a; 1、…...

基于Jetson NX的模型部署

系统安装 系统安装过程分为3步&#xff1a; 下载必要的软件及镜像 Jetson Nano Developer Kit SD卡映像 https://developer.nvidia.com/jetson-nano-sd-card-image Windows版SD存储卡格式化程序 https://www.sdcard.org/downloads/formatter_4/eula_windows/ 镜像烧录工具…...

【PaddlePaddle onnx】PaddlePaddle导出ONNX及模型可视化教程

文章目录1 背景介绍2 实验环境3 paddle.onnx.export函数简介4 代码实操4.1 PaddlePaddle与ONNX模型导出4.2 ONNX正确性验证4.3 PaddlePaddle与ONNX的一致性检查4.4 多输入的情况5 ONNX模型可视化6 ir_version和opset_version修改7 致谢原文来自于地平线开发者社区&#xff0c;未…...

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

关于 WASM:1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么&#xff1f; WebAssembly&#xff08;WASM&#xff09; 是一种能在现代浏览器中高效运行的二进制指令格式&#xff0c;它不是传统的编程语言&#xff0c;而是一种 低级字节码格式&#xff0c;可由高级语言&#xff08;如 C、C、Rust&am…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

无人机侦测与反制技术的进展与应用

国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机&#xff08;无人驾驶飞行器&#xff0c;UAV&#xff09;技术的快速发展&#xff0c;其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统&#xff0c;无人机的“黑飞”&…...

Git 3天2K星标:Datawhale 的 Happy-LLM 项目介绍(附教程)

引言 在人工智能飞速发展的今天&#xff0c;大语言模型&#xff08;Large Language Models, LLMs&#xff09;已成为技术领域的焦点。从智能写作到代码生成&#xff0c;LLM 的应用场景不断扩展&#xff0c;深刻改变了我们的工作和生活方式。然而&#xff0c;理解这些模型的内部…...

多元隐函数 偏导公式

我们来推导隐函数 z z ( x , y ) z z(x, y) zz(x,y) 的偏导公式&#xff0c;给定一个隐函数关系&#xff1a; F ( x , y , z ( x , y ) ) 0 F(x, y, z(x, y)) 0 F(x,y,z(x,y))0 &#x1f9e0; 目标&#xff1a; 求 ∂ z ∂ x \frac{\partial z}{\partial x} ∂x∂z​、 …...

STM32标准库-ADC数模转换器

文章目录 一、ADC1.1简介1. 2逐次逼近型ADC1.3ADC框图1.4ADC基本结构1.4.1 信号 “上车点”&#xff1a;输入模块&#xff08;GPIO、温度、V_REFINT&#xff09;1.4.2 信号 “调度站”&#xff1a;多路开关1.4.3 信号 “加工厂”&#xff1a;ADC 转换器&#xff08;规则组 注入…...

Django RBAC项目后端实战 - 03 DRF权限控制实现

项目背景 在上一篇文章中&#xff0c;我们完成了JWT认证系统的集成。本篇文章将实现基于Redis的RBAC权限控制系统&#xff0c;为系统提供细粒度的权限控制。 开发目标 实现基于Redis的权限缓存机制开发DRF权限控制类实现权限管理API配置权限白名单 前置配置 在开始开发权限…...