echarts饼图自动动画_echarts饼图 外圈转动动画 pie

就是这个东西，会围着饼图转动

准备：两个div，一个装饼图，一个装那个转圈的。。。这里就只写转圈的了，饼图就不写了

js代码：

showpieLinex();

function showpieLinex(){

var myChartLine = echarts.init(document.getElementById('toprightviewLines'));

var tips = 0;

var m=0;

var mm=1;

function loading() {

return [

{

value: tips,

itemStyle: {

normal: {

color: 'rgba(0,0,0,0)',

}

}

},

{

value: m,

itemStyle: {

normal: {

borderWidth: 5,

borderColor: {

type: 'linear',

x: 0,

y: 0,

x2: 0,

y2: 4,

colorStops: [{

offset: 0,

color: 'rgba(255,255,255,0.7)' // 0% 处的颜色

},{

offset: 0.3,

color: 'rgba(255,255,255,1)' // 0% 处的颜色

},{

offset: 0.6,

color: 'rgba(255,255,255,1)' // 0% 处的颜色

},{

offset: 0.8,

color: 'rgba(255,255,255,1)' // 0% 处的颜色

},{

offset: 1,

color: 'rgba(255,255,255,1)' // 100% 处的颜色

}],

globalCoord: false,

},

color: 'rgba(255,255,255,0)',

shadowBlur: 30,

shadowColor: 'rgba(255,255,255,1)'

}

}

}, {

value: 100 - tips,

itemStyle: {

normal: {

color: 'rgba(0,0,0,0)',

}

}

}];

}

setInterval(function() {

if (tips == 100) {

tips = 0;

m=0;

}else if(tips<=10){

++tips;

++m

}else if(tips>=90){

++tips;

--m

}else{

++tips;

}

myChartLine.setOption({

animation:false,

animationThreshold:100,

animationDurationUpdate: function (idx) {

// 越往后的数据延迟越大

return idx * 1000;

},

series: [{

name: 'loading',

type: 'pie',

radius: ['66%', '68%'],

center: ['50%', '50%'],

hoverAnimation: false,

label: {

normal: {

show: false,

}

},

data: loading()

}]

})

}, 50);

}