一张html画面中,如何引入两个pyecharts画布
时间: 2023-06-02 22:03:04 浏览: 58
1. 首先需要在HTML页面中引入pyecharts的相关库文件,包括echarts.min.js和pyecharts.min.js。
2. 创建两个div容器,分别用于展示两个pyecharts图表。
3. 在JavaScript中,创建两个pyecharts实例,分别使用不同的div容器和配置项。
4. 调用pyecharts实例的render方法,将图表渲染到相应的div容器中。
示例代码:
HTML部分:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>引入两个pyecharts画布</title>
<!-- 引入pyecharts的相关库文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/pyecharts/1.9.0/pyecharts.min.js"></script>
</head>
<body>
<!-- 创建两个div容器 -->
<div id="chart1" style="width: 600px;height:400px;"></div>
<div id="chart2" style="width: 600px;height:400px;"></div>
<!-- 引入JavaScript代码 -->
<script src="charts.js"></script>
</body>
</html>
```
JavaScript部分(charts.js):
```javascript
// 创建第一个pyecharts实例
var chart1 = echarts.init(document.getElementById('chart1'));
var option1 = {
// 配置项1
};
chart1.setOption(option1);
chart1.render();
// 创建第二个pyecharts实例
var chart2 = echarts.init(document.getElementById('chart2'));
var option2 = {
// 配置项2
};
chart2.setOption(option2);
chart2.render();
```