<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var app = {};
option = {
title:{
text:'饼图程序调用高亮示例',
left:'center'
},
tooltip:{
trigger:'item',
formatter:'{a}<br/>{b}:{c}{d}%'
},
legend:{
orient:'vertical', //图例列表的布局朝向。'horizontal''vertical'
left:'left',
data:['直接访问','邮件营销','联盟广告','视频广告','搜素引擎']
},
series:[
{
name:'访问来源',
type:'pie',
radius:'55%',
center:['50%','60%'],
data:[
{value:335,name:'直接访问'},
{value:310,name:'邮件营销'},
{value:234,name:'联盟广告'},
{value:135,name:'视频广告'},
{value:1548,name:'搜索引擎'},
],
emphasis:{
itemStyle:{
shadowBlur:10,
shadowOffsetX:0,
shadowColor:'rgba(0,0,0,0.5)'
}
}
}
]
};
app.currentIndex = -1;
setInterval(() => {
var dataLen = option.series[0].data.length;
//取消之前高亮的图形
myChart.dispatchAction({
type:'downplay',
seriesIndex:0,
dataIndex:app.currentIndex
});
app.currentIndex = (app.currentIndex + 1) % dataLen;
//高亮当前图形
myChart.dispatchAction({
type:'highlight',
seriesIndex:0,
dataIndex:app.currentIndex
});
//显示tooltip
myChart.dispatchAction({
type:'showTip',
seriesIndex:0,
dataIndex:app.currentIndex
})
}, 1000);
option && myChart.setOption(option);
</script>