ehcarts生成彩虹图，半圆饼图，蚊香图等

其实这三种图我都认为是一种图，都是饼图的变形，需求长这样子
在这里插入图片描述
我的效果图这样子
在这里插入图片描述
想要一模一样自己改改颜色就行了

我们先生成完整的蚊香图，众所周知，我们正常的饼图只是把seriesData配置一次，然后把数据全部塞进去，就好，如官网示例
在这里插入图片描述

那想要生成很多条数据，我们把series里面的每一条数据都按比例分（比如100处长啥样，40分长啥样，60分长啥样），搞成很多条就好了，循环数据，把每一个数据都搞成一个seriesData数据条，就变成一圈一圈的了

const obj = {//定义要用到的变量：series: [],maxRadius: 90,barWidth: 6,barGap: 2,// sumValue: 0,showValue: true,showPercent: true,option: {},//图形数据PieDatas: [{"value": 95,"name": "XXXXXXXXXX数据XXXXXXXXXX完整率"},{"value": 85,"name": "XXXXXXXXXX数据XXXXXXXXXX完整率"},{"value": 35,"name": "XXXXXXXXXX数据XXXXXXXXXX完整率"},{"value": 65,"name": "XXXXXXXXXX数据XXXXXXXXXX完整率"},{"value": 100,"name": "XXXXXXXXXXXXXXXX完整率识别准确率"},{"value": 55,"name": "XXXXXXX完整率时钟准确率"},{"value": 75,"name": "车XXXXXXXXXX数据XXXXXXXXXX完整率上传率"}, {"value": 95,"name": "XXXXXXXXXX数据XXXXXXXXXX完整率上传率"}, {"value": 15,"name": "XXXXXXXXXX数据XXXXXXXXXX完整率可用率"}, {"value": 25,"name": "XXXXXXXXXX数据XXXXXXXXXX完整率用率"},],//图形颜色BarColor: [{"color1": "#4E9DFF","color2": ""},{"color1": "#36C4F7","color2": ""},{"color1": "#65D4AB","color2": ""},{"color1": "#9FFF8D","color2": ""},{"color1": "#FFE154","color2": ""},{"color1": "#FFB854","color2": ""}, {"color1": "#FF9254","color2": ""}, {"color1": "#FF8181","color2": ""}, {"color1": "#FF81BA","color2": ""}, {"color1": "#DC81FF","color2": ""},],
}

我们制作两个 series数据条，直接把数据条显示成有颜色的，不足100%的用灰色显示，以下是series中的data写法

    data: [{value: item.value,name: item.name,itemStyle: {color: obj.BarColor[i].color1}}, {value: 100 - item.value,name: '',itemStyle: {color: "transparent",},tooltip: {show: false},hoverAnimation: false}]

