echarts画饼环状饼图相关参数配置

时间:2022-02-09 10:46:02

  今天做页面的时候用到了环状饼图,大家都知道echarts的API文档看起来实在费劲,折腾了半天才画出来我想要的饼图,把我用到的参数配置分享给大家,希望能帮到和我一样的对echarts不是那么熟悉的童鞋。直接上代码:

 var option = {
series: [
{
type:'pie',
// 第一个参数是内圆半径,第二个参数是外圆半径,相对饼图的宿主div大小
radius: ['40%', '50%'],
avoidLabelOverlap: false,
// 禁用饼状图悬浮动画效果
animation: false,
      
label: {
normal: {
// 这里的竖线前面的b 和 per是相应参数的别名(我理解为别名),对应下面rich属性里的b和per
formatter: '{b|{b}:}{c} ({per|{d}%})',
backgroundColor: '#eee',
borderColor: '#aaa',
borderWidth: 1,
padding: 5,
borderRadius: 4,
rich: {
b: {
fontSize: 8,
lineHeight: 15
},
per: {
align: 'center'
}
}
}
},
data:[
{value:1432, name:'合格'},
{value:500, name:'不合格'}
]
}
]
}

大体效果是这样的:

echarts画饼环状饼图相关参数配置

  

比较简陋,如有错误,欢迎指正!!