echarts 圆环进度条
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
var value = 90; //当前进度
var maxvalue = 100; //进度条最大值
//指定图标的配置项和数据
var option = {
title: {
text: '合格率',
left: 'center'
// bottom:'0'
},
//饼图中间显示文字
graphic: {
type: 'text',
left: 'center',
top: 'center',
style: {
text: value + '%', //文字内容
// fill: "red",//文字颜色
fontSize: 50, //文字字号
fontWeight: '1000'
}
},
tooltip: {
trigger: 'item'
},
series: [
{
//第一张圆环
name: '生产率',
type: 'pie',
radius: ['50%', '80%'],
center: ['50%', '50%'],
// 隐藏指示线
labelLine: { show: false },
//隐藏圆环上文字
label: {
show: false
},
data: [
//value当前进度 + 颜色
{
name: '合格',
value: value,
itemStyle: {
normal: { color: '#dd5044' }
}
},
{
name: '不合格',
value: maxvalue - value,
itemStyle: {
normal: { color: '#ededed' }
}
}
]
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
option && myChart.setOption(option);
复制粘贴可以使用