echarts实现百分⽐进度图表展⽰（两种风格）类型⼀：完整圆环型
textstyle效果图
代码⽰例
function PercentPie(option){
this.backgroundColor = option.backgroundColor||'#ffffff';
this.fontSize        = option.fontSize||12;
this.domEle          = option.domEle;
this.value          = option.value;
this.name            = option.name;
this.title          = option.title;
}
PercentPie.prototype.init = function(){
var _that = this;
var option = {
backgroundColor:_that.backgroundColor,
color:_lor,
title: {
text: _that.title,
bottom:'5%',
left: 'center',
textStyle:{
color: '#777777',
fontStyle: 'normal',
fontWeight: 'normal',
fontSize: 18
}
},
series: [{
name: null,
type: 'pie',
radius: ['45%', '60%'],
center: ['50%', '45%'],
avoidLabelOverlap: false,
hoverAnimation:false,
label: {
normal: {
show: false,
formatter:'{c}%'
}
},
data: [{
value: _that.value,
name: null,
label:{
normal:{
show:true,
position: 'center',
textStyle: {
fontSize: _that.fontSize,
fontWeight: 'bold',
}
}
}
}
},
{
value: _that.value>=100?0:100-_that.value,                        name: null
}
]
}]
};
echarts.init(_that.domEle).setOption(option);
};
var option = {
value:'30%'.replace('%',''),//百分⽐，必填
name:'成功率',
title:'成功率',
backgroundColor:null,
color:['#ff4e4a','#f5f5f5'],
fontSize:20,
ElementById("domId")//必填
},percentPie = new PercentPie(option);
percentPie.init();
类型⼆：半圆型
效果图
代码⽰例
var color = ['rgba(0, 221, 255)','rgba(77, 119, 255)',
'rgba(241, 185, 19)','rgba(224, 110, 62)',
'rgb(255, 115, 111)','rgb(255, 46, 41)'];
var option = {
series: [{
type: 'pie',
radius: ['120%', '150%'],
center: ['50%', '90%'],
label: {
show: false,
},
startAngle: 180,
hoverOffset: 0, // ⿏标经过不变⼤
data: [{
value: '89.82%'.replace('%', '') * 0.01 * 200,
itemStyle: { // 颜⾊渐变
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: color[0]
}, {
offset: 1,
color: color[1]
}]
}
}
}, {
value: 200 - ('89.82%'.replace('%', '') * 0.01 * 200),                            itemStyle: {
color: '#12274d'
}
}, // 颜⾊#12274d
{
value: 200,
itemStyle: {
color: 'transparent'
}
} // 透明隐藏第三块区域
]
}]
};
var myechart = echarts.init($('#domId'));
myechart.setOption(option);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。