echarts--》柱状图引入数据库数据

雪月圣雕 · 发表于 2021-4-20 09:30:52

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

<!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">
<title>pie</title>
<script src="echarts.js"></script>
</head>
<body>
<div id="main" style="height: 400px;width: 1024px;"></div>
<div id="main2" style="height: 400px;width: 1024px;"></div>
<script src="test_js.js"></script>
<script type="text/javascript">
<?php
//添加公共文件
include_once 'mysql_public.php';
//获取所有风险记录
$sql_risk = "SELECT * FROM `trisk_list`";
//获取前100条管道信息
$sql = "SELECT * FROM `lines` LIMIT 100";
//获取结果集
$res = myerror($sql);
$res_risk = myerror($sql_risk);
//获取结果集数据条数：多少行记录
$rows = mysqli_num_rows($res);
$rows_risk = mysqli_num_rows($res_risk);
//保存取出的记录：
$points = array();
//利用while获取，每次取到数据之后判断保存数据的结果，只要结果不为false，那么一直取
while($row = mysqli_fetch_assoc($res))
{
$points[] = $row; //于是points成为二维数组
}
while($row_risk = mysqli_fetch_assoc($res_risk))
{
//获取风险统计数组
$risks[] = $row_risk;
}
//echo '<pre>';
//建立一个循环，修改每个风险记录的时间，只保留年份。
for($index = 0; $index < $rows_risk; $index++)
{
//对日期部分进行分割，分割后返回的datetime为一个数组。
$dateTime = explode('-',$risks[$index]['Record_time']);
//令风险记录时间只保留年份
$risks[$index]['Record_time'] = $dateTime[0];
}
//输出修改后的风险记录
//var_dump($risks);
//设计一个变量来接受各个年份的数据
$RiskNum = array(
'2019'=>array(
'高风险'=>0,
'中风险'=>0,
'低风险'=>0
),
'2020'=>array(
'高风险'=>0,
'中风险'=>0,
'低风险'=>0
),
'2021'=>array(
'高风险'=>0,
'中风险'=>0,
'低风险'=>0
)
);
//记录不同年份的各个风险类型的数量。
for($index = 0; $index < $rows_risk; $index++)
{
if((int)($risks[$index]['Record_time']) == 2019)
{
if((int)($risks[$index]['Risk_type']) == 1)
{
$RiskNum['2019']['高风险']++;
}
else if((int)($risks[$index]['Risk_type']) == 2)
{
$RiskNum['2019']['中风险']++;
}
else if((int)($risks[$index]['Risk_type']) == 3)
{
$RiskNum['2019']['低风险']++;
}
}
else if((int)($risks[$index]['Record_time']) == 2020)
{
if((int)($risks[$index]['Risk_type']) == 1)
{
$RiskNum['2020']['高风险']++;
}
else if((int)($risks[$index]['Risk_type']) == 2)
{
$RiskNum['2020']['中风险']++;
}
else if((int)($risks[$index]['Risk_type']) == 3)
{
$RiskNum['2020']['低风险']++;
}
}
else if((int)($risks[$index]['Record_time']) == 2021)
{
if((int)($risks[$index]['Risk_type']) == 1)
{
$RiskNum['2021']['高风险']++;
}
else if((int)($risks[$index]['Risk_type']) == 2)
{
$RiskNum['2021']['中风险']++;
}
else if((int)($risks[$index]['Risk_type']) == 3)
{
$RiskNum['2021']['低风险']++;
}
}
}
//输出风险数量数组
//var_dump($RiskNum);
//将php数组转为json格式
$RiskNum_json = json_encode($RiskNum);
?>
//引用该js文件后，该js文件需要获取外部数据
var RiskNum_json = <?=$RiskNum_json?>;
var RiskNum = eval(RiskNum_json);
//输出2019年高风险数据，测试传输成功与否
//alert(RiskNum['2019']['高风险']);
//legend:图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
//legend,会在统计图顶部显示不同颜色的按钮。
var myChart = echarts.init(document.getElementById('main2'));
var option = {
title:{text:"年度风险数量对比直方图",left:"center"},
legend: {
top:"7%",
data:['高风险','中风险','低风险']
},
toolbox: {
show :true,
feature: {
dataView:{show:true,title:'数据视图',optionToContent:function(){
var table = '<table class="dataViewTable"><tbody><tr class="dataViewTr">'
+ '<td class="dataViewHead">' + 'year'+ '</td>'
+ '<td class="dataViewHead">' + '高风险' + '</td>'
+ '<td class="dataViewHead">' + '中风险' + '</td>'
+ '<td class="dataViewHead">' + '低风险' + '</td>'
+ '</tr>';
for(var index = 2019; index <= 2021; index++){
var year = index.toString();
table += '<tr class="dataViewTr">'
+ '<td class="dataViewTd">' + index + '</td>'
+ '<td class="dataViewTd">' + RiskNum[year]['高风险'] + '</td>'
+ '<td class="dataViewTd">' + RiskNum[year]['中风险'] + '</td>'
+ '<td class="dataViewTd">' + RiskNum[year]['低风险'] + '</td>'
+ '</tr>';
}
table += '</tbody></table>';
return table;
}},
restore:{show:true},
magicType:{type:['bar','line']},
saveAsImage:{show:true}
}
},
tooltip: {
},
xAxis:{
type:'category',
data: ['2019','2020','2021']
},
yAxis:{
type:'value'
},
dataset:{
source:[
['year','高风险','中风险','低风险'],
['2019',RiskNum['2019']['高风险'],RiskNum['2019']['中风险'],RiskNum['2019']['低风险']],
['2020',RiskNum['2019']['高风险'],RiskNum['2020']['中风险'],RiskNum['2020']['低风险']],
['2021',RiskNum['2021']['高风险'],RiskNum['2021']['中风险'],RiskNum['2021']['低风险']],
]
},
series: [
{
//name: '高风险',
type: 'bar',
// 根据stack的值来选取那些柱子堆叠在一起
stack: '风险等级',
color: 'red',
emphasis: {
focus: 'series'
},
//data: [320, 332, 301],
barWidth: '25%'
},
{
//name: '中风险',
type: 'bar',
stack: '风险等级',
color: 'orange',
emphasis: {
focus: 'series'
},
//data: [120, 132, 101],
barWidth: '25%'
},
{
//name: '低风险',
type: 'bar',
stack: '风险等级',
color: 'blue',
emphasis: {
focus: 'series'
},
//data: [220, 182, 191],
barWidth: '25%'
}
]
};
//把配置项给实例对象
myChart.setOption(option);
</script>
</body>
</html>

复制代码

账号		自动登录	找回密码
密码			立即注册

[学习笔记] echarts--》柱状图引入数据库数据

马上注册，结交更多好友，享用更多功能^_^

浏览过的版块