首页 > 其他 > 详细

使用echarts实现环图,环图中间动态数据(代码案例)

时间:2021-06-05 18:31:35      阅读:14      评论:0      收藏:0      [点我收藏+]

话不多说,直接上代码(可以直接复制即可使用):

图例:

技术分享图片
//环图
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) { }); }

 

使用echarts实现环图,环图中间动态数据(代码案例)

原文:https://www.cnblogs.com/wdyjt/p/14852673.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!