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

使用ECharts创建带百分比标注的环形图

news 来源：原创 2025/5/9 6:20:43

在数据可视化领域，环形图是一种非常有效的图表类型，它能够清晰地展示各部分与整体的关系。今天，我们将通过ECharts来创建一个带百分比标注的环形图，并详细解释如何实现这一效果。

1. 数据准备

首先，我们定义了一些基础数据：

dashedPic：一个base64编码的图片，用作Y轴标签的背景。
color：一个颜色数组，用于环形图各部分的填充颜色。
chartData：包含活动名称、价值和单位的对象数组。

2. 数据处理

接下来，我们对chartData进行处理，提取名称和值，并计算总和价值：

chartData.forEach((v, i) => {arrName.push(v.name);arrValue.push(v.value);sum = sum + v.value;
})

3. 构建环形图系列

我们使用双重循环来构建环形图的系列，每个活动对应两个环形图系列，一个用于显示实际数据，另一个用于创建间隔效果：

chartData.forEach((v, i) => {pieSeries.push({name: '课外活动',type: 'pie',clockWise: false,hoverAnimation: false,radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],center: ["30%", "50%"],label: {show: false},data: [{value: v.value,name: v.name}, {value: sum - v.value,name: '',itemStyle: {color: "rgba(0,0,0,0)"}}]});pieSeries.push({name: '',type: 'pie',silent: true,z: 1,clockWise: false, //顺时加载hoverAnimation: false, //鼠标移入变大radius: [65 - i * 15 + '%',57 - i * 15 + '%'],center: ["30%", "50%"],label: {show: false},data: [{value: 7.5,itemStyle: {color: "#E3F0FF"}}, {value: 2.5,name: '',itemStyle: {color: "rgba(0,0,0,0)"}}]});
})

每个系列都设置了radius和center属性来定义环形的大小和位置，并且通过data属性来绑定具体的数据。

4. 百分比和Y轴标签

我们为每个活动计算百分比，并创建Y轴标签：

v.percent = (v.value / sum * 100).toFixed(1) + "%";
lineYAxis.push({value: i,textStyle: {rich: {circle: {color: color[i],padding: [0, 5]}}}
});

5. 完整的ECharts配置

最后，我们将所有配置整合到ECharts的option对象中：

let dashedPic = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM8AAAAOBAMAAAB6G1V9AAAAD1BMVEXKysrk5OTj4+TJycoJ0iFPAAAAG0lEQVQ4y2MYBaNgGAMTQQVFOiABhlEwCugOAMqzCykGOeENAAAAAElFTkSuQmCC';
let color = ['#FCC667', '#8693F3', '#89C3F8', '#F2A695'];
let chartData = [{name: "剪纸",value: 132,unit: '间'},{name: "篮球",value: 421,unit: '人'},{name: "声乐",value: 817,unit: '人'},{name: "舞蹈",value: 121,unit: '人'}
];
let arrName = [];
let arrValue = [];
let sum = 0;
let pieSeries = [],lineYAxis = [];// 数据处理
chartData.forEach((v, i) => {arrName.push(v.name);arrValue.push(v.value);sum = sum + v.value;
})// 图表option整理
chartData.forEach((v, i) => {pieSeries.push({name: '课外活动',type: 'pie',clockWise: false,hoverAnimation: false,radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],center: ["30%", "50%"],label: {show: false},data: [{value: v.value,name: v.name}, {value: sum - v.value,name: '',itemStyle: {color: "rgba(0,0,0,0)"}}]});pieSeries.push({name: '',type: 'pie',silent: true,z: 1,clockWise: false, //顺时加载hoverAnimation: false, //鼠标移入变大radius: [65 - i * 15 + '%',57 - i * 15 + '%'],center: ["30%", "50%"],label: {show: false},data: [{value: 7.5,itemStyle: {color: "#E3F0FF"}}, {value: 2.5,name: '',itemStyle: {color: "rgba(0,0,0,0)"}}]});v.percent = (v.value / sum * 100).toFixed(1) + "%";lineYAxis.push({value: i,textStyle: {rich: {circle: {color: color[i],padding: [0, 5]}}}});
})option = {backgroundColor: '#0A2E5D',title: {text: '学生课外选修情况',textAlign: "center",left: "49%",textStyle: {color: '#fff',fontSize: 22,fontWeight: '400'}},color: color,grid: {top: '15%',bottom: '54%',left: "30%",containLabel: false},yAxis: [{type: 'category',inverse: true,axisLine: {show: false},axisTick: {show: false},axisLabel: {formatter: function(params) {let item = chartData[params];console.log(item)return '{line|}{circle|●}{name|'+ item.name +'}{bd||}{percent|'+item.percent+'}{value|'+ item.value+'}{unit|人}'},interval: 0,inside: true,textStyle: {color: "#333",fontSize: 14,rich: {line: {width: 170,height: 10,backgroundColor: {image: dashedPic}},name: {color: 'white',fontSize: 14,},bd: {color: 'white',padding: [0, 5],fontSize: 14,},percent:{color: 'white',fontSize: 14,},value: {color: 'white',fontSize: 16,fontWeight: 500,padding: [0, 0, 0, 20]},unit: {fontSize: 14}}},show: true},data: lineYAxis}],xAxis: [{show: false}],series: pieSeries
};

6. 应用配置

将配置应用到ECharts实例上，就可以看到最终的环形图效果：

myChart.setOption(option);

7. 总结

通过以上步骤，我们创建了一个带百分比标注的环形图，它不仅展示了各部分的比例关系，还通过Y轴标签提供了更详细的信息。这种图表非常适合展示分类数据的比例和分布情况。你可以根据自己的需求调整颜色、大小和样式，以达到最佳的展示效果。希望这篇文章能够帮助你掌握ECharts环形图的创建技巧，为你的数据可视化项目增添亮点。如果有任何问题，欢迎在评论区交流。

使用ECharts创建带百分比标注的环形图

在数据可视化领域，环形图是一种非常有效的图表类型，它能够清晰地展示各部分与整体的关系。今天，我们将通过ECharts来创建一个带百分比标注的环形图，并详细解释如何实现这一效果。 1. 数据准备首先，我们定义了一些基础…...

编程日记 2025/5/9 6:20:43

lvs虚拟服务器之LVS-NAT模式

一.集群二.LVS:虚拟服务器:工作在传输层,解决高并发三.LVS-NAT一.集群1.概念:集群就是一组计算机集群核心：任务调度集群目的提高性能,降低成本,提高可扩展性,增强可靠性集群分类HA：高可用集群（High Availability Cluster）:避免单…...

编程日记 2025/5/9 6:17:38

虚拟机添加硬盘驱动,Windows 系统添加 VirtIO 驱动（Windows ISO 安装镜像添加驱动）

为什么要在 ISO 镜像里添加驱动？而不是在进系统以后装驱动？一切都是形势所迫。如果你也是爱折腾的人，那么这也会成为一个有用的方案之一。　　最近，因为在给公司研究部署 OpenStack，在制作初始镜像（也就是…...

编程日记 2025/5/6 8:22:16

20241128解决Ubuntu20.04安装libesd0-dev异常的问题

20241128解决Ubuntu20.04安装libesd0-dev异常的问题 2024/11/28 16:36 缘起：中科创达的高通CM6125开发板的Android10的编译环境需要。安装异常：rootrootrootroot-X99-Turbo:~$ rootrootrootroot-X99-Turbo:~$ sudo apt-get install libesd0-dev Readi…...

编程日记 2025/5/9 6:01:54

Linux命令进阶·如何切换root以及回退、sudo命令、用户/用户组管理，以及解决创建用户不显示问题和Ubuntu不显示用户名只显示“$“符号问题

目录 1. root用户（超级管理员） 1.1 用于账户切换的系统命令——su 1.2 退回上一个用户命令——exit 1.3 普通命令临时授权root身份执行——sudo 1.3.1 为普通用户配置sudo认证 2. 用户/用户组管理 2.1 用户组管理 2.2 用户管理 2.2.1 …...

编程日记 2025/5/7 15:05:12

基于链表的基础笔试/面试题

1. 反转链表问题描述：反转一个单向链表。示例： 输入：1 → 2 → 3 → 4 → 5 输出：5 → 4 → 3 → 2 → 1 class ListNode {int val;ListNode next;ListNode(int x) {val x;} }public class LinkedList {public ListNode …...

编程日记 2025/5/1 22:33:01

文件比较和文件流

文件比较和文件流一、文本比较工具 diff1.基本用法1.1输出格式 2.常用选项二、文件流1.文件的打开模式2.文件流的分类ifstreamofstreamfstrem区别 3.文件流的函数1. 构造函数2. is_open 用于判断文件是否打开3. open4. getline5. close6. get()7. read8. write9. put10. gcou…...

编程日记 2025/5/9 6:08:53

unity如何让一个物体拥有按钮功能

在 Unity 中，要让一个物体（例如一个 3D 模型、UI 元素或其他对象）变成一个按钮，你需要为它添加交互功能。这通常意味着让物体能够响应点击事件，像 UI 按钮那样触发某些行为。对于 3D 物体，可以通过射线检测…...

编程日记 2025/5/9 6:12:59

【RISC-V CPU Debug 专栏 1 -- RISC-V debug 规范】

文章目录 RISC-V Debug调试用例支持的功能限制和不包括的内容RISC-V 调试架构的主要组件用户与调试主机调试翻译器调试传输硬件调试传输模块（DTM）调试模块（DM）调试功能触发模块版本介绍RISC-V Debug RISC-V 调试规范为 RISC-V 处理器提供了一套标准化的调试接口和功能，旨…...

编程日记 2025/4/23 7:26:13

【论文阅读】Federated learning backdoor attack detection with persistence diagram

目的：检测联邦学习环境下，上传上来的模型是不是恶意的。 1、将一个模型转换为|L|个PD,（其中|L|为层数） 如何将每一层转换成一个PD？ 为了评估第𝑗层的激活值，我们需要𝑐个输入来获…...

编程日记 2025/5/5 10:41:09

IDEA Maven 打包找不到程序包错误或找不到符号,报错“程序包不存在“

参考文章：https://blog.csdn.net/yueeryuanyi/article/details/14211090 问题：IDEA Maven 打包找不到程序包错误或找不到符号,报错“程序包不存在“编译都没问题解决思路 – >【清除缓存】 1. 强制刷新Maven缓存选择 Maven 标签，Exe…...

编程日记 2025/5/6 22:37:46

MySQL数据库做题笔记

题目链接https://leetcode.cn/problems/invalid-tweets-ii/description/https://leetcode.cn/problems/invalid-tweets-ii/description/ # Write your MySQL query statement below SELECT tweet_id FROM Tweets where LENGTH(content)>140 OR (length(content)-length(rep…...

编程日记 2025/5/9 6:08:53

100个python经典面试题详解(新版)

应老粉要求，每晚加餐一个最新面试题包括Python面试中常见的问题，涵盖列表、元组、字符串插值、比较操作符、装饰器、类与对象、函数调用方式、数据结构操作、序列化、数据处理函数等多个方面。旨在帮助数据科学家和软件工程师准备面试或提升Python技能。 7、Python面试题…...

编程日记 2025/5/7 7:48:57

Leetcode3232：判断是否可以赢得数字游戏

题目描述： 给你一个正整数数组 nums。 Alice 和 Bob 正在玩游戏。在游戏中，Alice 可以从 nums 中选择所有个位数或所有两位数，剩余的数字归 Bob 所有。如果 Alice 所选数字之和严格大于 Bob 的数字之和，则 Alice 获胜。如…...

编程日记 2025/5/9 5:56:32

Python 爬虫实战基于 Class 的天气查询与反爬虫练习

需求： 要实现一个简单的天气查询爬虫，使用 requests 库来获取网页内容，使用 BeautifulSoup 来解析网页并提取天气信息。以下是一个基本示例，展示了如何抓取天气信息并输出当天的温度和天气状况。以下是使用 class 类方式实现带有…...

编程日记 2025/5/9 6:00:31

C语言——库函数

常用的函数 https://cplusplus.com/reference/ 没事儿多看看 1 数学函数 #include <math.h> #include <stdio.h> int main() {printf("%lf\n", sqrt(4));//开平方根——>double类型printf("%lf\n", pow(2, 10));//求几次方的——>do…...

编程日记 2025/5/9 6:11:39

软件测试丨Pytest 第三方插件与 Hook 函数

Pytest不仅是一个用于编写简单和复杂测试的框架，还有大量的第三方插件以及灵活的Hook函数供我们使用，这些功能大大增强了其在软件测试中的应用。通过使用Pytest，测试开发变得简便、安全、高效，同时也能帮助我们更快地修复Bug&…...

编程日记 2025/5/9 1:45:09

[ACTF2020 新生赛]BackupFile--详细解析

信息搜集让我们寻找源文件，目录扫描： 找到了/index.php.bak文件，也就是index.php的备份文件。后缀名是.bak的文件是备份文件，是文件格式的扩展名。我们访问这个路径，就会直接下载该备份文件。我们把.bak后缀删掉…...

编程日记 2025/4/30 10:11:06

ElasticSearch的学习

介绍 ElasticSearch（简称ES）是一个开源的分布式搜索和数据分析引擎，是用Java开发并且是当前最流行的开源的企业级搜索引擎，能够达到近实时搜索，它专门设计用于处理大规模的文本数据和实现高性能的全文检索。 Elastic…...

编程日记 2025/5/6 6:35:27

机器学习6-梯度下降法

梯度下降法目的梯度下降法(Gradient Descent)是一个算法，但不是像多元线性回归那样是一个具体做回归任务的算法，而是一个非常通用的优化算法来帮助一些机器学习算法求解出最优解的，所谓的通用就是很多机器学习算法都是用它，甚…...

编程日记 2025/5/3 19:55:23

算法之旅：LeetCode 拓扑排序由简入繁完全攻略

前言欢迎来到我的算法探索博客，在这里，我将通过解析精选的LeetCode题目，与您分享深刻的解题思路、多元化的解决方案以及宝贵的实战经验，旨在帮助每一位读者提升编程技能，领略算法之美。 👉更多高频有趣Lee…...

编程日记 2025/5/5 20:37:02

vue3项目中使用星火API

在node环境epxress中使用讯飞ai接口进行二次封装，通过ai对话回复提取，获得ai提取的文章摘要本文章只是简单使用，更复杂功能比如调用星火API制作对话机器人可以查看文档，对于初次使用星火AI接口或许有帮助讯飞星火大模型API-大模…...

编程日记 2025/4/29 17:07:44

蓝桥杯第 23 场小白入门赛

一、前言好久没打蓝桥杯官网上的比赛了，回来感受一下，这难度区分度还是挺大的二、题目总览三、具体题目 3.1 1. 三体时间【算法赛】思路额...签到题我的代码 // Problem: 1. 三体时间【算法赛】 // Contest: Lanqiao - 第 23 场小白入门赛 …...

编程日记 2025/5/6 5:14:48

Cause: java.sql.SQLException: No value specified for parameter 4

问题执行更新sql时报错，异常栈如下 org.springframework.jdbc.BadSqlGrammarException: ### Error updating database. Cause: java.sql.SQLException: No value specified for parameter 4 ### The error may exist in com/my/mapper/MyMapper.java (best gue…...

编程日记 2025/5/6 17:43:28

第五课 Unity资源导入工作流效率优化（AssetGraph工具）

上期我们学习了简单的animation动画的优化，接下来我们继续资源导入效率的优化工程目录首先我们来学习一下工程目录结构及用途 Asset文件夹：用来储存和重用的项目资产 Library文件夹：用来储存项目内部资产数据信息的目录 Packages文件夹…...

编程日记 2025/5/8 1:35:48

create-vue创建vue3项目

create-vue是Vue官方新的脚手架工具前提条件： 已安装16.0或更高版本的Node.js （node -v查看） 创建一个Vue应用 npm init vuelatest 这一指令会帮我们安装并执行create-vue cd vue-project npm install —— 安装依赖 npm run dev...

编程日记 2025/5/6 22:11:25

27 基于51单片机的方向盘模拟系统

目录一、主要功能二、硬件资源三、程序编程四、实现现象一、主要功能基于STC89C52单片机，采用两个MPX4115压力传感器作为两路压力到位开关电路， 采用滑动变阻器连接数模转换器模拟重力加速度传感器电路； 一个按键控制LED灯的点亮与…...

编程日记 2025/4/8 6:41:52

HarmonyOS

UIAbility UIAbility 组件是一种包含UI的应用组件，主要用于和用户交互设计理念：原生支持应用组件的跨端迁移和多端协同、支持多设备和多窗口的形态 UIAbility组件是系统调度的基本单位，为应用提供绘制界面的窗口。 /** 为使应用能够正常使用…...

编程日记 2025/5/9 0:30:53

字符串处理（二）

第1题篮球比赛查看测评数据信息学校举行篮球比赛，请设计一个计分系统统计KIN、WIN两队分数，并输出分数和结果！ 如果平分就输出‘GOOD’，否则输出获胜队名！ 输入格式输入数据共n1行， 第1行n&#xf…...

编程日记 2025/5/6 13:34:38

达梦数据库文件故障的恢复方法

目录 1、概述 1.1 概述 1.2 环境介绍 2、使用备份集的恢复方法 2.1 实验准备 2.2 误删除“用户表空间数据文件” 2.3 误删除SYSTEM.DBF 2.4 误删除ROLL.DBF 2.5 REDO日志文件 3、无备份集的恢复方法 3.1 误删除“表空间数据文件” 3.2误删除控制文件 3.3 误删除RO…...

编程日记 2025/5/2 21:33:43

Redis（5）：哨兵

一、作用和架构 1. 作用在介绍哨兵之前，首先从宏观角度回顾一下Redis实现高可用相关的技术。它们包括：持久化、复制、哨兵和集群，其主要作用和解决的问题是： 1）持久化：持久化是最简单的高可用方法(有时甚…...

编程日记 2025/5/4 13:02:01

准确--在 AlmaLinux 9.2 上快速搭建 FTP 服务器

FTP 服务器配置与验证完整步骤以下内容是针对在 192.168.6.101 配置 FTP 服务器，端口为 59999 的完整详细操作步骤，包括配置与验证。每个步骤都附有详细注释。配置 FTP 服务器 1. 安装 vsftpd 根据系统类型，执行以下命令安装 FTP 服务&a…...

编程日记 2025/5/7 15:09:16

Monitor 显示器软件开发设计入门二

基础篇--显示驱动方案输出接口介绍写在前面：首先申明，这篇文章是写给那些初入显示器软件行业的入门者，或是对显示器没有基本知识的小白人员。如您是行业大咖大神，可以绕行，可看后期进阶文章。上篇介绍了输入接口及相…...

编程日记 2025/4/30 0:19:36

MySQL 数据库学习教程一：开启数据库探索之旅

在当今数字化时代，数据已然成为企业和组织最为宝贵的资产之一。而数据库管理系统则是存储、管理和操作这些数据的核心工具。MySQL 作为一款广泛应用的开源关系型数据库管理系统，以其可靠性、高性能和易用性而备受青睐。如果你渴望踏入数据库领域&#xf…...

编程日记 2025/5/7 1:18:15

课程答疑微信小程序设计与实现

私信我获取源码和万字论文，制作不易，感谢点赞支持。课程答疑微信小程序设计与实现摘要随着信息技术在管理上越来越深入而广泛的应用，管理信息系统的实施在技术上已逐步成熟。本文介绍了课程答疑微信小程序设计与实现的开发全过程。通过分析…...

编程日记 2025/5/5 3:46:00

基于yolov8、yolov5的铝材缺陷检测识别系统（含UI界面、训练好的模型、Python代码、数据集）

摘要：铝材缺陷检测在现代工业生产和质量管理中具有重要意义，不仅能帮助企业实时监控铝材质量，还为智能化生产系统提供了可靠的数据支撑。本文介绍了一款基于YOLOv8、YOLOv5等深度学习框架的铝材缺陷检测模型，该模型使用了大量包含…...

编程日记 2025/5/6 17:43:54

docker 僵尸进程问题

docker僵尸进程子进程结束后，父进程没有回收该进程资源（父进程可能没有wait），子进程残留资源存放与内核中，就变为僵尸进程(zombie) 场景分析：python脚本A中执行B应用，将A部署在docker中&#…...

编程日记 2025/5/1 6:39:15

Web 毕设篇-适合小白、初级入门练手的 Spring Boot Web 毕业设计项目：电影院后台管理系统（前后端源码 + 数据库 sql 脚本）

🔥博客主页： 【小扳_-CSDN博客】 ❤感谢大家点赞👍收藏⭐评论✍ 文章目录 1.0 项目介绍 2.0 用户登录功能 3.0 用户管理功能 4.0 影院管理功能 5.0 电影管理功能 6.0 影厅管理功能 7.0 电影排片管理功能 8.0 用户评论管理功能 9.0 用户购票功…...

编程日记 2025/4/25 11:46:02

webpack5 的五大核心配置（二）

webpack主要构成部分： entry 入口output 出口loaders 转化器plugins 插件mode 模式devServer 开发服务器 webpack.config.js 配置文件基本格式 module.exports{//入口文件entry:{},//出口文件output:{},//module rules loadersmodule{};//插件plugins:[],//开发…...

编程日记 2025/5/5 15:33:45

Python语法基础（四）

🌈个人主页：羽晨同学 💫个人格言:“成为自己未来的主人~” 高阶函数之map 高阶函数就是说，A函数作为B函数的参数，B函数就是高阶函数 map：映射 map(func,iterable) 这个是map的基本语法，…...

编程日记 2025/5/8 21:05:49

UnityShader——初级篇之开始Unity Shader学习之旅

开始Unity Shader学习之旅一个最简单的顶点/片元着色器顶点/片元着色器的基本结构模型数据从哪里来顶点着色器和片元着色器之间如何通信如何使用属性强大的援手：Unity 提供的内置文件和变量内置的包含文件内置的变量 Unity 提供的 Cg/HLSL 语义什么是语义Unity 支…...

编程日记 2025/5/5 5:01:53

Burp入门（6）-自动化漏洞测试理论

声明：学习视频来自b站up主泷羽sec，如涉及侵权马上删除文章声明：本文主要用作技术分享，所有内容仅供参考。任何使用或依赖于本文信息所造成的法律后果均与本人无关。请读者自行判断风险，并遵循相关法律法规。感谢泷…...

编程日记 2025/5/6 14:55:46

【git】git 客户端设置本地缓冲区大小

文章目录 1. 报错2. 解决：增加本地缓冲区 1. 报错 git -c core.quotepathfalse -c log.showSignaturefalse push --progress --porcelain origin refs/heads/master:master Enumerating objects: 17, done. Counting objects: 5% (1/17) Counting objects: 11% …...

编程日记 2025/5/9 2:32:31

Xcode——LLDB Debugger 与断点调试学习

Xcode——LLDB Debugger 与断点调试学习文章目录 Xcode——LLDB Debugger 与断点调试学习前言介绍打开LLDB命令helpprintexpression 断点调试异常断点——Exception Breakpoint标志断点——Symbolic Breakpointwatchpointset 断点行为condition条件判断最后参考文章前言在…...

编程日记 2025/5/6 16:20:22

linux安全管理-系统环境安全

1 历史命令设置 1、检查内容检查操作系统的历史命令设置。 2、配置要求建议操作系统的历史命令设置。 3、配置方法编辑/etc/profile 文件，配置保留历史命令的条数 HISTSIZE 和保留历史命令的记录文件大小 HISTFILESIZE，这两个都设置为 5。配置方法如…...

编程日记 2025/5/7 13:18:32

【Maven】依赖冲突如何解决？

准备工作 1、创建一个空工程 maven_dependency_conflict_demo，在 maven_dependency_conflict_demo 创建不同的 Maven 工程模块，用于演示本文的一些点。什么是依赖冲突？ 当引入同一个依赖的多个不同版本时，就会发生依赖冲突。…...

编程日记 2025/5/4 10:48:46

学习视频超分辨率扩散模型中的空间适应和时间相干性（原文翻译）

文章目录摘要1. Introduction2. Related Work3. Our Approach3.1. Video Upscaler3.2. Spatial Feature Adaptation Module3.3. Temporal Feature Alignment Module3.4. Video Refiner3.5. Training Strategy 4. Experiments4.1. Experimental Settings4.2. Comparisons with …...

编程日记 2025/5/6 17:17:26