用echarts畫圓環圖,顯示進度條效果
阿新 • • 發佈:2019-01-27
要實現類似於下圖的效果,開始用的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);
顯示效果: