echarts饼图自动动画_echarts饼图定时自动切换

pie_chart.js文件内容如下

var domchart = document.getElementById("mychart");

var domtitle = document.getElementById("mytitle");

var myindex = 0;

var mycolor = ['red','green','purple','blue', 'black','pink'];

function DrawPieArea(drawdom, piedata,color, curIndex, titleDom) {

option = {

color:color,

series: [

{

type: 'pie',

radius: ['80%', '90%'],

avoidLabelOverlap: false,

label: {

normal: {

show: false,

position: 'center'

},

emphasis: {

show: true,

formatter: "{B|{c}}{L|人}\n{S|{d}%}",

textStyle: {

color: 'red',

rich:{

B: {

fontSize: 40,

fontWeight: 'bolder',

lineHeight:50,

},

S:{

fontSize: 20,

},

L:{

fontSize: 20

}

},

}

}

},

labelLine: {

normal: {

show: false

}

},

data: piedata

}

]

};

var chart_pie = echarts.init(drawdom);

chart_pie.setOption(option, true);

if(curIndex == null) {

chart_pie.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: 0});

if(titleDom) {

titleDom.text = piedata[0].name;

titleDom.style.color=color[0];

}

}

else {

chart_pie.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: curIndex});

if(titleDom) {

titleDom.innerHTML = piedata[curIndex].name;

titleDom.style.color=color[curIndex];

}

setInterval(function () {

var dataLen = piedata.length;

// 取消高亮

chart_pie.dispatchAction({type: 'downplay',seriesIndex: 0,dataIndex: curIndex});

curIndex = (curIndex + 1) % dataLen;

if(titleDom) {

titleDom.innerHTML = piedata[curIndex].name;

titleDom.style.color=color[curIndex];

}

//设置高亮

chart_pie.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: curIndex});

}, 3000);

}

}

var data = [

{ value: 3108, name: '18岁以下' },

{ value: 2348, name: '19~25岁' },

{ value: 1358, name: '26~30岁' },

{ value: 1548, name: '31~40岁'},

{ value: 1548, name: '41岁以上'},

{ value: 3350, name: '年龄不详'},

];

DrawPieArea(domchart, data, mycolor, myindex, domtitle);