想问一下 怎么把这些写成很简便的代码,并且有效在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数据库提取数组到前端的功能。
如果以上回答对您有所帮助,点击一下采纳该答案~谢谢