Echarts圆形占比图改良版

在工作中经常遇到一些与百分比相关的图表，本文描述的是一个由Echarts圆环+仪表图改良后的占比图表。

设计稿：

实现效果：

画图思路：圆环+仪表图

常规饼图，圆环图：

存在的问题：无法像设计稿那样均分成 36 份，因为其是按照数据的份数进行分割的

常规的仪表图：

仪表图特点：可以将圆进行任意整数份数的切分

结合圆环特点和仪表图特点进行 Echarts option 编码：

const option = {title: {text: value + '%',x: 'center',y: 'center',textStyle: {fontWeight: 'normal',color: colorInit[0],fontSize: '16',},// subtext: '副标题',subtextStyle: {fontSize: 18,},},color: colorInit[1],series: [{name: '',type: 'pie',clockWise: true,radius: ['68%', '80%'],// 提高表盘组件优先级z: 0,itemStyle: {normal: {label: {show: false,},labelLine: {show: false,},},},hoverAnimation: false,data: [{value: value,name: '',itemStyle: {normal: {color: colorInit[0],label: {show: false,},labelLine: {show: false,},},},},{name: '',value: 100 - value,},],},{name: '分割线',type: 'gauge',startAngle: 0,endAngle: 360,splitNumber: 36,hoverAnimation: true,axisTick: {show: false,},splitLine: {length: 60,lineStyle: {width: 3,color: '#fff',},},axisLabel: {show: false,},axisLine: {lineStyle: {opacity: 0,},},detail: {show: false,},},],
};

Echarts圆形占比图改良版相关推荐

MySQL怎么运行的系列（二）Innodb缓冲池 buffer pool 和改良版LRU算法
本系列文章目录展开/收起 MySQL怎么运行的系列(一)mysql体系结构和存储引擎 MySQL怎么运行的系列(二)Innodb缓冲池 buffer pool 和改良版LRU算法 MySQL怎么运 ...
layui + echarts股票K线图（含案例、代码、截图）（转载篇）
文章目录 layui + echarts股票K线图(含案例.代码.截图)(转载篇) 一.案例.代码.截图经验 · 补充说明: layui + echarts股票K线图(含案例.代码.截图)(转载篇) ...
针对文字加密的简单 JS 加密算法 --进制乱序法改良版
在上一篇文章<普通 http 网络下数据的安全传输(设计原理)>中,我曾经推荐浏览器和服务器之间的加密通讯宜采用<几个文字加密的 JS 简洁算法(续2)--进制乱序法>中提及的 ...
目标检测voc转coco改良版
<目标检测voc转coco改良版> 我训练目标检测的一般流程:1.labelme标注:2.labelme转voc,对img和voc进行数据增广:3.voc转coco:4.计算图片的RG ...
C++约瑟夫环改良版
约瑟夫环:约瑟夫环(约瑟夫问题)是一个数学的应用问题:已知n个人(以编号1,2,3...n分别表示)围坐在一张圆桌周围.从编号为k的人开始报数,数到m的那个人出列:他的下一个人又从1开始报数,数到m的 ...
NumberRunningTextView改良版
转载请注明出处:http://blog.csdn.net/Chay_Chan/article/details/73381863 ###NumberRunningTextView改良版在我曾写过的 ...
数据可视化项目---订单分类占比图
效果如下订单分类占比图-组件代码  <template><div class="com-container">&l ...
Echarts中饼状图的使用
先上效果图: 1.首先去官网下载echarts.min.js,并引入项目 2.为 ECharts 准备一个具备大小(宽高)的容器 3.js构造饼图,js代码如下: var myChart = ech ...
echarts社区热词图、echart金字塔图
目录热词图+会轻盈的浮动金字塔占比图三层金字塔图带label的4层金字塔图+背影普通三层三种颜色金字塔热词图+会轻盈的浮动 let colorList = ['#CF4645','#B58 ...

Echarts圆形占比图改良版

Echarts圆形占比图改良版相关推荐

最新文章

热门文章