echarts 多图表绘制

ECharts 是一款非常流行的开源可视化库，它能够帮助开发者创建各种复杂的图表，包括线图、柱状图、饼图、散点图等。在同一个页面上同时绘制多个 ECharts 图表是很常见的需求，ECharts 提供了多种方式来实现这一点。

**1. 使用嵌套容器**：
你可以为每个图表创建独立的 HTML 元素，如 `<div>`，然后分别为它们设置 ECharts 实例。例如：

<div id="chart1"></div>
<div id="chart2"></div>

然后在 JavaScript 中分别初始化：

var chart1 = echarts.init(document.getElementById('chart1'));
var chart2 = echarts.init(document.getElementById('chart2'));

**2. 使用同一个画布**：
如果你想让图表共享同一个画布，可以在一个大的容器内创建 ECharts 实例，并通过 API 设置各自的数据和配置：

<div id="container"></div>

JavaScript:

var myChart = echarts.init(document.getElementById('container'));
myChart.setOption({
    // 第一个图表的配置
    series: [...]
});
// 添加第二个图表
myChart.addSeries({ ... });

**3. 使用 Grid 布局**：
ECharts 的 `grid` 属性可以控制图表之间的间距和布局，你可以利用这个特性组合多个图表：

myChart.setOption({
    grid: {
        left: '30%', // 图表左边界
        right: '10%', // 图表右边界
        bottom: '30%' // 底部留白
    },
    xAxis: [...], yAxis: [...],
    series: [...]
});