利用echarts 显示图片信息

news2024/11/22 21:22:54

当前有个需求,需要对其进行相关统计,这里我们采用jquery3.6 与echarts.js 做相关图表,不解释,直接上代码吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts Line Charts Side by Side</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <style>
        /* 使用 flexbox 布局使图表并排 */
        #chart-container {
            display: flex;
            justify-content: space-around;  /* 控制图表之间的间距 */
        }
        .chart {
            width: 45%;  /* 每个图表占 45% 的宽度 */
            height: 400px;
        }
    </style>
</head>
<body>
    <!-- 包含两个图表的容器 -->
    <div id="chart-container">
        <!-- 第一个图表容器 -->
        <div id="main1" class="chart"></div>
        
        <!-- 第二个图表容器 -->
        <div id="main2" class="chart"></div>
    </div>

    <script>
        // 初始化第一个 echarts 实例
        var myChart1 = echarts.init(document.getElementById('main1'));

        // 初始化第二个 echarts 实例
        var myChart2 = echarts.init(document.getElementById('main2'));

        // 第一个图表：使用 AJAX 获取数据
        function fetchDataForChart1() {
            $.ajax({
                url: 'get_chart_data.php',  // 请求的 PHP 接口
                method: 'GET',
                dataType: 'json',
                success: function (data) {
                    var option1 = {
                        title: {
                            text: '第一个图表（通过 AJAX 加载数据）'
                        },
                        tooltip: {},
                        xAxis: {
                            type: 'category',
                            data: data.categories
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            name: '销量',
                            type: 'line',
                            data: data.series,
                            label: {
                                show: true,
                                position: 'top'
                            }
                        }]
                    };
                    myChart1.setOption(option1);
                },
                error: function () {
                    var demoData1 = {
                        categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                        series: [150, 230, 224, 218, 135, 147, 260]
                    };
                    var option1 = {
                        title: {
                            text: '第一个图表（使用默认数据）'
                        },
                        tooltip: {},
                        xAxis: {
                            type: 'category',
                            data: demoData1.categories
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            name: '销量',
                            type: 'line',
                            data: demoData1.series,
                            label: {
                                show: true,
                                position: 'top'
                            }
                        }]
                    };
                    myChart1.setOption(option1);
                }
            });
        }

        // 第二个图表：使用不同的数据
        function fetchDataForChart2() {
            var demoData2 = {
                categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                series: [180, 210, 190, 240, 160, 170, 220]
            };
            var option2 = {
                title: {
                    text: '第二个图表（使用默认数据）'
                },
                tooltip: {},
                xAxis: {
                    type: 'category',
                    data: demoData2.categories
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '销量',
                    type: 'line',
                    data: demoData2.series,
                    label: {
                        show: true,
                        position: 'top'
                    }
                }]
            };
            myChart2.setOption(option2);
        }

        // 加载第一个图表数据
        fetchDataForChart1();
        // 加载第二个图表数据
        fetchDataForChart2();
    </script>
</body>
</html>

效果图如下图所示: