Echarts动态加载柱状图的实例
时间: 2023-08-22 18:03:36 浏览: 65
好的,这里是一个简单的 Echarts 动态加载柱状图的实例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Echarts动态加载柱状图的实例</title>
<!-- 引入 Echarts 的主文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<!-- 定义一个 DOM 节点作为图表容器 -->
<div id="chart" style="width: 600px; height: 400px;"></div>
<script>
// 初始化图表
var chart = echarts.init(document.getElementById('chart'));
// 定义初始数据
var data = [10, 20, 30, 40, 50];
// 定义图表的配置项和数据
var option = {
title: {
text: '动态加载柱状图'
},
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {
type: 'value'
},
series: [
{
name: '数据',
type: 'bar',
data: data
}
]
};
// 使用刚指定的配置项和数据显示图表
chart.setOption(option);
// 模拟异步加载数据
setTimeout(function() {
// 更新数据
data = [20, 30, 40, 50, 60];
// 更新图表
chart.setOption({
series: [
{
data: data
}
]
});
}, 2000);
</script>
</body>
</html>
```
在这个例子中,我们首先定义了一个 `div` 元素作为图表容器,然后使用 `echarts.init` 方法初始化了一个 Echarts 实例,并定义了初始数据和图表的配置项。接着,我们使用 `chart.setOption` 方法将配置项和数据应用到图表中,显示出了一个初始的柱状图。
接下来,我们使用 `setTimeout` 方法模拟异步加载数据的过程,并更新了数据。最后,我们再次使用 `chart.setOption` 方法更新了图表的数据,这样就实现了动态加载柱状图的效果。