当前位置: 首页 > 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;未…...

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

工程地质软件市场:发展现状、趋势与策略建议

一、引言 在工程建设领域&#xff0c;准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具&#xff0c;正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...

【p2p、分布式,区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构 定向转发机制

目录 节点的功能承载层&#xff08;GATT/Adv&#xff09;局限性&#xff1a; 拓扑关系定向转发机制定向转发意义 CG 节点的功能 节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能&#xff0c;如 Configuration …...

用鸿蒙HarmonyOS5实现中国象棋小游戏的过程

下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...

五子棋测试用例

一.项目背景 1.1 项目简介 传统棋类文化的推广 五子棋是一种古老的棋类游戏&#xff0c;有着深厚的文化底蕴。通过将五子棋制作成网页游戏&#xff0c;可以让更多的人了解和接触到这一传统棋类文化。无论是国内还是国外的玩家&#xff0c;都可以通过网页五子棋感受到东方棋类…...

rknn toolkit2搭建和推理

安装Miniconda Miniconda - Anaconda Miniconda 选择一个 新的 版本 &#xff0c;不用和RKNN的python版本保持一致 使用 ./xxx.sh进行安装 下面配置一下载源 # 清华大学源&#xff08;最常用&#xff09; conda config --add channels https://mirrors.tuna.tsinghua.edu.cn…...