使用echarts實現環圖,環圖中間動態數據(代碼案例)


話不多說,直接上代碼(可以直接復制即可使用):

圖例:

//環圖
function showPie2() {
/* $.ajax({ url: ''+ctx+'/lastJob/find', type: "POST", dataType:'json', async: false, success: function(data){ for(var i=0;i<data.length;i++){ var array = data[i] } e=array.YCLBT; } }); */ var e=45; //可以ajax傳入e的值
var option = { title:{ show:true, text:e+'%' +"\n"+"成功占比率" , //圖中間的值 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: ['55%', '75%'], 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:''} //白色環的值 ] }, color:[ new echarts.graphic.LinearGradient(120, 120, 120, 1, [{offset: 1, color: 'transparent'}, {offset: 1, color: '#cb3bff'}]) ,'white'] //設置環的顏色 ,坐標控制漸變方向 } var chart = echarts.init(document.getElementById("showPie2")); chart.setOption(option,true); //圖形自適應 window.addEventListener("resize",function(){ chart.resize(); }); chart.off('click'); chart.on('click', function (params) { }); }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM