php+echarts实现数据可视化实例2

效果:

代码

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/kanban.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="kanban_all"><div class="kanban_all_position"><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 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: red;"><?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: red;"><?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 class="kanban_line"><div class="kanban_line_double"><div class="left"><div class="kanban_title">近半年良品、不良率总计</div><div class="kanban_content"><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><div class="middle"></div><div class="right"><div class="kanban_title">全部良品、不良比率</div><div class="kanban_content"><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></div></div><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 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 class="kanban_line"><div class="kanban_title">员工工时</div><div class="kanban_content"><table><tr><td><div id="poruku6" style="width:100%;height:220px;"></div></td><td><div style="width: 30px; height:220px;"></div></td></tr></table></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: 15 // 设置滑动条型式的高度为20像素}, {type: 'inside',  // 内置型式的dataZoom组件start: 0,  // 默认数据窗口范围的起始位置为0end: 30,  // 默认数据窗口范围的结束位置为30xAxisIndex: [0],  // 设置dataZoom组件影响的x轴索引,默认为第一个x轴filterMode: 'filter',  // 数据窗口范围的定义模式为filter过滤模式height: 15 }],//图形颜色color: ['#5571c8','#91cc75'],//提示框,鼠标悬停在图形上的注解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中的数据。axisLabel: {interval: 0, // 设置横坐标刻度的显示间隔,默认为0表示全部显示// 如果刻度标签太长,可以使用rotate进行旋转textStyle: {fontSize: 14}}},//比例yAxis: [{name: '比例',type: 'value', //数据类型为数值型。axisLabel: {formatter: '{value}%'},splitLine: {show: false  // 隐藏纵坐标轴的背景横线},},],series: [{name:'良品率',type: 'bar',data: good_rate1,barWidth: '30%', // 设置柱状图的宽度为整个类目宽度的40%barGap: '20%', // 设置柱状图之间的间距为整个类目宽度的20%itemStyle: {normal: {label: {show: true,position: 'top',formatter: '{c}%',textStyle: {color: 'black',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: 'black',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 array2 = ";
echo json_encode($array2);
echo "; var ydata = []var myChart2 = echarts.init(document.getElementById('poruku2')); option2 = {title: {left: 'center',top: 'center'},color:['#e5924b','#00c5d4'],  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'];
} else {$good_rate3 = 0;$bad_rate3 = 0;
}
$array3 = array((object)array('value' => $good_rate3, 'name' => '良品率'),(object)array('value' => $bad_rate3, 'name' => '不良率')
);echo "<script>";
echo ";   var array3 = ";
echo json_encode($array3);
echo "; var ydata = []var myChart3 = echarts.init(document.getElementById('poruku3')); option3 = {title: {left: 'center',top: 'center'},color:['#fc6696','#985afb'],  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-- AND 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'))
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:15}, {type: 'inside',  // 内置型式的dataZoom组件start: 0,  // 默认数据窗口范围的起始位置为0end: 10,  // 默认数据窗口范围的结束位置为30xAxisIndex: [0],  // 设置dataZoom组件影响的x轴索引,默认为第一个x轴filterMode: 'filter',  // 数据窗口范围的定义模式为filter过滤模式height:15}],//配置网格组件,用于定义图表的位置和大小grid: {top: '12%',  // 增加top的值来创建间距left: '2%',right: '5%',bottom: '20%',  // 增加bottom的值来创建间距containLabel: true, //自动计算并包含坐标轴标签、刻度和标题等内容在内。},//横坐标xAxis: {name: '员工',data: employee_name, //设置横坐标的数据,使用变量employee_name中的数据。},//纵坐标yAxis: {axisLabel: {formatter: '{value}%',},splitLine: {show: false  // 隐藏纵坐标轴的背景横线},},//图形颜色color: ['#b381dd','#31a3ff'],//提示框,鼠标悬停在图形上的注解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: 'black',fontSize: 12}}}}},],};myChart4.setOption(option4);    </script>";//查询站别的良率、不良率
// $sql5 = "SELECT 
//     operation_code,
//     SUM(IFNULL(transaction_quantity, 0)) AS total_transaction_quantity,
//     SUM(IFNULL(bad_quantity, 0)) AS total_bad_quantity,
//     CASE
//         WHEN (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0))) = 0 THEN 0
//         ELSE ROUND((SUM(IFNULL(transaction_quantity, 0)) / (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0)))*100), 2)
//     END AS good_rate,
//     CASE
//         WHEN (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0))) = 0 THEN 0
//         ELSE 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
// GROUP BY operation_code";
// $result5 = DB_query($sql5, $db);//员工工时
$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: 15 // 设置滑动条型式的高度为20像素}, {type: 'inside',  // 内置型式的dataZoom组件start: 0,  // 默认数据窗口范围的起始位置为0end: 30,  // 默认数据窗口范围的结束位置为30xAxisIndex: [0],  // 设置dataZoom组件影响的x轴索引,默认为第一个x轴filterMode: 'filter',  // 数据窗口范围的定义模式为filter过滤模式height: 15 }],//标题// title: {//     text: '工序待生产工时统计'// },//图形颜色color: ['#3398DB'],//提示框,鼠标悬停在图形上的注解tooltip: {trigger: 'axis',axisPointer: {            // 坐标轴指示器,坐标轴触发有效type: 'line'        // 默认为直线,可选为:'line' | 'shadow'}},//配置网格组件,用于定义图表的位置和大小grid: {top: '20%',  // 增加top的值来创建间距left: '3%',right: '3%',bottom: '20%',  // 增加bottom的值来创建间距containLabel: true, //自动计算并包含坐标轴标签、刻度和标题等内容在内。},//横坐标xAxis: {name: '工序',nameTextStyle: {padding: [0, 0, -25, -25]    // 横坐标名称与原位置的边距},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}},splitLine: {show: false  // 隐藏纵坐标轴的背景横线},},],series: [{name: '工时',type: 'bar',barWidth: '25%',data: num7,itemStyle: {normal: {label: {show: true,position: 'top',textStyle: {color: 'black',fontSize: 12}}}}},],};myChart7.setOption(option7);    </script>";

css

body {background-color: #f3f6fb;padding: 0px;margin: 0px;
}.kanban_all {/* border: 1px solid black; */width: 100%;display: flex;justify-content: center;align-items: center;
}.kanban_all_position {/* border: 1px solid black; */width: 98%;display: flex;flex-wrap: wrap;
}.kanban_line {/* border: 1px solid black; */width: calc(50% - 2%);margin: 1% 1% 0 1%;background-color: #fff;
}.kanban_title {background-color: #fff;padding: 2%;font-size: 120%;font-weight: bold;font-family: '华文细黑';border-left: 4px solid #75b2fa;border-bottom: 1px solid #f3f6fb;
}.kanban_content {padding: 1%;background-color: #fff;
}.kanban_content table {width: 100%;/* border: 1px solid green; */
}.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: 4%;
}/* 
.kanban_line_double .left .kanban_content {padding: 2%;
} */.kanban_line_double .middle {background-color: #f3f6fb;width: 4%;
}.kanban_line_double .right {/* border: 1px solid black; */width: 48%;height: 100%;
}.kanban_line_double .right .kanban_title {padding: 4%;
}/*
.kanban_line_double .right .kanban_content {padding: 2%;
} *//* 表格 */
.table {text-align: center;/* border: 1px solid black; */border-collapse: collapse;
}.table tr th {width: 20%;/* border: 1px solid black; */color: #5a5a5a;font-weight: bold;
}.table tr td {width: 20%;text-align: center;padding-top: 1%;color: #5a5a5a;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/101084.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

nginx防盗链

防盗链介绍 通过二次访问&#xff0c;请求头中带有referer&#xff0c;的方式不允许访问静态资源。 我们只希望用户通过反向代理服务器才可以拿到我们的静态资源&#xff0c;不希望别的服务器通过二次请求拿到我们的静态资源。 盗链是指在自己的页面上展示一些并不在自己服务…

Android Selector 的使用

什么是 Selector&#xff1f; Selector 和 Shape 相似&#xff0c;是Drawable资源的一种&#xff0c;可以根据不同的状态&#xff0c;设置不同的图片效果&#xff0c;关键节点 < selector > &#xff0c;例如&#xff1a;我们只需要将Button的 background 属性设置为该dr…

数据结构-->栈

&#x1f495;休对故人思故国&#xff0c;且将新火试新茶&#xff0c;诗酒趁年华&#x1f495; 作者&#xff1a;Mylvzi 文章主要内容&#xff1a;详解链表OJ题 前言&#xff1a; 前面已经学习过顺序表&#xff0c;链表。他们都是线性表&#xff0c;今天要学习的栈也是一种线…

MYSQL数据库

数据库概述 1、基本概念 1.1、数据&#xff1a;(DATA) 描述事物的符号记录,包括数字&#xff0c;文字、图形、图像、声音、档案记录等,以“记录”形式按统一的格式进行存储 1.2、表&#xff1a; 将不同的记录组织在一起&#xff0c;用来存储具体数据 1.3、数据库&#xff1…

Nacos

Nacos介绍 Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service的⾸字⺟简称&#xff0c;⼀个更易于构 建云原⽣应⽤的动态服务发现、配置管理和服务管理平台。 在这个介绍中&#xff0c;可以看出Nacos⾄少有三个核⼼功能&#xff1a; 1. 动态服务发现 2. 配…

html动态爱心代码【三】(附源码)

目录 前言 特效 内容修改 完整代码 总结 前言 七夕马上就要到了&#xff0c;为了帮助大家高效表白&#xff0c;下面再给大家带来了实用的HTML浪漫表白代码(附源码)背景音乐&#xff0c;可用于520&#xff0c;情人节&#xff0c;生日&#xff0c;表白等场景&#xff0c;可直…

【Java从入门到精通|1】从特点到第一个Hello World程序

写在前面 在计算机编程领域&#xff0c;Java是一门广泛应用的高级编程语言。它以其强大的跨平台性能、丰富的库和生态系统以及易于学习的语法而备受开发者欢迎。本文将引导您逐步了解Java的特点、如何安装和配置开发环境&#xff0c;以及如何编写您的第一个Java程序。 一、Java…

RISC-V公测平台发布· CoreMark测试报告

一. CoreMark简介 CoreMark是一款用于评估CPU性能的基准测试程序&#xff0c;它包含了多种不同的计算任务&#xff0c;包括浮点数、整数、缓存、内存等方面的测试。CoreMark的测试结果通常被用来作为CPU性能的参考&#xff0c;它可以帮助开发人员和系统管理员评估不同处理器和…

【音视频】基于webrtc的聊天室的设计

目录 术语 webrtc建连流程 系统整体架构 信令服务器房间状态管理 用户加入房间流程 用户加入房间并推流&#xff1a; 其他用户订阅此用户流 用户加入房间并订阅房间其他所有用户 用户退出房间流程 平行集群模式​编辑 第一阶段demo 设计 参考文章 术语 sdp: 在webrt…

冷冻冷藏自动化立体库|HEGERLS四向穿梭车助力打造冷链智能仓储新力量

随着中国仓储物流整体规模和低温产品消费需求的稳步增长&#xff0c;冷链市场应用潜力不断释放。而在实际运行中&#xff0c;由于冷库容量不足、基础设施落后、管理机制欠缺等原因&#xff0c;经常出现“断链”现象&#xff0c;严重威胁到产品质量和消费者安全。 河北沃克金属…

美国FDA医疗器械分类目录数据库查询

最近我们在接到FDA医疗器械咨询项目时&#xff0c;经常收到客户关于公司产品在美国FDA医疗器械认证中或是国内所属的产品类别以及如何查询产品分类的疑问。在这里&#xff0c;我将为大家解答这些问题&#xff0c;希望能够提供帮助&#xff01; 美国FDA医疗器械产品目录中包含了…

CSS如何将浏览器文字设置小于12px

CSS如何将浏览器文字设置小于12px 使用transform: scale进行缩放 transform: scale(0.8);<div><p class"first">第一段文字</p><p class"second">第二段文字</p> </div>.first {font-size: 12px; }.second {font-si…

技术分享 | 如何编写同时兼容 Vue2 和 Vue3 的代码?

LigaAI 的评论编辑器、附件展示以及富文本编辑器都支持在 Vue2&#xff08;Web&#xff09;与 Vue3&#xff08;VSCode、lDEA&#xff09;中使用。这样不仅可以在不同 Vue 版本的工程中间共享代码&#xff0c;还能为后续升级 Vue3 减少一定阻碍。 那么&#xff0c;同时兼容 Vue…

Chapter 14: Using Web Services | Python for Everybody 讲义笔记_En

文章目录 Python for Everybody课程简介Python and Web ServicesUsing Web ServiceseXtensible Markup Language - XMLParsing XMLJavaScript Object Notation - JSONParsing JSONApplication Programming InterfacesSecurity and API usageGlossary Python for Everybody Expl…

java 项目运行时,后端控制台出现空指针异常---java.lang.NullPointerException

项目场景&#xff1a; 提示&#xff1a;这里简述项目背景&#xff1a; 场景如下&#xff1a; java 项目运行时&#xff0c;后端控制台出现如下图所示报错信息&#xff1a;— 问题描述 提示&#xff1a;这里描述项目中遇到的问题&#xff1a; java 项目运行时&#xff0c;后…

代码随想录算法训练营第60天|动态规划part17| 647. 回文子串、516.最长回文子序列、动态规划总结篇

代码随想录算法训练营第60天&#xff5c;动态规划part17&#xff5c; 647. 回文子串、516.最长回文子序列、动态规划总结篇 647. 回文子串 647. 回文子串 思路&#xff1a; 暴力解法 两层for循环&#xff0c;遍历区间起始位置和终止位置&#xff0c;然后还需要一层遍历判断…

Redis原理剖析

一、Redis简介 Redis是一个开源的&#xff0c;基于网络的&#xff0c;高性能的key-value数据库&#xff0c;弥补了memcached这类key-value存储的不足&#xff0c;在部分场合可以对关系数据库起到很好的补充作用&#xff0c;满足实时的高并发需求。 Redis跟memcached类似&#…

SqlServer 快速数据库脚本迁移

文章目录 前言数据库脚本数据库->任务->生成脚本选择数据库对象高级 如何迁移&#xff1a;脚本修改 如何使用新建数据库 前言 做工业的&#xff0c;经常遇到内网的项目&#xff0c;就是数据往本地的数据库传。由于这个问题所以我们需要新建一个数据库。最合适的就是数据…

App Tamer for Mac CPU智能控制管理

App Tamer是一款针对 macOS 平台的软件&#xff0c;它可以帮助用户有效地管理和控制正在运行的应用程序。通过优化 CPU 使用率&#xff0c;减少电池消耗和降低系统负载&#xff0c;App Tamer 提供了更加流畅和高效的计算体验。 App Tamer 的主要特点包括&#xff1a; 智能控制&…

使用R语言绘制折线图

写在前面 昨天我们分享了使用Python绘制折线图的教程,跟着NC学作图 | 使用python绘制折线图,考虑到很多同学基本不使用Python绘图。那么,我们也使用R语言复现此图形。 此外,在前期的教程中,我们基本没有分享过折线图的教程。因此,我们在这里也制作一期关于折线图的教程。…