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,
},
},
],
};