Echarts实现环状半圆形饼图 Echarts实现环状半圆形饼图

实现效果
文章图片
源于截图实现代码

option = { backgroundColor: '#fff', title: { text: "设备告警", textStyle: { color: '#000', fontSize: 32, fontWeight: 'bold' }, left: 'center', top:100, bottom: '69%', itemGap: 60, }, tooltip: { show: false, }, color: ['#01dadc', '#23cea7', '#5096e0'], legend: { orient: 'vertical', x: 690, y:120, data:['危急','严重','一般'],}, series: [{ name: '一般', type: 'pie', //起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。 startAngle: 0, hoverAnimation: false, tooltip: { }, radius: ["30%", "47%"], center: ['50%', '80%'], label: { normal: { show: false, position: 'center', color: '#fff', formatter: function(params) { return params.value }, }, }, labelLine: { normal: { show: false } }, data: [{ value: 300, itemStyle: { normal: { color: "rgba(80,150,224,0)" } } }, { value: 270, itemStyle: { normal: { color: "rgba(80,150,224,1)" } }}, { value: 30, itemStyle: { normal: { color: "rgba(80,150,224,0.1)" } } },] },{ name: '严重', type: 'pie', startAngle: 0, radius: ['50%', '67%'], center: ['50%', '80%'], legendHoverLink: false, hoverAnimation: false, avoidLabelOverlap: false, label: { normal: { show: false, position: 'center' }, emphasis: { show: true, textStyle: { fontSize: '30', fontWeight: 'bold' } } }, labelLine: { normal: { show: false } }, data: [{ value: 300, itemStyle: { normal: { color: "rgba(35,206,167,0)" } } }, { value: 210, itemStyle: { normal: { color: "rgba(35,206,167,1)" } }}, { value: 90, itemStyle: { normal: { color: "rgba(35,206,167,0.1)" } } },] },{ name: '危急', type: 'pie', startAngle: 0, hoverAnimation: false, radius: ["70%", "87%"], center: ['50%', '80%'], label: { normal: { show: false, position: 'center' }, emphasis: { show: true, textStyle: { fontSize: '10', fontWeight: 'bold' } } }, labelLine: { normal: { show: false } }, data: [{ value: 300, itemStyle: { normal: { color: "rgba(1,218,220,0)" } } }, { value: 240, itemStyle: { normal: { color: "rgba(1,218,220,1)" } }}, { value: 60, itemStyle: { normal: { color: "rgba(1,218,220,0.1)" } } }, ] } ] };

【Echarts实现环状半圆形饼图】这里卿洋
愿喜??