在代码里详细说明
组件代码
<ve-ring
:after-set-option="setProgressChartOptions"
width="90px"
height="90px"
style="margin-left: 50px;"/>
js 代码
getdata () {
const res = await xxx();
this.getProgressEcharts();
},
setProgressChartOptions(charts) {
this.progressCharts = charts;
this.getProgressEcharts();
},
getProgressEcharts() {
const text = this.text; // 环内的文字
const color = this.gradientColor; //进度颜色
const score = this.score; // 进度数据
const option = {
tooltip: {
show: false, // 去除鼠标hover提示框
},
title: {
text: text,
x: 'center',
y: 'center',
textStyle: {
color: '#5f6988',
fontSize: 12,
},
},
series: [{
type: 'pie',
name: '名称',
radius: ['80%', '100%'], // 环的宽度
center: ['50%', '50%'],
hoverAnimation: false, // 鼠标hover高亮隐藏
label: {
normal: {
position: 'inner',
show: false,
},
},
data: [{
value: score,
itemStyle: {
normal: {
color: color,
},
label: {
show: false, // 去掉指示线
},
labelLine: {
show: false, // 去掉指示线
},
},
}, {
value: 100 - score,
itemStyle: {
normal: {
color: '#d3daf5',
},
label: {
show: false, // 去掉指示线
},
labelLine: {
show: false, // 去掉指示线
},
},
}],
}],
};
if (this.progressCharts) {
this.progressCharts.setOption(option);
}
},
