使用echarts快速实现多图表的制作

ECharts是一个强大的JavaScript数据可视化库，它非常适合快速创建各种图表，包括折线图、柱状图、饼图等。要快速实现多图表的制作，你可以按照以下步骤操作：

1. 引入ECharts库：首先，在HTML文件中引入ECharts的CDN链接，或者将它作为npm包引入到项目中。

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.0/echarts.min.js"></script>

2. 创建容器：为每个你要展示的图表指定一个独立的HTML元素，如`<div>`标签，并给它们赋予唯一的ID。

<div id="chart-line" style="width: 600px;height:400px;"></div>
<div id="chart-bar" style="width: 600px;height:400px;"></div>

3. 初始化图表：在JavaScript中，通过ECharts的API实例化图表并绑定到对应的容器上。对于每个图表，你可以设置不同的配置项。

// 对于线图
var lineChart = echarts.init(document.getElementById('chart-line'));

// 对于柱状图
var barChart = echarts.init(document.getElementById('chart-bar'));

4. 配置图表选项：例如，设置图表的数据源、坐标轴、标题等。

lineChart.setOption({
    title: {
        text: '线图示例'
    },
    xAxis: { data: ['A', 'B', 'C', 'D'] },
    yAxis: {},
    series: [
        { name: '数值', type: 'line', data: [120, 200, 150, 80] }
    ]
});

barChart.setOption({
    title: {
        text: '柱状图示例'
    },
    xAxis: { data: ['A', 'B', 'C', 'D'] },
    yAxis: {},
    series: [
        { name: '值', type: 'bar', data: [120, 200, 150, 80] }
    ]
});

5. 渲染图表：最后，调用图表的渲染方法`setOption`，将配置加载到图表中。

lineChart.show();
barChart.show();