一、头部引用文件

 <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        .chart-container {
            width: 600px;
            height: 400px;
            margin: 20px auto;
        }
    </style>

二、HTML部分

<!-- 第一个图表容器 -->
    <div id="chart1" class="chart-container"></div>
    
    <!-- 第二个图表容器 -->
    <div id="chart2" class="chart-container"></div>
    
    <!-- 第三个图表容器 -->
    <div id="chart3" class="chart-container"></div>

三、JS部分

 <script>
        // 初始化所有图表
        document.addEventListener('DOMContentLoaded', function() {
            // 图表1 - 柱状图
            const chart1 = echarts.init(document.getElementById('chart1'));
            chart1.setOption({
                title: { text: '柱状图示例' },
                tooltip: {},
                xAxis: {
                    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            });
            
            // 图表2 - 折线图
            const chart2 = echarts.init(document.getElementById('chart2'));
            chart2.setOption({
                title: { text: '折线图示例' },
                tooltip: {},
                xAxis: {
                    type: 'category',
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line'
                }]
            });
            
            // 图表3 - 饼图
            const chart3 = echarts.init(document.getElementById('chart3'));
            chart3.setOption({
                title: { text: '饼图示例' },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            { value: 1048, name: '搜索引擎' },
                            { value: 735, name: '直接访问' },
                            { value: 580, name: '邮件营销' },
                            { value: 484, name: '联盟广告' },
                            { value: 300, name: '视频广告' }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            });
            
            // 响应式调整 - 当窗口大小变化时，所有图表都重新调整大小
            window.addEventListener('resize', function() {
                chart1.resize();
                chart2.resize();
                chart3.resize();
            });
        });
    </script>