php+echarts實現數據可視化實例

效果：

?代碼：

php

<?php
include('includes/session.inc');
include('includes/SQL_CommonFunctions.inc');
?>
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="css/e-kanban/index.css"><script src="./js/jquery-2.1.0.js" type="text/javascript"></script><script src="./js/echarts.js" type="text/javascript"></script><title>電子看板</title>
</head><body><div class="head"><h1 class="all_title">生產任務看板</h1></div><div class="kanban_all"><div class="kanban_all_position"><div class="kanban_item"><div class="kanban_line"><div class="kanban_title">工序待生產工時統計</div><div class="kanban_content"><table><tr><td><div id="poruku" style="width:100%;height:220px;"></div></td><td><div style="width: 30px; height:220px;"></div></td></tr></table></div></div></div><div class="kanban_item"><div class="kanban_line"><div class="kanban_title">生產總數</div><div class="kanban_content"><div class="quantity_show"><div class="quantity_show_position"><div class="quantity_line1">良品數量/生產總數</div><div class="quantity_line2"><span id="all_good_quantity"></span>/<span id="all_quantity"></span></div><div class="quantity_line3"><ul><li style="color:red"><span>不良數量：</span><span id="all_bad_quantity"></span></li><li style="color:green"><span>良品率：</span><span id="all_good_rate1"></span></li></ul></div></div></div></div></div></div><div class="kanban_item"><div class="kanban_line_double"><div class="left"><div class="kanban_line"><div class="kanban_title">近半年良品、不良率總計</div><div class="kanban_content"><div class="kanban_content_left"><table><tr><td><div id="poruku2" style="width:100%;height:220px;"></div></td><td><div style="width: 30px; height:220px;"></div></td></tr></table></div><div class="kanban_content_right"><div><ul><li style="color:#00c5d4">良品率:<span id="halfyear_good_rate"></span></li><li style="color:#b381dd">不良率:<span id="halfyear_bad_rate"></span></li></ul></div></div></div></div></div><div class="middle"></div><div class="right"><div class="kanban_line"><div class="kanban_title">全部良品、不良比率</div><div class="kanban_content"><div class="kanban_content_left"><table><tr><td><div id="poruku3" style="width:100%;height:220px;"></div></td><td><div style="width: 30px; height:220px;"></div></td></tr></table></div><div class="kanban_content_right"><div><ul><li style="color:#e5924b">良品率:<span id="all_good_rate"></span></li><li style="color:#10baf8">不良率:<span id="all_bad_rate"></span></li></ul></div></div></div></div></div></div></div><div class="kanban_item"><div class="kanban_line"><div class="kanban_title">站別良品、不良率</div><div class="kanban_content"><table><tr><td><div id="poruku1" style="width:100%;height:220px;"></div></td><td><div style="width: 30px; height:220px;"></div></td></tr></table></div></div></div><div class="kanban_item"><div class="kanban_line"><div class="kanban_title">員工良品、不良比率</div><div class="kanban_content"><table><tr><td><div id="poruku4" style="width:100%;height:220px;"></div></td><td><div style="width: 30px; height:220px;"></div></td></tr></table></div></div></div><div class="kanban_item"><div class="kanban_line"><div class="kanban_title">近半年良率、不良率</div><div class="kanban_content"><?php$sql5 = "SELECT months.month,SUM(IFNULL(transaction_quantity, 0)) AS total_transaction_quantity,SUM(IFNULL(bad_quantity, 0)) AS total_bad_quantity,CASEWHEN (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0))) = 0 THEN 0ELSE ROUND((SUM(IFNULL(transaction_quantity, 0)) / (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0)))*100), 2)END AS good_rate,CASEWHEN (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0))) = 0 THEN 0ELSE ROUND((SUM(IFNULL(bad_quantity, 0)) / (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0)))*100), 2)END AS bad_rateFROM (SELECT DATE_FORMAT(DATE_SUB(LAST_DAY(CURDATE()), INTERVAL n.num MONTH), '%Y-%m') AS monthFROM (SELECT 0 AS num UNION ALL SELECT 1 UNION ALL SELECT 2 UNION ALL SELECT 3 UNION ALL SELECT 4 UNION ALL SELECT 5) n) monthsLEFT JOIN wip_transactions ON DATE_FORMAT(FROM_UNIXTIME(transaction_date), '%Y-%m') = months.monthGROUP BY months.monthORDER BY months.month ASC";$result5 = DB_query($sql5, $db);// 檢查查詢是否成功if ($result5) {// 檢查查詢結果是否為空if (mysqli_num_rows($result5) > 0) {?><table class="table"><tr><th>月份</th><th>良品數量</th><th>不良數量</th><th>良品率 (%)</th><th>不良率 (%)</th></tr><?phpwhile ($row = mysqli_fetch_assoc($result5)) {?><tr><?php if ($row['bad_rate'] != 0) : ?><td style="color: #05bc4e;"><?php echo $row['month']; ?></td><?php else : ?><td><?php echo $row['month']; ?></td><?php endif; ?><td><?php echo $row['total_transaction_quantity']; ?></td><td><?php echo $row['total_bad_quantity']; ?></td><td><?php echo $row['good_rate']; ?></td><?php if ($row['bad_rate'] != 0) : ?><td style="color: #05bc4e;"><?php echo $row['bad_rate']; ?></td><?php else : ?><td><?php echo $row['bad_rate']; ?></td><?php endif; ?></tr><?php}?></table><?php} else {echo "No results found.";}} else {echo "Query failed.";}?></div></div></div></div>
</body></html><?php//按站別分的良率和不良率
$sql1 = "SELECT operation_code,SUM(IFNULL(transaction_quantity, 0)) AS total_transaction_quantity,SUM(IFNULL(bad_quantity, 0)) AS total_bad_quantity,CASEWHEN (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0))) = 0 THEN 0ELSE ROUND((SUM(IFNULL(transaction_quantity, 0)) / (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0)))*100), 2)END AS good_rate,CASEWHEN (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0))) = 0 THEN 0ELSE ROUND((SUM(IFNULL(bad_quantity, 0)) / (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0)))*100), 2)END AS bad_rateFROM wip_transactionsGROUP BY operation_codeORDER BY bad_rate desc
";
$result1 = DB_query($sql1, $db);
while ($array1 = mysqli_fetch_assoc($result1)) {$arrays1[] = $array1;
}if (is_array($arrays1)) {foreach ($arrays1 as $key => $value) {$goodnum1[]  = $value['total_transaction_quantity'];$badnum1[]  = $value['total_bad_quantity'];$arr_good_quantity1[]  = $value['good_rate'];$arr_bad_quantity1[]  = $value['bad_rate'];$arrvendor1[]  = $value['operation_code'];}
} else {$goodnum1[]  = 0;$badnum1[]  = 0;$arr_good_quantity1[]  = 0;$arr_bad_quantity1[]  = 0;$arrvendor1[]  = 0;
}
echo "<script>";
echo ";   var goodnum1 = ";
echo json_encode($goodnum1);
echo ";   var badnum1 = ";
echo json_encode($badnum1);
echo ";   var good_rate1 = ";
echo json_encode($arr_good_quantity1);
echo ";   var bad_rate1 = ";
echo json_encode($arr_bad_quantity1);
echo "; var x1 = ";
echo json_encode($arrvendor1);
echo "; var ydata = []var myChart1 = echarts.init(document.getElementById('poruku1')); option1 = {//滾動顯示dataZoom: [{type: 'slider',  // 滑動條型式的dataZoom組件show: true,  // 顯示dataZoom組件start: 0,  // 默認數據窗口范圍的起始位置為0end: 30,  // 默認數據窗口范圍的結束位置為30xAxisIndex: [0],  // 設置dataZoom組件影響的x軸索引，默認為第一個x軸filterMode: 'filter',  // 數據窗口范圍的定義模式為filter過濾模式height: 12, // 設置滑動條型式的高度為20像素textStyle: {color: 'white' // 設置文字顏色為白色},handleStyle: {color: 'white' // 設置滾動條手柄的顏色為紅色},fillerColor: 'rgba(255, 255, 255, 0.1)', // 設置滾動條選中區域的顏色為藍色}, {type: 'inside',  // 內置型式的dataZoom組件start: 0,  // 默認數據窗口范圍的起始位置為0end: 30,  // 默認數據窗口范圍的結束位置為30xAxisIndex: [0],  // 設置dataZoom組件影響的x軸索引，默認為第一個x軸filterMode: 'filter',  // 數據窗口范圍的定義模式為filter過濾模式height: 12 }],//圖形顏色color: ['#b381dd','#3aafe8'],//提示框，鼠標懸停在圖形上的注解tooltip: {trigger: 'axis',axisPointer: {            // 坐標軸指示器，坐標軸觸發有效type: 'line'        // 默認為直線，可選為：'line' | 'shadow'},formatter: function(params) {var index = params[0].dataIndex;var goodnum = goodnum1[index];var badnum = badnum1[index];var goodrate = params[0].value;var badrate = params[1].value;return '良品數量：' + goodnum + '<br>' +'不良數量：' + badnum + '<br>' +'良品率：' + goodrate + '%' + '<br>' +'不良率：' + badrate + '%';}},//配置網格組件，用于定義圖表的位置和大小grid: {top: '15%',  // 增加top的值來創建間距left: '3%',right: '3%',bottom: '20%',  // 增加bottom的值來創建間距containLabel: true, //自動計算并包含坐標軸標簽、刻度和標題等內容在內。},//橫坐標xAxis: {name: '時間',nameTextStyle: {padding: [0, 0, -25, -25]    // 橫坐標名稱與原位置的邊距},type: 'category', //橫坐標數據類型為類別型，適用于離散的數據data: x1, //設置橫坐標的數據，使用變量x1中的數據。axisLine: {lineStyle: {color: '#6691b5'  // 設置 x 坐標軸線的顏色}},axisLabel: {interval: 0, // 設置橫坐標刻度的顯示間隔，默認為0表示全部顯示// 如果刻度標簽太長，可以使用rotate進行旋轉textStyle: {fontSize: 18}},},//比例yAxis: [{name: '比例',type: 'value', //數據類型為數值型。axisLabel: {formatter: '{value}%'},splitLine: {show: false  // 隱藏縱坐標軸的背景橫線},axisLine: {lineStyle: {color: '#6691b5'  // 設置 x 坐標軸線的顏色為紅色}},},],series: [{name:'良品率',type: 'bar',data: good_rate1,barWidth: '30%', // 設置柱狀圖的寬度為整個類目寬度的40%barGap: '20%', // 設置柱狀圖之間的間距為整個類目寬度的20%itemStyle: {normal: {label: {show: true,position: 'top',formatter: '{c}%',textStyle: {color: '#b381dd',fontSize: 10}}}}},{name:'不良率',type: 'bar',data: bad_rate1,barWidth: '30%', // 設置柱狀圖的寬度為整個類目寬度的40%barGap: '20%', // 設置柱狀圖之間的間距為整個類目寬度的20%itemStyle: {normal: {label: {show: true,position: 'top',formatter: '{c}%',textStyle: {color: '#3aafe8',fontSize: 10}}}}}]};myChart1.setOption(option1);    </script>";//計算機半年內的總良品和不良
$sql2 = "SELECT SUM(IFNULL(transaction_quantity, 0)) AS total_transaction_quantity,SUM(IFNULL(bad_quantity, 0)) AS total_bad_quantity,CASEWHEN (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0))) = 0 THEN 0ELSE ROUND((SUM(IFNULL(transaction_quantity, 0)) / (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0)))*100), 2)END AS good_rate,CASEWHEN (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0))) = 0 THEN 0ELSE ROUND((SUM(IFNULL(bad_quantity, 0)) / (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0)))*100), 2)END AS bad_rate,DATE(DATE_SUB(DATE_FORMAT(NOW(), '%Y-%m-%d'), INTERVAL 6 MONTH)) AS six_months_agoFROM wip_transactionsWHERE transaction_date >= UNIX_TIMESTAMP(DATE_SUB(DATE_FORMAT(NOW(), '%Y-%m-%d'), INTERVAL 6 MONTH))AND transaction_date <= UNIX_TIMESTAMP(DATE_FORMAT(NOW(), '%Y-%m-%d'));";
$result2 = DB_query($sql2, $db);
if ($array2 = mysqli_fetch_assoc($result2)) {$good_rate2 = $array2['good_rate'];$bad_rate2 = $array2['bad_rate'];$six_months_ago2 = $array2['six_months_ago'];
} else {$good_rate2 = 0;$bad_rate2 = 0;$six_months_ago2 = 0;
}
$array2 = array((object)array('value' => $good_rate2, 'name' => '良品率'),(object)array('value' => $bad_rate2, 'name' => '不良率')
);echo "<script>";
echo "// 給前端賦值
var allGoodRateValue2 = $good_rate2; // 良品率的值
var allBadRateValue2 = $bad_rate2; // 不良率的值
document.getElementById('halfyear_good_rate').innerText = allGoodRateValue2 + '%';
document.getElementById('halfyear_bad_rate').innerText = allBadRateValue2 + '%';";
echo ";   var array2 = ";
echo json_encode($array2);
echo "; var ydata = []var myChart2 = echarts.init(document.getElementById('poruku2')); option2 = {title: {left: 'center',top: 'center'},color:['#00c5d4','#b381dd'],  tooltip: {trigger: 'item',formatter: '{b}: {c}%'  // 設置提示框內容格式，b代表數據項名稱，c代表數據項值},series: [{type: 'pie',data: array2,radius: ['40%', '70%']}]};myChart2.setOption(option2);    </script>";//計算總的良品和不良
$sql3 = "SELECT SUM( IFNULL( transaction_quantity, 0 ) ) AS total_transaction_quantity, SUM( IFNULL( bad_quantity, 0 ) ) AS total_bad_quantity, CASEWHEN (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0))) = 0 THEN 0ELSE ROUND((SUM(IFNULL(transaction_quantity, 0)) / (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0)))*100), 2)END AS good_rate,CASEWHEN (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0))) = 0 THEN 0ELSE ROUND((SUM(IFNULL(bad_quantity, 0)) / (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0)))*100), 2)END AS bad_rateFROM wip_transactions";
$result3 = DB_query($sql3, $db);
if ($array3 = mysqli_fetch_assoc($result3)) {$good_rate3 = $array3['good_rate'];$bad_rate3 = $array3['bad_rate'];$goodnum3 = $array3['total_transaction_quantity'];$badnum3 = $array3['total_bad_quantity'];
} else {$good_rate3 = 0;$bad_rate3 = 0;$goodnum3 = 0;$badnum3 = 0;
}
$array3 = array((object)array('value' => $good_rate3, 'name' => '良品率'),(object)array('value' => $bad_rate3, 'name' => '不良率')
);echo "<script>";
echo "// 給前端賦值  
var allGoodRateValue3 = $good_rate3; // 良品率的值
var allBadRateValue3 = $bad_rate3; // 不良率的值
var allGoodNumValue3 = $goodnum3; // 良品總數
var allBadNumValue3 = $badnum3; // 不良總數
var allNumValue3 = allBadNumValue3+allGoodNumValue3; // 總數//扇形圖面板
document.getElementById('all_good_rate').innerText = allGoodRateValue3 + '%';
document.getElementById('all_bad_rate').innerText = allBadRateValue3 + '%';
//數量統計面板
document.getElementById('all_good_rate1').innerText = allGoodRateValue3 + '%';
document.getElementById('all_good_quantity').innerText = allGoodNumValue3;
document.getElementById('all_quantity').innerText = allNumValue3;
document.getElementById('all_bad_quantity').innerText = allBadNumValue3;
";echo ";   var array3 = ";
echo json_encode($array3);
echo "; var ydata = []var myChart3 = echarts.init(document.getElementById('poruku3')); option3 = {title: {left: 'center',top: 'center'},color:['#e5924b','#10baf8'],  tooltip: {trigger: 'item',formatter: '{b}: {c}%'  // 設置提示框內容格式，b代表數據項名稱，c代表數據項值},series: [{type: 'pie',data: array3,radius: ['40%', '70%']}]};myChart3.setOption(option3);    </script>";//計算總的良品和不良
$sql4 = "SELECT wt.employee_num,he.employee_name,SUM(IFNULL(wt.transaction_quantity, 0)) AS total_transaction_quantity,SUM(IFNULL(wt.bad_quantity, 0)) AS total_bad_quantity,CASEWHEN (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0))) = 0 THEN 0ELSE ROUND((SUM(IFNULL(transaction_quantity, 0)) / (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0)))*100), 2)END AS good_rate,CASEWHEN (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0))) = 0 THEN 0ELSE ROUND((SUM(IFNULL(bad_quantity, 0)) / (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0)))*100), 2)END AS bad_rate
FROM wip_transactions wt, hr_employees he
WHERE wt.employee_num = he.employee_num
GROUP BYwt.employee_num
ORDER BYbad_rate desc
";
$result4 = DB_query($sql4, $db);
while ($array4 = mysqli_fetch_assoc($result4)) {$arrays4[] = $array4;
}if (is_array($arrays4)) {foreach ($arrays4 as $key => $value) {$good_rate4[]  = $value['good_rate'];$bad_rate4[]  = $value['bad_rate'];$goodnum4[]  = $value['total_transaction_quantity'];$badnum4[]  = $value['total_bad_quantity'];$employee_name[]  = $value['employee_name'];}
} else {$good_rate4[]  = 0;$bad_rate4[]  = 0;$goodnum4[]  = 0;$badnum4[]  = 0;$employee_name[]  = 0;
}
echo "<script>";
echo ";   var goodnum4 = ";
echo json_encode($goodnum4);
echo "; var badnum4 = ";
echo json_encode($badnum4);
echo ";   var good_rate4 = ";
echo json_encode($good_rate4);
echo "; var bad_rate4 = ";
echo json_encode($bad_rate4);
echo "; var employee_name = ";
echo json_encode($employee_name);
echo "; var ydata = []var myChart4 = echarts.init(document.getElementById('poruku4')); option4 = {//滾動顯示dataZoom: [{type: 'slider',  // 滑動條型式的dataZoom組件show: true,  // 顯示dataZoom組件start: 0,  // 默認數據窗口范圍的起始位置為0end: 10,  // 默認數據窗口范圍的結束位置為30xAxisIndex: [0],  // 設置dataZoom組件影響的x軸索引，默認為第一個x軸filterMode: 'filter',  // 數據窗口范圍的定義模式為filter過濾模式height:12,textStyle: {color: 'white' // 設置文字顏色為白色},handleStyle: {color: 'white' // 設置滾動條手柄的顏色為紅色},fillerColor: 'rgba(255, 255, 255, 0.1)', // 設置滾動條選中區域的顏色為藍色}, {type: 'inside',  // 內置型式的dataZoom組件start: 0,  // 默認數據窗口范圍的起始位置為0end: 10,  // 默認數據窗口范圍的結束位置為30xAxisIndex: [0],  // 設置dataZoom組件影響的x軸索引，默認為第一個x軸filterMode: 'filter',  // 數據窗口范圍的定義模式為filter過濾模式height:12}],//配置網格組件，用于定義圖表的位置和大小grid: {top: '20%',  // 增加top的值來創建間距left: '2%',right: '5%',bottom: '20%',  // 增加bottom的值來創建間距containLabel: true, //自動計算并包含坐標軸標簽、刻度和標題等內容在內。},//橫坐標xAxis: {name: '員工',data: employee_name, //設置橫坐標的數據，使用變量employee_name中的數據。axisLine: {lineStyle: {color: '#6691b5'  // 設置 x 坐標軸線的顏色}},},//縱坐標yAxis: {axisLabel: {formatter: '{value}%',},splitLine: {show: false  // 隱藏縱坐標軸的背景橫線},axisLine: {lineStyle: {color: '#6691b5'  // 設置 x 坐標軸線的顏色}},},//圖形顏色color: ['#54c2af','#3287fe'],//提示框，鼠標懸停在圖形上的注解tooltip: {trigger: 'axis',axisPointer: {            // 坐標軸指示器，坐標軸觸發有效type: 'line'        // 默認為直線，可選為：'line' | 'shadow'},formatter: function(params) {var index = params[0].dataIndex;var goodnum = goodnum4[index];var badnum = badnum4[index];var goodrate = params[0].value;var badrate = params[1].value;return employee_name[index] + '<br>' +'良品數量：' + goodnum + '<br>' +'不良數量：' + badnum + '<br>' +'良品率：' + goodrate + '%' + '<br>' +'不良率：' + badrate + '%';}},series: [{name:'良品率',data:good_rate4,type:'bar',stack:'x',  itemStyle: {normal: {label: {show: true,position: 'inside',formatter: '良率:{c}%',textStyle: {color: 'black',fontSize: 12}}}}},{name:'不良率',data:bad_rate4,type:'bar',stack:'x',itemStyle: {normal: {label: {show: true,position: 'top',formatter: '不良率:{c}%',textStyle: {color: '#3287fe',fontSize: 12}}}}},],};myChart4.setOption(option4);    </script>";
//員工工時
$sql6 = "SELECT wt.employee_num,he.employee_name,SUM((end_date - begin_date) / 3600) AS total_hours,SUM((end_date - begin_date) / (3600 * 24)) AS total_days,SUM((end_date - begin_date) / (3600 * 24 * 365)) AS total_years
FROM wip_transactions wt, hr_employees he
WHERE wt.employee_num = he.employee_num
GROUP BY wt.employee_num";
$result6 = DB_query($sql6, $db);
while ($array6 = mysqli_fetch_assoc($result6)) {$arrays6[] = $array6;
}
if (is_array($arrays6)) {foreach ($arrays6 as $key => $value) {$total_hours6[]  = $value['total_hours'];$total_days6[]  = $value['total_days'];$total_years6[]  = $value['total_years'];$employee_name6[]  = $value['employee_name'];}
} else {$total_hours6[]  = 0;$total_days6[]  = 0;$total_years6[]  = 0;$employee_name6[]  = 0;
}
echo "<script>";
echo ";   var employee_name6 = ";
echo json_encode($employee_name6);
echo ";   var total_hours6 = ";
echo json_encode($total_hours6);echo "; var data = []; var myChart6 = echarts.init(document.getElementById('poruku6')); option6 = {yAxis: {data: employee_name6},xAxis: {},series: [{type: 'bar',data: total_hours6}]};myChart6.setOption(option6);    </script>";
// 待生產工時統計
$sql7 = "SELECT   a.operation_code,operation_name,sum(begin_quantity*standard_time) as paipei,sum(a.output_quantity*standard_time) wancheng,sum((begin_quantity-a.output_quantity)*standard_time) waitfrom wip_operation_plan a,bom_parameters b,wip_jobs_all cwhere  a.operation_code=b.operation_code and begin_quantity>a.output_quantity and standard_time>0and a.wip_entity_name=c.wip_entity_name GROUP BY a.operation_code,operation_nameorder by a.operation_code desc";
$result7 = DB_query($sql7, $db);while ($array7 = mysqli_fetch_assoc($result7)) {$arrays7[] = $array7;
}if (is_array($arrays7)) {foreach ($arrays7 as $key => $value) {$arramount7[]  = $value['wait'];$arrvendor7[]  = $value['operation_name'];}
} else {$arramount7[]  = 0;$arrvendor7[]  = 0;
}
echo "<script>";
echo ";   var num7 = ";
echo json_encode($arramount7);
echo "; var customer7 = ";
echo json_encode($arrvendor7);
echo "; var ydata = []var myChart7 = echarts.init(document.getElementById('poruku')); option7 = {//滾動顯示dataZoom: [{type: 'slider',  // 滑動條型式的dataZoom組件show: true,  // 顯示dataZoom組件start: 0,  // 默認數據窗口范圍的起始位置為0end: 30,  // 默認數據窗口范圍的結束位置為30xAxisIndex: [0],  // 設置dataZoom組件影響的x軸索引，默認為第一個x軸filterMode: 'filter',  // 數據窗口范圍的定義模式為filter過濾模式height: 12, // 設置滑動條型式的高度為20像素textStyle: {color: 'white' // 設置文字顏色為白色},handleStyle: {color: 'white' // 設置滾動條手柄的顏色為紅色},fillerColor: 'rgba(255, 255, 255, 0.1)' // 設置滾動條選中區域的顏色為藍色}, {type: 'inside',  // 內置型式的dataZoom組件start: 0,  // 默認數據窗口范圍的起始位置為0end: 30,  // 默認數據窗口范圍的結束位置為30xAxisIndex: [0],  // 設置dataZoom組件影響的x軸索引，默認為第一個x軸filterMode: 'filter',  // 數據窗口范圍的定義模式為filter過濾模式height: 12 }],//標題// title: {//     text: '工序待生產工時統計'// },//圖形顏色color: ['#05c798'],//提示框，鼠標懸停在圖形上的注解tooltip: {trigger: 'axis',axisPointer: {            // 坐標軸指示器，坐標軸觸發有效type: 'line'        // 默認為直線，可選為：'line' | 'shadow'},backgroundColor: 'rgba(255, 255, 255, 0.7)', // 設置提示條的背景顏色textStyle: {color: 'rgba(0, 0, 0)', // 設置提示條文本的顏色為白色fontSize: 12 // 設置提示條文本的字體大小為12px}},//配置網格組件，用于定義圖表的位置和大小grid: {top: '20%',  // 增加top的值來創建間距left: '3%',right: '3%',bottom: '20%',  // 增加bottom的值來創建間距containLabel: true, //自動計算并包含坐標軸標簽、刻度和標題等內容在內。},//橫坐標xAxis: {name: '工序',nameTextStyle: {padding: [0, 0, -25, -25]    // 橫坐標名稱與原位置的邊距},axisLine: {lineStyle: {color: '#6691b5' // 設置 x 坐標軸線的顏色},show: false // 設置為 false，隱藏橫坐標的標簽},type: 'category', //橫坐標數據類型為類別型，適用于離散的數據data: customer7, //設置橫坐標的數據，使用變量customer7中的數據。axisLabel: {interval: 0, // 設置橫坐標刻度的顯示間隔，默認為0表示全部顯示// 如果刻度標簽太長，可以使用rotate進行旋轉textStyle: {fontSize: 14}}},//縱坐標yAxis: [{name: '工時',type: 'value', //數據類型為數值型。axisLabel: {interval: 0, // 設置橫坐標刻度的顯示間隔，默認為0表示全部顯示// 如果刻度標簽太長，可以使用rotate進行旋轉textStyle: {fontSize: 14}},axisLine: {lineStyle: {color: '#6691b5' // 設置 y 坐標軸線的顏色},},splitLine: {show: false  // 隱藏縱坐標軸的背景橫線},},],series: [{name: '工時',type: 'bar',barWidth: '25%',data: num7,itemStyle: {normal: {label: {show: true,position: 'top',textStyle: {color: '#6691b5',fontSize: 12}}}}},],};myChart7.setOption(option7);    </script>";

