怎么在一个页面展示两个不一样可视化图

在一个页面上展示两个不一样的可视化图表通常需要利用前端技术，比如HTML、CSS和JavaScript库（如D3.js、ECharts、Highcharts等）。以下是简单的步骤：

1. **引入库**：首先，你需要在你的项目中引入适合的图表库，例如如果你选择的是ECharts，可以添加`<script>`标签从CDN引入。

<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>

2. **创建容器**：在HTML中为每个图表创建独立的div元素，并给它们分配独特的ID，以便于你在JavaScript中引用它们。

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

3. **初始化图表**：在JavaScript里，分别为每个图表实例化一个ECharts对象，并设置各自的数据和配置选项。

// 对应第一个图表
var chart1 = echarts.init(document.getElementById('chart1'));

// 对应第二个图表
var chart2 = echarts.init(document.getElementById('chart2'));

// 分别设置两个图表的数据和配置...

4. **数据和配置**：根据你的需求，准备两个图表所需的数据显示格式，如柱状图可能需要x轴数据和y轴数据，折线图可能需要一系列的时间序列点。然后，对每个图表设置不同的配置，比如图表类型、标题、颜色等。

5. **渲染图表**：最后，调用`setOption()`方法将数据和配置传给图表进行渲染。

chart1.setOption({
    // 第一个图表的具体配置
});

chart2.setOption({
    // 第二个图表的具体配置
});