html如何在一个网页显示多个echarts图表

可以使用 echarts 的 Grid 组件来实现在一个网页中显示多个图表。

首先，在 HTML 页面中添加一个 div 容器作为 echarts 的渲染区域，例如：

<div id="chart1" style="width: 50%; height: 400px;"></div>
<div id="chart2" style="width: 50%; height: 400px;"></div>

接着，在 JavaScript 中引入 echarts 库，创建两个 echarts 实例，并分别绑定到上述的两个 div 容器中。同时，使用 Grid 组件将这两个图表放在同一行中，代码示例如下：

// 引入 echarts 库
import echarts from 'echarts';

// 创建两个 echarts 实例
const chart1 = echarts.init(document.getElementById('chart1'));
const chart2 = echarts.init(document.getElementById('chart2'));

// 配置两个图表的选项
const option1 = { ... };
const option2 = { ... };

// 使用 Grid 组件将两个图表放在同一行中
const option = {
  grid: {
    top: '10%',
    left: '3%',
    right: '3%',
    bottom: '8%',
    containLabel: true
  },
  series: [
    {
      type: 'bar',
      data: option1
    },
    {
      type: 'line',
      data: option2
    }
  ]
};

// 将选项设置到图表实例中
chart1.setOption(option);
chart2.setOption(option);

在上述示例中，我们将两个图表的选项分别设置为 `option1` 和 `option2`，然后在 Grid 组件中将它们分别配置为柱状图和折线图，最后将整个选项设置到两个图表实例中。这样就可以在一个网页中显示多个 echarts 图表了。