css

body {background: linear-gradient(25deg, #0f2249, #182e5a 20%, #0f2249 40%, #182e5a 60%, #0f2249 80%, #182e5a 100%);padding: 0px;margin: 0px;
}ul {padding: 0px;margin: 0px;
}.head {/* height: 40px; */background: url(../../images/head_bg.png) no-repeat center center;background-size: 100% 100%;position: relative;margin-bottom: 20px;border: 1px solid rgb(255, 255, 255, 0);
}.head h1 {color: #bde4ff;text-align: center;font-size: 25px;/* line-height: 40px; */letter-spacing: .06rem;
}.head h1 img {width: 1.5rem;display: inline-block;vertical-align: middle;margin-right: .2rem
}.all_title {background: linear-gradient(to top, #56c3ec, #b2f3f5);-webkit-background-clip: text;-webkit-text-fill-color: transparent;text-align: center;letter-spacing: 2px;font-family: '微軟雅黑';font-weight: bold;/* font-size: 32px; */
}.kanban_all {/* border: 1px solid black; */width: 100%;display: flex;justify-content: center;align-items: center;
}.kanban_all_position {/* border: 1px solid red; */width: 98%;display: flex;flex-wrap: wrap;
}.kanban_item {/* border: 1px solid red; */width: calc(50% - 2%);margin: 0 1% 1% 1%;
}.kanban_line {height: 280px;border: 1px solid #3486da;background: rgba(0, 70, 190, .1);padding: .15rem;position: relative;margin-bottom: .25rem;z-index: 10;/* width: calc(50% - 3%); */margin: 0 1% 1% 1%;
}.kanban_line:before,
.kanban_line:after {position: absolute;/* width: .15rem;height: .15rem; */content: "";border-top: 3px solid #3486da;top: -2px;
}.kanban_line:before,
.kanban_line:after,.kanban_title {height: 20px;padding: 1%;font-family: '華文細黑';font-weight: bold;background: linear-gradient(to right, rgba(48, 82, 174, 1), rgba(48, 82, 174, 0));color: #fff;font-size: 14px;
}.kanban_content {height: 220px;padding: 1%;display: flex;justify-content: center;/* border: 1px solid red; */
}.kanban_content table {width: 100%;/* border: 1px solid red; */
}.kanban_content_left {/* border: 1px solid red; */width: 65%;
}.kanban_content_right {width: 35%;/* border: 1px solid green; */
}.kanban_content_right li {margin-top: 15%;font-family: '微軟雅黑';
}.kanban_content table td {width: 100%;/* 或者您可以根據需求設置其他百分比值，例如33.33% */
}.kanban_line_double {/* border: 1px solid blue; */display: flex;justify-content: center;width: 100%;height: 100%;
}.kanban_line_double .left {/* border: 1px solid red; */width: 48%;height: 100%;
}.kanban_line_double .left .kanban_title {padding: 2%;
}.kanban_line_double .middle {background: none;width: 3%;
}.kanban_line_double .right {/* border: 1px solid black; */width: 48%;height: 100%;
}.kanban_line_double .right .kanban_title {padding: 2%;
}/* 表格 */
.table {text-align: center;/* border: 1px solid black; */border-collapse: collapse;
}.table tr th {width: 20%;/* border: 1px solid black; */color: #c0dcf0;font-weight: bold;
}.table tr td {width: 20%;text-align: center;padding-top: 1%;color: #8faade;
}.quantity_show {width: 100%;font-size: 20px;letter-spacing: 2px;font-family: '微軟雅黑';text-align: center;color: white;display: flex;align-items: center;justify-content: center;
}.quantity_show_position {width: 100%;
}.quantity_show div {padding: 1%;color: white;}.quantity_show .quantity_line2 {color: white;font-size: 30px;
}.quantity_show .quantity_line3 ul {display: flex;/* border: 1px solid red; */justify-content: center;/* 水平居中 */align-items: center;/* 垂直居中 */
}.quantity_show .quantity_line3 ul li {margin: 0 5%;/* border: 1px solid black; */list-style: none;
}.quantity_show .quantity_line3 ul li:nth-child(1):before {content: "";display: inline-block;width: 12px;/* 設置圖標寬度 */height: 12px;/* 設置圖標高度 */background-color: red;border-radius: 50%;/* 設置圖標背景顏色 */margin-right: 5px;/* 調整圖標與文本之間的間距 */
}.quantity_show .quantity_line3 ul li:nth-child(2):before {content: "";display: inline-block;width: 12px;/* 設置圖標寬度 */height: 12px;/* 設置圖標高度 */background-color: green;border-radius: 50%;/* 設置圖標背景顏色 */margin-right: 5px;/* 調整圖標與文本之間的間距 */
}.quantity_show .quantity_line3 span {color: #fff;
}

echarts下載參照官網：快速上手 - Handbook - Apache ECharts

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/40507.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/40507.shtml
英文地址，請注明出處：http://en.pswp.cn/news/40507.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

OpenLayers入門，OpenLayers加載google街景地圖

OpenLayers入門，OpenLayers加載google街景地圖

專欄目錄： OpenLayers入門教程匯總目錄 前言 本章講解OpenLayers加載google街景地圖，無需科學上網，也可以正常訪問瓦片。 二、依賴和使用 "ol": "^6.15.1"使用npm安裝依賴npm install ol@6.15.1使用Yarn安裝依賴yarn add olvue中如何使用： vue項…
閱讀更多...
FastApi-1-結合sql 增/查demo

FastApi-1-結合sql 增/查demo

目錄 FastAPI學習記錄項目結構部分接口/代碼展示感受全部代碼 FastAPI學習記錄 fastapi已經學習有一段時間&#xff0c;今天抽時間簡單整理下。 官網介紹&#xff1a; FastAPI 是一個用于構建 API 的現代、快速&#xff08;高性能&#xff09;的 web 框架&#xff0c;使用 Py…
閱讀更多...
SpringBoot的配置文件以及日志設置

SpringBoot的配置文件以及日志設置

在使用SpringBoot開發的過程中我們通常會用到配置文件來設置配置信息 以及使用日志來進行記錄我們的操作&#xff0c;方便我們對錯誤的定位 配置文件的作用在于&#xff1a;設置端口&#xff0c;設置數據庫連接信息&#xff0c;設置日志等等 在SpringBoot中&#xff0c;配置…
閱讀更多...
Linux系統編程：通過System V共享內存實現進程間通信

Linux系統編程：通過System V共享內存實現進程間通信

目錄 一. 共享內存實現進程間通信的原理 二. 共享內存相關函數 2.1 共享內存的獲取 shmget / ftok 2.2 共享內存與進程地址空間相關聯 shmat 2.3 取消共享內存與進程地址空間的關聯 shmdt 2.4 刪除共享內存 shmctl 2.5 通信雙方創建共享內存代碼 三. 共享內存實現進程間…
閱讀更多...
承接各種設計

承接各種設計

小弟985研究生畢業&#xff0c;目前攻讀讀博士&#xff0c;可做各種設計&#xff0c;包括但不限于Matlab 電力電子/電氣工程&#xff0c;matlab/simulink 電氣專業仿真MATLAB 電氣工程專業&#xff0c;matlab建模 電力電子&#xff0c;電氣工程&#xff0c;電力系統&#xff0c…
閱讀更多...
vue echarts macd指標 完整代碼

vue echarts macd指標 完整代碼

1 邏輯 給指定的series兩個對象 兩個對象有相同的xAxisIndex: 2,yAxisIndex: 2, 不同的data {name: "",type: "line",data: data1,xAxisIndex: 2,yAxisIndex: 2,},{name: "",type: "bar",data: data2,xAxisIndex: 2,yAxisIndex: 2,},…
閱讀更多...
Mac M2 Pro安裝使用Cocoapods

Mac M2 Pro安裝使用Cocoapods

Mac Pro M2安裝使用Cocoapods 在新公司要做iOS開發&#xff0c;所以在新電腦上安裝Cocoapods 在升級gem&#xff0c;sudo gem update --system&#xff0c;和安裝cocoapods時都遇到如下的提示&#xff1a; ERROR: While executing gem ... (Errno::EPERM)Operation not per…
閱讀更多...
Linux下安裝nodejs

Linux下安裝nodejs

1、下載nodejs 點擊前往&#xff1a;Download | Node.js 2、解壓 tar -xvf node-v18.16.0-linux-x64.tar.xz mv node-v18.16.0-linux-x64/ /usr/local/nodejs 3、 建立軟鏈接 此時的bin文件夾中已經存在node以及npm&#xff0c;如果你進入到對應文件的中執行命令行一點問題…
閱讀更多...
現代C++：使用 shared_from_this 防止 this 提前被釋放

現代C++：使用 shared_from_this 防止 this 提前被釋放

首先概括一下shared_from_this的作用&#xff1a;可以在類的成員函數中直接通過this得到指向當前所在對象的shared_ptr的智能指針&#xff0c;具體操作如下。 使用方法 設需要提供shared_from_this方法的類為C0定義為類&#xff0c;首先需要將C0定義為 std::enable_shared_fr…
閱讀更多...
mysql 02 數據庫的約束

mysql 02 數據庫的約束

為防止錯誤的數據被插入到數據表&#xff0c;MySQL中定義了一些維護數據庫完整性的規則&#xff1b;這些規則常稱為表的約束。常見約束如下&#xff1a; 主鍵約束 主鍵約束即primary key用于唯一的標識表中的每一行。被標識為主鍵的數據在表中是唯一的且其值不能為空。這點類似…
閱讀更多...
前后端分離------后端創建筆記（10）用戶修改

前后端分離------后端創建筆記（10）用戶修改

本文章轉載于【SpringBootVue】全網最簡單但實用的前后端分離項目實戰筆記 - 前端_大菜007的博客-CSDN博客 僅用于學習和討論&#xff0c;如有侵權請聯系 源碼&#xff1a;https://gitee.com/green_vegetables/x-admin-project.git 素材&#xff1a;https://pan.baidu.com/s/…
閱讀更多...
Spring Boot實現第一次啟動時自動初始化數據庫流程詳解

Spring Boot實現第一次啟動時自動初始化數據庫流程詳解

隨著互聯網的發展項目中的業務功能越來越復雜&#xff0c;有一些基礎服務我們不可避免的會去調用一些第三方的接口或者公司內其他項目中提供的服務&#xff0c;但是遠程服務的健壯性和網絡穩定性都是不可控因素。 在測試階段可能沒有什么異常情況&#xff0c;但上線后可能會出…
閱讀更多...
https證書獲取的方法及好處

https證書獲取的方法及好處

我們常說的https證書其實就是ssl證書&#xff0c;眼下為網站部署https證書是保障網站安全必不可少的一步。而https證書該如何獲取呢&#xff1f;下面就簡單介紹一下https證書獲取的方法。 https證書獲取途徑有兩種&#xff1a;自己簽發和由受信任的CA機構簽發。 自己給自己簽…
閱讀更多...
全國三網優惠話費充值接口開發指南

全國三網優惠話費充值接口開發指南

一、文檔綜述 近期想做項目的看過來~三網&#xff08;全國移動、聯通、電信&#xff09;話費、電費充值接口能夠實現將接口接入到小程序或者app上面&#xff0c;通過接口提交號碼和金額進行充值&#xff0c;可以幫助相關人員快速完成接口對接與聯調&#xff0c;平臺用戶可以通…
閱讀更多...
設計HTML5文本

設計HTML5文本

網頁文本內容豐富、形式多樣&#xff0c;通過不同的版式顯示在頁面中&#xff0c;為用戶提供最直接、最豐富的信息。HTML5新增了很多文本標簽&#xff0c;它們都有特殊的語義&#xff0c;正確使用這些標簽&#xff0c;可以讓網頁文本更嚴謹、更符合語義。 1、通用文本 1.1、標…
閱讀更多...
算法競賽備賽之搜索與圖論訓練提升，暑期集訓營培訓

算法競賽備賽之搜索與圖論訓練提升，暑期集訓營培訓

目錄 1.DFS和BFS 1.1.DFS深度優先搜索 1.2.BFS廣度優先搜索 2.樹與圖的遍歷&#xff1a;拓撲排序 3.最短路 3.1.迪杰斯特拉算法 3.2.貝爾曼算法 3.3.SPFA算法 3.4.多源匯最短路Floy算法 4.最小生成樹 4.1.普利姆算法 4.2.克魯斯卡爾算法 5.二分圖&#xff1a;染色法…
閱讀更多...
7. CSS（四）

7. CSS（四）

目錄 一、浮動 &#xff08;一&#xff09;傳統網頁布局的三種方式 &#xff08;二&#xff09;標準流&#xff08;普通流/文檔流&#xff09; &#xff08;三&#xff09;為什么需要浮動&#xff1f; &#xff08;四&#xff09;什么是浮動 &#xff08;五&#xff09;浮…
閱讀更多...
OpenAI全球招外包大軍，手把手訓練ChatGPT取代碼農 ； 碼農：我自己「殺」自己

OpenAI全球招外包大軍，手把手訓練ChatGPT取代碼農 ； 碼農：我自己「殺」自己

目錄 前言 OpenAI招了一千多名外包人員&#xff0c;訓練AI學會像人類一樣一步步思考。如果ChatGPT「學成歸來」&#xff0c;碼農恐怕真的危了&#xff1f; 碼農真的危了&#xff01; 當時OpenAI也說&#xff0c;ChatGPT最合適的定位&#xff0c;應該是編碼輔助工具。 用Cha…
閱讀更多...
常用的Elasticsearch查詢DSL

常用的Elasticsearch查詢DSL

1.基本查詢 GET /index_name/_search {"query": {"match": {"dispatchClass": "1"}} }2.多條件查詢 GET /index_name/_search {"query": {"bool": {"must": [{"match": {"createUser&…
閱讀更多...
計算機競賽 opencv 圖像識別 指紋識別 - python

計算機競賽 opencv 圖像識別 指紋識別 - python

0 前言 &#x1f525; 優質競賽項目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于機器視覺的指紋識別系統 &#x1f947;學長這里給一個題目綜合評分(每項滿分5分) 難度系數&#xff1a;3分工作量&#xff1a;3分創新點&#xff1a;4分 該項目較為新穎&#xff0c;適…
閱讀更多...
最新文章

Copyright @ 2022~2023