完整版循环代码

 obj.PieDatas.forEach((item, i) => {obj.series.push({center: ['50%', '60%'],type: 'pie',// clockWise: false, //顺时加载hoverAnimation: false, //鼠标移入变大radius: [(obj.maxRadius - i * (obj.barGap + obj.barWidth)) + '%', (obj.maxRadius - (i + 1) * obj.barWidth - i * obj.barGap) + '%'],label: {show: false},itemStyle: {label: {show: false,},labelLine: {show: false},borderWidth: 5,},data: [{value: item.value,name: item.name,itemStyle: {color: obj.BarColor[i].color1}}, {value: 100 - item.value,name: '',itemStyle: {color: "transparent",},tooltip: {show: false},hoverAnimation: false}]})})

在这里插入图片描述

想制作带底色的图，我们再写一个series， 底色改成灰色就行，蚊香图就出来了

 obj.PieDatas.forEach((item, i) => {obj.series.push({// startAngle: 0,// endAngle: 180,// radius: ['40%', '70%'],center: ['50%', '60%'],name: 'blank',type: 'pie',silent: true,z: 0,// clockWise: false, //顺时加载hoverAnimation: false, //鼠标移入变大radius: [(obj.maxRadius - i * (obj.barGap + obj.barWidth)) + '%', (obj.maxRadius - (i + 1) * obj.barWidth - i * obj.barGap) + '%'],// center: ["30%", "50%"],label: {show: false},itemStyle: {label: {show: false,},labelLine: {show: false},borderWidth: 5,},data: [{value: 1,itemStyle: {color: "#f7f7f7",//圆圈另一半的颜色// color: "transparent",borderWidth: 0},tooltip: {show: false},hoverAnimation: false}]});})

在这里插入图片描述
最后就是制作成半圆形，制作半圆的精髓就是咱们把刚才设置的第2个series设置成透明色,或者把直接把第2个series数据删除，然后第一个series数据条的底色设置成想要的颜色就ok，然后再设置`起始角度结束角度等，我们先来看这个图
在这里插入图片描述

咱们设置startAngle和endAngle，然后根据自己的需求看是否要设置顺时加载colockWise等属性，要设置彩虹底色可以自定义颜色等，直接放setOption完整代码吧

 obj.PieDatas.forEach((item, i) => {obj.series.push({startAngle: 0,endAngle: 180,// radius: ['40%', '70%'],center: ['50%', '60%'],type: 'pie',// clockWise: false, //顺时加载hoverAnimation: false, //鼠标移入变大radius: [(obj.maxRadius - i * (obj.barGap + obj.barWidth)) + '%', (obj.maxRadius - (i + 1) * obj.barWidth - i * obj.barGap) + '%'],// center: ["30%", "50%"],label: {show: false},itemStyle: {label: {show: false,},labelLine: {show: false},borderWidth: 5,},data: [{value: 100,itemStyle: {normal: {color: "transparent" // 透明色}}, name: ''}, {value: item.value,name: item.name,itemStyle: {color: obj.BarColor[i].color1}}, {value: 100 - item.value,name: '',itemStyle: {color: "#f7f7f7",},tooltip: {show: false},hoverAnimation: false}]})// 制作半圆图时这段要不要都可// obj.series.push({//     startAngle: 0,//     endAngle: 180,//     // radius: ['40%', '70%'],//     center: ['50%', '60%'],//     name: 'blank',//     type: 'pie',//     silent: true,//     z: 0,//     // clockWise: false, //顺时加载//     hoverAnimation: false, //鼠标移入变大//     radius: [(obj.maxRadius - i * (obj.barGap + obj.barWidth)) + '%', (obj.maxRadius - (i + 1) * obj.barWidth - i * obj.barGap) + '%'],//     // center: ["30%", "50%"],//     label: {//         show: false//     },//     itemStyle: {//         label: {//             show: false,//         },//         labelLine: {//             show: false//         },//         borderWidth: 5,//     },//     data: [{//         value: 1,//         itemStyle: {//             // color: "#f7f7f7",//圆圈另一半的颜色//             color: "transparent",//             borderWidth: 0//         },//         tooltip: {//             show: false//         },//         hoverAnimation: false//     }]// });})obj.option = {// startAngle: 180,// endAngle: 360,grid: {left: 0,right: 0,top: 0,bottom: 0,},backgroundColor: '#fff',tooltip: {show: true,trigger: "item",},legend: {//右侧文字show: true,left: '20%',top: 'bottom',icon: "circle",itemWidth: 6,itemHeight: 8,itemGap: 5,textStyle: {//右侧字体样式rich: {bothNameValue: {width: 300,  //给文字设置统一长度，保证右侧的百分比对齐},title: {fontSize: 14,lineHeight: 16,color: '#999999',width: 260,},value: {color: '#489DF7',fontSize: 18,fontFimely: 'DIN Alternate'}}},formatter: (name) => {var datas = obj.PieDatas;let total = 0;datas.map(item => {total += (item.value - 0)})let valueIndex = datas.map(item => item.name).indexOf(name);let htmlValue = obj.showPercent ? datas[valueIndex].value + "%" : ''return "{title|" + name + "} {value|" + htmlValue + "}"// return name + "  " + (obj.showPercent ? ((datas[valueIndex].value / total) * 100).toFixed(2) + "%" : '');},},series: obj.series,}

react demo完整版代码，可直接复制粘贴

import React, { useEffect, useState } from 'react';const obj = {//定义要用到的变量：series: [],maxRadius: 90,barWidth: 6,barGap: 2,// sumValue: 0,showValue: true,showPercent: true,option: {},//图形数据PieDatas: [{"value": 95,"name": "XXXXXXXXXX数据XXXXXXXXXX完整率"},{"value": 85,"name": "XXXXXXXXXX数据XXXXXXXXXX完整率"},{"value": 35,"name": "XXXXXXXXXX数据XXXXXXXXXX完整率"},{"value": 65,"name": "XXXXXXXXXX数据XXXXXXXXXX完整率"},{"value": 100,"name": "XXXXXXXXXXXXXXXX完整率识别准确率"},{"value": 55,"name": "XXXXXXX完整率时钟准确率"},{"value": 75,"name": "车XXXXXXXXXX数据XXXXXXXXXX完整率上传率"}, {"value": 95,"name": "XXXXXXXXXX数据XXXXXXXXXX完整率上传率"}, {"value": 15,"name": "XXXXXXXXXX数据XXXXXXXXXX完整率可用率"}, {"value": 25,"name": "XXXXXXXXXX数据XXXXXXXXXX完整率用率"},],//图形颜色BarColor: [{"color1": "#4E9DFF","color2": ""},{"color1": "#36C4F7","color2": ""},{"color1": "#65D4AB","color2": ""},{"color1": "#9FFF8D","color2": ""},{"color1": "#FFE154","color2": ""},{"color1": "#FFB854","color2": ""}, {"color1": "#FF9254","color2": ""}, {"color1": "#FF8181","color2": ""}, {"color1": "#FF81BA","color2": ""}, {"color1": "#DC81FF","color2": ""},],
}const PieChart = (props) => {const {// data,// isEmpty,width = '500px',height = '500px',// radius = [fitChartSize(50), fitChartSize(60)], // 饼图的半径// title = '',// subTitle = '达成率',// gradient = false, // 渐变// showLable = false,// centerTextFontSize = fitChartSize(16)// color,// value,// value2,// value3,// value4,// tooltipShowPercent,// unit = '',} = props;const [option, setOption] = useState(null);useEffect(() => {setOptionData();}, []);const setOptionData = () => {// 指定图表的配置项和数据console.log('    obj.pieDatas', obj)obj.PieDatas.forEach((item, i) => {obj.series.push({startAngle: 0,endAngle: 180,// radius: ['40%', '70%'],center: ['50%', '60%'],type: 'pie',// clockWise: false, //顺时加载hoverAnimation: false, //鼠标移入变大radius: [(obj.maxRadius - i * (obj.barGap + obj.barWidth)) + '%', (obj.maxRadius - (i + 1) * obj.barWidth - i * obj.barGap) + '%'],// center: ["30%", "50%"],label: {show: false},itemStyle: {label: {show: false,},labelLine: {show: false},borderWidth: 5,},data: [{value: 100,itemStyle: {normal: {color: "transparent" // 透明色}}, name: ''}, {value: item.value,name: item.name,itemStyle: {color: obj.BarColor[i].color1}}, {value: 100 - item.value,name: '',itemStyle: {color: "#f7f7f7",},tooltip: {show: false},hoverAnimation: false}]})// obj.series.push({//     startAngle: 0,//     endAngle: 180,//     // radius: ['40%', '70%'],//     center: ['50%', '60%'],//     name: 'blank',//     type: 'pie',//     silent: true,//     z: 0,//     // clockWise: false, //顺时加载//     hoverAnimation: false, //鼠标移入变大//     radius: [(obj.maxRadius - i * (obj.barGap + obj.barWidth)) + '%', (obj.maxRadius - (i + 1) * obj.barWidth - i * obj.barGap) + '%'],//     // center: ["30%", "50%"],//     label: {//         show: false//     },//     itemStyle: {//         label: {//             show: false,//         },//         labelLine: {//             show: false//         },//         borderWidth: 5,//     },//     data: [{//         value: 1,//         itemStyle: {//             // color: "#f7f7f7",//圆圈另一半的颜色//             color: "transparent",//             borderWidth: 0//         },//         tooltip: {//             show: false//         },//         hoverAnimation: false//     }]// });})obj.option = {// startAngle: 180,// endAngle: 360,grid: {left: 0,right: 0,top: 0,bottom: 0,},backgroundColor: '#fff',tooltip: {show: true,trigger: "item",},legend: {//右侧文字show: true,left: '20%',top: 'bottom',icon: "circle",itemWidth: 6,itemHeight: 8,itemGap: 5,textStyle: {//右侧字体样式rich: {bothNameValue: {width: 300,  //给文字设置统一长度，保证右侧的百分比对齐},title: {fontSize: 14,lineHeight: 16,color: '#999999',width: 260,},value: {color: '#489DF7',fontSize: 18,fontFimely: 'DIN Alternate'}}},formatter: (name) => {var datas = obj.PieDatas;let total = 0;datas.map(item => {total += (item.value - 0)})let valueIndex = datas.map(item => item.name).indexOf(name);let htmlValue = obj.showPercent ? datas[valueIndex].value + "%" : ''return "{title|" + name + "} {value|" + htmlValue + "}"// return name + "  " + (obj.showPercent ? ((datas[valueIndex].value / total) * 100).toFixed(2) + "%" : '');},},series: obj.series,}setOption(obj.option)}return <MyChart chartOption={option} width={width} height={height} />;
}export default PieChart;

MyChart 就是把echarts init封装了一下，自己按官网的示例，把数据塞进去就行了

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

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

相关文章

9/24作业

9/24作业

1. 分文件编译 分什么要分文件编译&#xff1f; 防止主文件过大&#xff0c;不好修改&#xff0c;简化编译流程 1) 分那些文件 头文件&#xff1a;所有需要提前导入的库文件&#xff0c;函数声明 功能函数&#xff1a;所有功能函数的定义 主函数&#xff1a;main函数&…
阅读更多...
【AI视频】Runway：Gen-2 图文生视频与运动模式详解

【AI视频】Runway：Gen-2 图文生视频与运动模式详解

博客主页&#xff1a; [小ᶻZ࿆] 本文专栏: AI视频 | Runway 文章目录 &#x1f4af;前言&#x1f4af;仅图片生成视频方法一&#xff1a;通过Midjourney生成图片方法二&#xff1a;通过Runway预览生成图片注意点 &#x1f4af;图加文生成视频方式一&#xff1a;Midjourney…
阅读更多...
中年被裁，记录下这段时间的心路历程，内含前端面试题和面经

中年被裁，记录下这段时间的心路历程，内含前端面试题和面经

前言 真正的转变都是痛苦且无声的。 大家好啊&#xff0c;好久不见&#xff0c;停更了一个月了&#xff0c;最近确实没时间更新我的公益服游戏&#xff0c;这段时间我经历了工作被裁员&#xff0c;学习复习&#xff0c;面试找工作&#xff0c;到最终找到工作。想把这段时间我的…
阅读更多...
为什么 ECB 模式不安全

为什么 ECB 模式不安全

我们先来简单了解下 ECB 模式是如何工作的 ECB 模式不涉及链接模式&#xff0c;所以也就用不着初始化向量&#xff0c;那么相同的明文分组就会被加密成相同的密文分组&#xff0c;而且每个分组运算都是独立的&#xff0c;这也就意味着可以并行提高运算效率&#xff0c;但也正是…
阅读更多...
电脑ip地址怎么换地区：操作步骤与利弊分析

电脑ip地址怎么换地区：操作步骤与利弊分析

在当今全球化的信息时代&#xff0c;人们经常需要访问不同地区的网络资源。然而&#xff0c;由于地理位置的限制&#xff0c;某些内容或服务可能只对特定地区的用户开放。这时&#xff0c;更换电脑IP地址的地区就成为了一个实用的解决方案。本文将详细介绍两种更换电脑IP地址地…
阅读更多...
WebRTC关键技术及应用场景：EasyCVR视频汇聚平台高效低延迟视频监控解决方案

WebRTC关键技术及应用场景：EasyCVR视频汇聚平台高效低延迟视频监控解决方案

众所周知&#xff0c;WebRTC是一项开源的实时通信技术&#xff0c;它通过集成音频、视频和数据传输到Web浏览器中&#xff0c;使得实时通信变得简单且无需任何插件或第三方软件。WebRTC不仅是一个API&#xff0c;也是一系列关键技术和协议的集合&#xff0c;它的出现改变了传统…
阅读更多...
羽毛球场馆预约系统，便捷管理预约

羽毛球场馆预约系统，便捷管理预约

全国羽毛球运动的热度不断上升&#xff0c;在健身行业中掀起了一股羽毛球热潮。同时羽毛球运动的风靡&#xff0c;也吸引了不少人入局&#xff0c;各种大大小小的羽毛球馆不断出现&#xff0c;为大众的羽毛球喜好提供了场地。 随着互联网的发展&#xff0c;羽毛球馆也开始向线…
阅读更多...
共享单车轨迹数据分析：以厦门市共享单车数据为例（六）

共享单车轨迹数据分析：以厦门市共享单车数据为例（六）

副标题&#xff1a;.基于POI数据的站点功能混合度探究——以厦门市为例 为了保证数据时间尺度上的一致性&#xff0c;我们从互联网上下载了2020年的POI数据&#xff0c;POI数据来源于高德地图 API平台,包括名称、大小类、地理坐标等。并将高德地图 POI数据的火星坐标 系 GCJ-0…
阅读更多...
idea 创建多模块项目

idea 创建多模块项目

一、新建项目&#xff0c;创建父工程 新建项目&#xff0c;选择 spring initializr 填写相关信息后提交 删除不相关的目录&#xff0c;如下 修改打包方式为 pom&#xff0c;在 pom.xml 文件中新增一行&#xff0c;如下 二、创建子模块 新增子模块 填写子模块信息&#x…
阅读更多...
《机器学习》周志华-CH8（集成学习）

《机器学习》周志华-CH8（集成学习）

8.1个体与集成 集成学习(ensemble learning)通过构建并结合多个学习器来完成学习任务&#xff0c;有时也被称为多分类器系统&#xff0c;基于委员会的学习。 同质”集成“&#xff1a;只包含同种类型的个体学习器&#xff0c;同质集成中的个体学习器亦称“基学习器”&#xff0…
阅读更多...
C# winforms 使用菜单和右键菜单

C# winforms 使用菜单和右键菜单

初级代码游戏的专栏介绍与文章目录-CSDN博客 我的github&#xff1a;codetoys&#xff0c;所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。 这些代码大部分以Linux为目标但部分代码是纯C的&#xff0c;可以在任何平台上使用。 源码指引&#xff1a;github源…
阅读更多...
累加求和-C语言

累加求和-C语言

1.问题&#xff1a; 计算123……100的和&#xff0c;要求分别用while、do while、for循环实现。 2.解答&#xff1a; 累加问题&#xff0c;先后将100个数相加。要重复进行100次加法运算&#xff0c;可以用循环结构来实现。重复执行循环体100次&#xff0c;每次加一个数。 3.代…
阅读更多...
【C++掌中宝】C++ 中的空指针救世主——nullptr

【C++掌中宝】C++ 中的空指针救世主——nullptr

文章目录 1. 什么是 NULL&#xff1f;2. NULL 在 C 和 C 中的区别3. C11 引入 nullptr 的原因4. nullptr 与 NULL 的区别5. nullptr 的应用场景6. 模拟 nullptr 的实现7. 总结结语 1. 什么是 NULL&#xff1f; 在 C 和 C 编程中&#xff0c;NULL 常用于表示空指针&#xff0c;…
阅读更多...
如何修改音频的音量增益

如何修改音频的音量增益

一、前言 在开发音频相关的功能&#xff08;比如说语音通话、播放音乐&#xff09;时&#xff0c;经常会遇到音量太小的问题&#xff0c;这时候就需要我们对原始数据进行处理。本文将介绍如何通过修改原始音频数据来增加增益&#xff0c;本文包含如下内容&#xff1a; 1.音频数…
阅读更多...
【Java】虚拟机（JVM）内存模型全解析

【Java】虚拟机（JVM）内存模型全解析

目录 一、运行时数据区域划分 版本的差异&#xff1a; 二、程序计数器 程序计数器主要作用 三、Java虚拟机 1. 虚拟机运行原理 2. 活动栈被弹出的方式 3. 虚拟机栈可能产生的错误 4. 虚拟机栈的大小 四、本地方法栈 五、堆 1. 堆区的组成&#xff1a;新生代老生代 …
阅读更多...
速通LLaMA3：《The Llama 3 Herd of Models》全文解读

速通LLaMA3：《The Llama 3 Herd of Models》全文解读

文章目录 概览论文开篇IntroductionGeneral OverviewPre-TrainingPre-Training DataModel ArchitectureInfrastructure, Scaling, and EfficiencyTraining Recipe Post-TrainingResultsVision ExperimentsSpeech Experiments⭐Related WorkConclusionLlama 3 模型中的数学原理1…
阅读更多...
目标检测系列（一）什么是目标检测

目标检测系列（一）什么是目标检测

目录 一、相关名词解释 二、目标检测算法 三、目标检测模型 四、目标检测应用 五、目标检测数据集 六、目标检测常用标注工具 一、相关名词解释 关于图像识别的计算机视觉四大类任务&#xff1a; 分类&#xff08;Classification&#xff09;&#xff1a;解决“是什么&…
阅读更多...
【LLM开源项目】LLMs-微调框架-LLaMA-Factory入门指南v3.0

【LLM开源项目】LLMs-微调框架-LLaMA-Factory入门指南v3.0

【#】SFT 训练 项目地址&#xff1a;https://llamafactory.readthedocs.io/zh-cn/latest/getting_started/sft.html 可以使用以下命令进行微调&#xff1a; llamafactory-cli train examples/train_lora/llama3_lora_sft.yamlexamples/train_lora/llama3_lora_sft.yaml 提供…
阅读更多...
车辆识别数据集，图片数量20500，模型已训练200轮

车辆识别数据集，图片数量20500，模型已训练200轮

车辆识别数据集&#xff08;Vehicle Recognition Dataset, VDRD&#xff09; 摘要 VDRD 是一个专为车辆识别设计的大规模数据集&#xff0c;它包含了20500张不同类型的汽车、货车、公交车以及其他类型车辆的图像。数据集提供了四种车辆类别&#xff1a;汽车、货车、其他车辆和…
阅读更多...
单片机原理及应用

单片机原理及应用

单片机原理 一、单片机概述1.1 各种单片机系列1.2嵌入式处理器1.2.1 嵌入式DSP1.2.2 嵌入式微处理器 二、AT89S522.1 硬件组成2.2 引脚功能2.2.1 电源、时钟引脚2.2.2 控制引脚2.2.3 并行I/O口引脚 2.3 AT89S52单片机的CPU2.3.1 运算器2.3.2 控制器 2.4 AT89S52单片机的存储器结…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023