多个echarts图表的引入
时间: 2023-06-28 13:12:12 浏览: 61
如果你需要在同一个页面中引入多个 ECharts 图表,可以按照以下步骤进行操作:
1. 在 HTML 页面中引入 ECharts 的 JavaScript 文件。可以使用官方提供的 CDN 地址,也可以下载到本地进行使用。
```html
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
```
2. 在 JavaScript 中,创建多个 DOM 元素,用于渲染不同的图表。
```javascript
var chart1 = document.createElement('div');
var chart2 = document.createElement('div');
```
3. 使用 ECharts 的 `init` 方法,将图表渲染到各自的 DOM 元素中。
```javascript
var myChart1 = echarts.init(chart1);
var myChart2 = echarts.init(chart2);
```
4. 分别为每个图表设置配置项和数据,并调用 `setOption` 方法渲染图表。
```javascript
// 配置项和数据
var option1 = { ... };
var data1 = { ... };
var option2 = { ... };
var data2 = { ... };
// 渲染图表
myChart1.setOption(option1);
myChart1.setOption(data1);
myChart2.setOption(option2);
myChart2.setOption(data2);
```
5. 将渲染好的图表添加到页面中。
```javascript
document.body.appendChild(chart1);
document.body.appendChild(chart2);
```
这样就可以在同一个页面中引入多个 ECharts 图表了。