const seriesData = [{ color: `#72D5FF`, value: 20, name: '防疫工作' },{ color: `#72A2FF`, value: 30, name: '安全管理' },{ color: `#72FFA2`, value: 14, name: '機(jī)具設(shè)備'},{ color: `#FFE872`, value:11, name: '現(xiàn)場安全' },{ color: `#FFC772`, value:5, name: '消防安全' },{ color: `#FF7272`, value: 34, name: '臨時用電'},{ color: `#E372FF`, value: 62, name: '文明施工' }, ];option = {polar: {center: ['50%', '50%'],radius: [50, '80%'],},angleAxis: {min:0,max: 100,startAngle: 90,clockwise:false,axisLine: {show: false,},axisTick: {show: false,},axisLabel: {show: false,},clockWise: false,splitLine: {show: false,},z:10,},radiusAxis: {type: 'category',inverse: false,axisLabel: {inside: true,formatter(value, index) {return `${seriesData[index].value }%`;},align: 'left',margin: -5,interval: 0, // 強(qiáng)制顯示所有},axisTick: {show: false, // 是否顯示坐標(biāo)軸刻度},axisLine: {show: false, // 是否顯示坐標(biāo)軸軸線},z: 100,data: seriesData.map(item => item.name),},series: [{type: 'bar',data: seriesData.map(item => item.value),coordinateSystem: 'polar',itemStyle: {color(params) {return seriesData[params.dataIndex].color;},},labelLayout(params) {return {x: 150,y: 150,verticalAlign: 'middle',align: 'center'}},emphasis: {label: {show: true,fontSize: '40',fontWeight: 'bold',formatter:(params)=>{return `{name|${seriesData[params.dataIndex].name}}\n{value|${seriesData[params.dataIndex].value}%}`;},rich: {value: {color: 'inherit',},name: {color: 'inherit',},},},},stack: 'a',},{type: 'bar',data: seriesData.map(item => 75- item.value),coordinateSystem: 'polar',itemStyle: {color: '#E3F0FF',},emphasis: {disabled : true},stack: 'a'}] };

總結(jié)

以上是生活随笔為你收集整理的echarts实现多进度环状图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。