Echarts动态加载柱状图的实例
时间: 2024-01-24 11:49:00 浏览: 16
以下是一个使用Echarts库动态加载柱状图的示例:
HTML代码:
```
<div id="chart" style="width: 600px;height:400px;"></div>
```
JavaScript代码:
```javascript
// 初始化Echarts实例
var myChart = echarts.init(document.getElementById('chart'));
// 设置图表的配置项和数据
var option = {
title: {
text: '动态加载柱状图'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
// 模拟异步加载数据
setTimeout(function () {
var data = {
categories: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
series: [{
name: '销量',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 更新图表的数据
myChart.setOption({
xAxis: {
data: data.categories
},
series: [{
name: '销量',
data: data.series[0].data
}]
});
}, 1000);
```
在上述示例中,我们首先初始化了一个Echarts实例,并设置了图表的配置项和数据。然后,我们使用setOption方法将图表显示在页面上。
接着,我们模拟了一个异步加载数据的操作,使用setTimeout方法延迟1秒钟后,更新图表的数据。在更新数据时,我们只需要调用setOption方法并更新xAxis和series的数据即可。这样就可以实现动态加载柱状图的效果了。