PHP数据库提取数组到前端

想问一下 怎么把这些写成很简便的代码,并且有效在echars输出相对应得X轴,Y轴。主要想优化一下查询数据库代码 但有点困难

 $X_data = ["TK5-01","TK5-02","TK5-03","TK5-04","TK5-05"];
        foreach ($X_data as $key => $value) {
            $result = DB::table('instruments_tuokong')->select('variation')->orderBy('create_time', 'desc')->where('code', $value)->first();
            $Y_data[] = $result->variation;
            //var_dump($Y_data);die;
        $A_data = ["TK5-06","TK5-07","TK5-08","TK5-09","TK5-10"];
        foreach ($A_data as $key => $value) {
            $result = DB::table('instruments_tuokong')->select('variation')->orderBy('create_time', 'desc')->where('code', $value)->first();
            $B_data[] = $result->variation;
        }
        $E_data = ["TK5-11","TK5-12","TK5-13","TK5-14"];
        foreach ($E_data as $key => $value) {
            $result = DB::table('instruments_tuokong')->select('variation')->orderBy('create_time', 'desc')->where('code', $value)->first();
            $F_data[] = $result->variation;
        }
        $G_data = ["TK5-15","TK5-16"];
        foreach ($G_data as $key => $value) {
            $result = DB::table('instruments_tuokong')->select('variation')->orderBy('create_time', 'desc')->where('code', $value)->first();
            $H_data[] = $result->variation;
        }
        $I_data = ["TK5-17","TK5-18"];
        foreach ($I_data as $key => $value) {
            $result = DB::table('instruments_tuokong')->select('variation')->orderBy('create_time', 'desc')->where('code', $value)->first();
            $J_data[] = $result->variation;
        }
        $K_data = ["TK5-19"];
        foreach ($K_data as $key => $value) {
            $result = DB::table('instruments_tuokong')->select('variation')->orderBy('create_time', 'desc')->where('code', $value)->first();
            $L_data[] = $result->variation;
        }

这是我的echars表

  (function() {
    var X_data = '{{$X_data}}';
    var Y_data = '{{$Y_data}}'; 
    var X = X_data.replaceAll('"', '"');
    var Y = Y_data.replaceAll('"', '"');
    var C = JSON.parse(X);
    var D = JSON.parse(Y);
    console.log(C);
    console.log(D);
            //绕坝渗压变化率
            var chartDom2 = document.getElementById('col01');
            var myChart2 = echarts.init(chartDom2);
            var option2;
            option2 = {
                title: {
                    text: '',
                    textStyle: {
                        color: '#597de3',
                        fontSize: 15
                    },
                    padding: [20, 50, 0, 20]
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    // data: ['库水位高程:3470m'],
                    right: '30',
                    // top:'-30%',
                    icon: [],
                    padding: [0, 0],
                    textStyle: {
                        color: '#597de3' 
                        
                    },
                },
                // color:['#db9715','#15c594'],
                grid: {
                    left: '9%',
                    right: '6%',
                    // top:'3%',
                    margin:'50%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    name: '',
                    boundaryGap: true,
                    axisLabel:{
                      rotate:40,
                    },
                    axisLine: { 
                     show: true, // Y轴线
                     lineStyle: {
                         type: 'solid',
                         color: '#fff'
                     }  
                    },
                        data: C
                    
                },


                yAxis: {
                    type: 'value',
                    name: '(mm)',
                    nameTextStyle: {
                    padding: [0, 10, -5, 10] // 上右下左与原位置距离
                            },

                    axisLabel: {
                        formatter: '{value}',
                        rotate:40,
                    },
                    axisLine: { 
                     show: true, // Y轴线
                     lineStyle: {
                         type: 'solid',
                         color: '#fff'
                     }  
                     },
                     splitLine: { 
                            
                            lineStyle: {
                            
                            type: 'dashed',
                            color: '#fff',
                            // color: ['#aaa','#fff'],
                            width: 0.6,
                          }
                        },
                },
                series: [{
                        // name: '库水位高程:3470m',
                        type: 'line',
                        tooltip: {
                            valueFormatter: function(value) {
                                return value + ' ';
                            }
                        },
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 10,
                        lineStyle: {
                        normal: {
                            width: 2,
                            color:"#00ff00", //设置实线的颜色
                            },
                        },
                        data: D
                    },
                    
                ],
                textStyle: {
                    // color: '#597DE3'
                    color:"#fff",
                }
            };
            myChart2.resize({
                height: 410,
                // top: -23,
                width:529
            });
            option2 && myChart2.setOption(option2,true);

        })();  

该回答引用chatgpt:感觉应该可以,尝试一下,有问题可以@我


$chartData = [
    ["X_data" => ["TK5-01","TK5-02","TK5-03","TK5-04","TK5-05"], "Y_data" => []],
    ["X_data" => ["TK5-06","TK5-07","TK5-08","TK5-09","TK5-10"], "Y_data" => []],
    ["X_data" => ["TK5-11","TK5-12","TK5-13","TK5-14"], "Y_data" => []],
    ["X_data" => ["TK5-15","TK5-16"], "Y_data" => []],
    ["X_data" => ["TK5-17","TK5-18"], "Y_data" => []],
    ["X_data" => ["TK5-19"], "Y_data" => []]
];

foreach ($chartData as $data) {
    foreach ($data['X_data'] as $value) {
        $result = DB::table('instruments_tuokong')->select('variation')->orderBy('create_time', 'desc')->where('code', $value)->first();
        $data['Y_data'][] = $result->variation;
    }
}

// 输出数据到Echars
foreach ($chartData as $data) {
    echo "X轴数据: " . implode(", ", $data['X_data']) . "<br>";
    echo "Y轴数据: " . implode(", ", $data['Y_data']) . "<br><br>";
}

这段代码创建了一个名为$chartData的数组,其中包含不同的X轴数据和相应的Y轴数据。通过循环遍历$chartData数组,并使用嵌套的循环来获取每个X轴数据对应的Y轴数据。最后,使用循环输出数据到Echars,X轴数据和Y轴数据分别用逗号分隔。

该回答通过自己思路及引用到GPTᴼᴾᴱᴺᴬᴵ搜索,得到内容具体如下:
根据你提供的代码,我假设你需要将从数据库中提取的数据,以数组的形式传递到前端,并在echarts中使用。以下是一种简单的实现方式:

1、 首先,你需要在后端将所有数据组织到一个数组中,然后将其转换为JSON格式,以便在前端使用。可以通过以下代码实现:

$data = [
    ['name' => 'TK5-01', 'value' => $Y_data],
    ['name' => 'TK5-06', 'value' => $B_data],
    ['name' => 'TK5-11', 'value' => $F_data],
    ['name' => 'TK5-15', 'value' => $H_data],
    ['name' => 'TK5-17', 'value' => $J_data],
    ['name' => 'TK5-19', 'value' => $L_data],
];
$json_data = json_encode($data);

2、 接下来,在前端页面中使用echarts插件,将JSON数据传递给echarts,以绘制图表。以下是一个简单的HTML页面示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>echarts demo</title>
    <!-- 引入echarts插件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.1/echarts.min.js"></script>
</head>
<body>
    <!-- echarts容器 -->
    <div id="chart" style="width: 800px;height:400px;"></div>
    <script type="text/javascript">
        // 将JSON数据传递给echarts
        var data = <?php echo $json_data; ?>;
        // 创建echarts实例
        var chart = echarts.init(document.getElementById('chart'));
        // 配置echarts参数
        var option = {
            title: {
                text: '数据图表'
            },
            tooltip: {},
            legend: {
                data: ['TK5-01', 'TK5-06', 'TK5-11', 'TK5-15', 'TK5-17', 'TK5-19']
            },
            xAxis: {
                type: 'category',
                data: <?php echo json_encode($X_data); ?>
            },
            yAxis: {
                type: 'value',
            },
            series: data.map(function (item) {
                return {
                    name: item.name,
                    type: 'line',
                    data: item.value
                };
            })
        };
        // 使用刚指定的配置项和数据显示图表。
        chart.setOption(option);
    </script>
</body>
</html>

这里使用的是echarts官方提供的折线图示例,你可以根据你的需求调整配置参数。

希望这个示例能帮助你简便地实现从PHP数据库提取数组到前端的功能。


如果以上回答对您有所帮助,点击一下采纳该答案~谢谢