echarts 饼图修改为圆环,并在中心位置显示标题及数据,示例代码
this.chart.setOption({
title: {
text: this.title
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
series: [
{
name: this.title,
type: 'pie',
selectedMode: 'single',
radius: ['50%', '70%'],
clockwise: false,
label: {
normal: {
position: 'outside',
formatter: '{b}\n{c}GB ({d}%)'
}
},
// 区块间缝隙
itemStyle: {
normal: {
borderWidth: 3, // 间距的宽度
borderColor: '#fff', //背景色
}
},
data: [
{ value: 65, name: '使用' },
{ value: 15, name: '未使用' }
]
}
],
graphic: { // 添加原生图形元素组件
elements: [{
type: 'text', // 组件类型
left: 'center', //定位
top: '43%', // 定位
style: { // 样式
text: '容量', //文字
fontSize: 13, //文字大小
textAlign: 'center', //定位
width: 30,
height: 30,
fill: 'darkgray' // 字体颜色
}
},
{
type: 'text',
left: 'center',
top: '52%',
style: {
text: '80GB',
fontSize: 18,
textAlign: 'center',
width: 30,
height: 25,
fill: '#3BA5D9'
}
}]
}
})
