配置项如下
var centerText;
var legendData = ['0-2月', '2-8月', '8-14月', '14-18月']
var option
var cowNum = [4421, 3421, 2000, 1000]
var cowName = ['奶公犊', '普通犊牛', '架子牛', '育肥牛']
var currentIndex = -1
option = {
title: {
text: centerText,
x: 'center',
y: '47%',
textStyle: {
fontWeight: 'normal',
fontSize: 22
}
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
x: 'left',
data: legendData
},
series: [{
name: '访问来源',
type: 'pie',
selectedMode: 'single',
radius: ['20%', '30%'],
label: {
normal: {
position: 'inner'
}
},
labelLine: {
normal: {
show: false
}
},
data: [{
value: 35880113,
name: '0-2月'
}, {
value: 37846064,
name: '2-8月'
}, {
value: 41374640,
name: '8-14月'
}, {
value: 108944238,
name: '14-18月'
}]
}, {
name: '访问来源',
type: 'pie',
radius: ['40%', '55%'],
label: {
normal: {
show: true,
position: 'outside',
formatter: '{c}元',
textStyle: {
fontSize: 12
}
},
emphasis: {
textStyle: {
fontSize: 16
}
}
},
data: [{
value: 108944238,
name: '0-2月'
}, {
value: 81374640,
name: '2-8月'
}, {
value: 41374640,
name: '8-14月'
}, {
value: 78944238,
name: '14-18月'
}]
}]
}
setInterval(function() {
if (typeof(option) === 'undefined') {
return
}
var dataLen = option.series[0].data.length;
// 取消之前高亮的图形
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: currentIndex
});
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 1,
dataIndex: currentIndex
});
currentIndex = (currentIndex + 1) % dataLen;
centerText = cowName[currentIndex] +'\n' + cowNum[currentIndex] + '头 \n'
// 高亮当前图形
myChart.setOption(option, true)
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: currentIndex
});
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 1,
dataIndex: currentIndex
});
}, 1000);