要实现类似于下图的效果,开始用的css画出来的,感觉很复杂,换了echart省很多代码
直接上代码:
var e=80;
var Chart4 = echarts.init(document.getElementById('chart4'));
option = {
title:{
show:true,
text:e+'%',
x:'center',
y:'center',
textStyle: {
fontSize: '15',
color:'white',
fontWeight: 'normal'
}
},
tooltip: {
trigger: 'item',
formatter: "{d}%",
show:false
},
legend: {
orient: 'vertical',
x: 'left',
show:false
},
series:
{
name:'',
type:'pie',
radius: ['65%', '85%'],
avoidLabelOverlap: true,
hoverAnimation:false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: false
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:e, name:''},
{value:100-e, name:''}
]
}
};
Chart4.setOption(option);
显示效果: