echarts饼图实时更新
时间: 2023-11-17 08:01:40 浏览: 39
要实现echarts饼图的实时更新,可以通过以下步骤实现:
1.在HTML文件中引入echarts.js文件:<script src="./echarts.js"></script>
2.创建一个饼图实例,并设置好相应的配置项,例如:
```
var myChart = echarts.init(document.getElementById('main'));
var option = {
title : {
text: '饼图实时更新示例',
subtext: '数据来自后台'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: '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:'搜索引擎'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
```
3.使用定时器定时更新数据,例如:
```
setInterval(function () {
// 通过ajax请求后台数据
var data = [
{value: Math.random()*200, name:'直接访问'},
{value: Math.random()*200, name:'邮件营销'},
{value: Math.random()*200, name:'联盟广告'},
{value: Math.random()*200, name:'视频广告'},
{value: Math.random()*200, name:'搜索引擎'}
];
// 更新数据
myChart.setOption({
series: [{
data: data
}]
});
}, 2000);
```
这样就可以实现echarts饼图的实时更新了。