效果图:
1、引入插件:vue中使用echarts
2、使用:
<div class="pie-chart" :style="{height:172+'px'}">
<IEcharts
:option="pieOption"
:resizable="true" 开启自适应
/>
</div>
参考option:
const handred = 100
const point = 0
pieOption: {
title: {
text: point + '%',
x: 'center',
y: 'center',
textStyle: {
fontWeight: 'normal',
color: 'white',
fontSize: '25'
}
},
tooltip: {
formatter: function(params) {
if (params.name == '稼动率') {
return params.name + ':' + params.percent + ' %'
} else {
return ''
}
}
},
legend: {
show: false,
itemGap: 12,
data: ['稼动率', '剩余']
},
series: [{
name: 'circle',
type: 'pie',
clockWise: true,
radius: ['65%', '85%'],
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
},
hoverAnimation: false,
data: [{
value: point,
name: '稼动率',
itemStyle: {
normal: {
color: { // 颜色渐变
colorStops: [{
offset: 0,
color: '#4FADFD' // 0% 处的颜色
}, {
offset: 1,
color: '#3b5bdc' // 100% 处的颜色1
}]
},
label: {
show: false
},
labelLine: {
show: false
}
}
}
}, {
name: '剩余',
value: handred - point,
itemStyle: {
normal: {
color: '#3e4657'
}
}
}]
}]
}