一个页面多个echarts折线图
时间: 2023-07-25 08:35:50 浏览: 254
web单页面实现多个echarts图表铺满整个div(柱状图,折线图,饼形图……)
4星 · 用户满意度95%
可以在同一个页面上使用多个echarts实例来绘制多个折线图,具体步骤如下:
1. 在HTML文件中引入echarts库。
```html
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script>
```
2. 在HTML文件中创建多个div容器,用于容纳不同的echarts实例。
```html
<div id="chart1" style="width: 600px;height:400px;"></div>
<div id="chart2" style="width: 600px;height:400px;"></div>
```
3. 在JavaScript文件中分别实例化多个echarts对象,并设置不同的配置项和数据。
```javascript
// 实例化echarts对象
var chart1 = echarts.init(document.getElementById('chart1'));
var chart2 = echarts.init(document.getElementById('chart2'));
// 设置配置项和数据
var option1 = {
// 配置项1
series: [{
type: 'line',
data: [1, 2, 3, 4, 5]
}]
};
var option2 = {
// 配置项2
series: [{
type: 'line',
data: [5, 4, 3, 2, 1]
}]
};
// 渲染图表
chart1.setOption(option1);
chart2.setOption(option2);
```
4. 在HTML文件中引入JavaScript文件,并在页面加载完成后执行上述代码。
```html
<script src="path/to/your/javascript/file.js"></script>
<script>
// 页面加载完成后执行代码
$(document).ready(function() {
// 上述代码
});
</script>
```
这样就可以在同一个页面上绘制多个echarts折线图了。
阅读全文