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

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

<6>-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

React Native 开发环境搭建(全平台详解)

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

PL0语法,分析器实现!

简介 PL/0 是一种简单的编程语言,通常用于教学编译原理。它的语法结构清晰,功能包括常量定义、变量声明、过程(子程序)定义以及基本的控制结构(如条件语句和循环语句)。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言,由 Niklaus Wirth 设计,用于展示编译原理的核…...

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

HarmonyOS运动开发:如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit&#xff08;传感器服务&#xff09;# 前言 在运动类应用中&#xff0c;运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据&#xff0c;如配速、距离、卡路里消耗等&#xff0c;用户可以更清晰…...

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

基于SpringBoot在线拍卖系统的设计和实现

摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...