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

在数据可视化领域,环形图是一种非常有效的图表类型,它能够清晰地展示各部分与整体的关系。今天,我们将通过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)"}}]});
})

每个系列都设置了radiuscenter属性来定义环形的大小和位置,并且通过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环形图的创建技巧,为你的数据可视化项目增添亮点。如果有任何问题,欢迎在评论区交流。

 

 

 

 

 

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/62704.shtml

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

相关文章

基于LSTM的文本多分类任务

概述: LSTM(Long Short-Term Memory,长短时记忆)模型是一种特殊的循环神经网络(RNN)架构,由Hochreiter和Schmidhuber于1997年提出。LSTM被设计来解决标准RNN在处理序列数据时遇到的长期依赖问题…

frp软件实现网络穿透

1. 名词 1.1. 网络穿透 网络穿透是一种技术,用于解决内网设备或服务无法直接被外部网络访问的问题。通常,内网设备位于路由器后面,并没有公网 IP 地址,因此外部用户不能直接连接到这些设备。网络穿透通过一些特定的技术手段&…

leetcode3250. 单调数组对的数目 I,仅需1s

题目: https://leetcode.cn/problems/find-the-count-of-monotonic-pairs-i/description/ 不为别的,只是记录下这个超过100%,而且比原先最快的快了一个量级 不知道咋分析,反正得出结论就是,变大不变,变小…

使用docker-compose部署搜索引擎ElasticSearch6.8.10

背景 Elasticsearch 是一个开源的分布式搜索和分析引擎,基于 Apache Lucene 构建。它被广泛用于实时数据搜索、日志分析、全文检索等应用场景。 Elasticsearch 支持高效的全文搜索,并提供了强大的聚合功能,可以处理大规模的数据集并进行快速…

Zabbix 模板翻译自动化教程

在企业 IT 运维管理中,Zabbix 作为一款强大的开源监控平台被广泛应用。而 Zabbix 模板作为监控配置的重要组成部分,用来定义监控项、触发器、图形等。随着国际化的需求增加,Zabbix 模板的翻译工作变得日益重要,特别是在需要为不同…

Springboot小知识(1):启动类与配置

一、启动类(引导类) 在通常情况下,你创建的Spring应用项目都会为你自动生成一个启动类,它是这个应用的起点。 在Spring Boot中,引导类(也称为启动类,通常是main方法所在的类)是整个…

数据集-目标检测系列- 海边漫步锻炼人检测数据集 person >> DataBall

数据集-目标检测系列- 海边漫步锻炼人检测数据集 person >> DataBall DataBall 助力快速掌握数据集的信息和使用方式,会员享有 百种数据集,持续增加中。 需要更多数据资源和技术解决方案,知识星球: “DataBall - X 数据球…

NLP信息抽取大总结:三大任务(带Prompt模板)

信息抽取大总结 1.NLP的信息抽取的本质?2.信息抽取三大任务?3.开放域VS限定域4.信息抽取三大范式?范式一:基于自定义规则抽取(2018年前)范式二:基于Bert下游任务建模抽取(2018年后&a…

手机中的核心SOC是什么?

大家好,我是山羊君Goat。 常常听说CPU,中央处理器等等的,它是一个电脑或单片机系统的核心,但是对于SOC可能相比于CPU了解的人没有那么广泛。 所以SOC是什么? SOC全称是System on Chip,就是片上系统&#…

网络--socket编程--基础

1、网络字节序 已知:内存中的很多数据都有大小端之分,在网络这,网络数据流也是有大小端之分的。 TCP/IP协议规定:网络数据流采用大端字节序(即低地址处放高位字节)。 因此,小端机器发送网络数据流之前,必须转为大端(一般的机器会自动转换): 在网络-本地字节序转换…

Transformers在计算机视觉领域中的应用【第1篇:ViT——Transformer杀入CV界之开山之作】

目录 1 模型结构2 模型的前向过程3 思考4 结论 论文: AN IMAGE IS WORTH 16X16 WORDS: TRANSFORMERS FOR IMAGE RECOGNITION AT SCALE 代码:https://github.com/google-research/vision_transformer Huggingface:https://github.com/huggingf…

<数据集>路面坑洼识别数据集<目标检测>

数据集格式:VOCYOLO格式 图片数量:665张 标注数量(xml文件个数):665 标注数量(txt文件个数):665 标注类别数:1 标注类别名称:[pothole] 序号类别名称图片数框数1pothole6651740 使用标注工具&#x…

PySide6 QSS(Qt Style Sheets) Reference: PySide6 QSS参考指南

Qt官网参考资料: QSS介绍: Styling the Widgets Application - Qt for Pythonhttps://doc.qt.io/qtforpython-6/tutorials/basictutorial/widgetstyling.html#tutorial-widgetstyling QSS 参考手册: Qt Style Sheets Reference | Qt Widge…

07.ES11 08.ES12

7.1、Promise.allSettled 调用 allsettled 方法&#xff0c;返回的结果始终是成功的&#xff0c;返回的是promise结果值 <script>//声明两个promise对象const p1 new Promise((resolve, reject) > {setTimeout(() > {resolve("商品数据 - 1");}, 1000)…

qt QGraphicsRotation详解

1、概述 QGraphicsRotation 是 Qt 框架中 QGraphicsTransform 的一个子类&#xff0c;它专门用于处理图形项的旋转变换。通过 QGraphicsRotation&#xff0c;你可以对 QGraphicsItem&#xff08;如形状、图片等&#xff09;进行旋转操作&#xff0c;从而创建动态和吸引人的视觉…

Unity Plane API解释

构造函数解释&#xff0c;d的解释为&#xff1a;距离是沿着平面法线从平面到原点的距离。注意&#xff0c;这意味着为正值的distance值将导致平面朝向原点。负的距离值会导致平面朝向远离原点。 试验&#xff1a; GetSide方法检测点是否位于平面的正向侧&#xff0c;结果显示…

通讯专题4.1——CAN通信之计算机网络与现场总线

从通讯专题4开始&#xff0c;来学习CAN总线的内容。 为了更好的学习CAN&#xff0c;先从计算机网络与现场总线开始了解。 1 计算机网络体系的结构 在我们生活当中&#xff0c;有许多的网络&#xff0c;如交通网&#xff08;铁路、公路等&#xff09;、通信网&#xff08;电信、…

深度学习模型:LSTM (Long Short-Term Memory) - 长短时记忆网络详解

一、引言 在深度学习领域&#xff0c;循环神经网络&#xff08;RNN&#xff09;在处理序列数据方面具有独特的优势&#xff0c;例如语音识别、自然语言处理等任务。然而&#xff0c;传统的 RNN 在处理长序列数据时面临着严重的梯度消失问题&#xff0c;这使得网络难以学习到长…

算法笔记:力扣24. 两两交换链表中的节点

思路&#xff1a; 本题最简单的就是通过递归的形式去实现 class Solution {public ListNode swapPairs(ListNode head) {if(head null || head.next null){return head;}ListNode next head.next;head.next swapPairs(next.next);next.next head;return next;} } 对于链…

ehr系统建设方案,人力资源功能模块主要分为哪些,hrm平台实际案例源码,springboot人力资源系统,vue,JAVA语言hr系统(源码)

eHR人力资源管理系统&#xff1a;功能强大的人力资源管理工具 随着企业规模的不断扩大和业务需求的多样化&#xff0c;传统的人力资源管理模式已无法满足现代企业的需求。eHR人力资源管理系统作为一种先进的管理工具&#xff0c;能够为企业提供高效、准确、实时的人力资源管理。…