会呼吸的环形(是群里大神分享的,在这里进行记录)
配置项如下
var changeNum = 60
var addNum = 0
var option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['40%', '60%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: false,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' }
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
setInterval(() => {
if (addNum >= 20) {
addFlag = false
} else if (addNum <= 0) {
addFlag = true
}
if (addFlag) {
addNum++
} else {
addNum--
}
changeNum = 60 + addNum
option.series[0].radius = ['40%', changeNum + '%']
myChart.setOption(option);
}, 100)