风险统计图---》引入饼图数据库数据

雪月圣雕 · 发表于 2021-4-21 07:51:17

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

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

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 type="text/javascript">
<?php
//添加公共文件
include_once 'mysql_public.php';
//获取所有风险记录
$sql_risk = "SELECT * FROM `trisk_list`";
//获取结果集
$res_risk = myerror($sql_risk);
//获取结果集数据条数：多少行记录
$rows_risk = mysqli_num_rows($res_risk);
//利用while获取，每次取到数据之后判断保存数据的结果，只要结果不为false，那么一直取
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);
//color为此系列自己的调色盘
//radius:饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
//数据库传递过来的数据项是一个二维数组，如何处理？
//解：将数组传递给data即可
//value_1,表示高风险总数。以此类推。
var value_1 = RiskNum['2019']['高风险']+RiskNum['2020']['高风险']+RiskNum['2021']['高风险'];
var value_2 = RiskNum['2019']['中风险']+RiskNum['2020']['中风险']+RiskNum['2021']['中风险'];
var value_3 = RiskNum['2019']['低风险']+RiskNum['2020']['低风险']+RiskNum['2021']['低风险'];
var value_2019 = RiskNum['2019']['高风险']+RiskNum['2019']['中风险']+RiskNum['2019']['低风险'];
var value_2020 = RiskNum['2020']['高风险']+RiskNum['2020']['中风险']+RiskNum['2020']['低风险'];
var value_2021 = RiskNum['2021']['高风险']+RiskNum['2021']['中风险']+RiskNum['2021']['低风险'];
var RiskData = [
{value:value_1,name:"较大风险"},
{value:value_2,name:"中风险"},
{value:value_3,name:"低风险"},
];
var RiskData2 = [
{value:value_2019,name:"2019年风险数量"},
{value:value_2020,name:"2020年风险数量"},
{value:value_2021,name:"2021年风险数量"},
];
//定位：如果使用center/middle等位置描述，需写成字符串格式,百分比也这么写:radius:'55%'。如果写绝对值，那么以number形式书写，单位是像数值(单位不用写)
var myChart = echarts.init(document.getElementById("main"));
var option = {
title: [{
text: '风险统计图',
left: "center"
},{
subtext: "风险类型占比",
left: "18%",
top: "75%",
textAline:'center'
},{
subtext: "年度风险总量",
left: "74%",
top: "75%",
textAline:'center'
}],
tooltip: {
trigger: 'item',
//饼图： a:系列名，b:数据名,c:数值，d：百分比。
//formatter，提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
toolbox:{
show: true,
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
data:['较大风险','中风险','低风险','2019年风险数量','2020年风险数量','2021年风险数量'],
top:'10%',
},
series:[{
name: "风险类型占比",
color:['red','orange','blue'],
type: "pie",
radius: '35%',
center:['50%','50%'],
data: RiskData,
right:'55%',
left:0,
top:0,
buttom:0
},{
name: "年度风险总量",
color:['red','orange','pink'],
type: "pie",
radius: '35%',
data: RiskData2,
left:'55%',
right:0,
top:0,
buttom:0
}]
};
myChart.setOption(option);
// 处理点击事件并且弹出数据名称
myChart.on('click', function (params) {
alert(params.name);
});
</script>
<script type="text/javascript">
<?php
//添加公共文件
include_once 'mysql_public.php';
//获取所有风险记录
$sql_risk = "SELECT * FROM `trisk_list`";
//获取结果集
$res_risk = myerror($sql_risk);
//获取结果集数据条数：多少行记录
$rows_risk = mysqli_num_rows($res_risk);
//利用while获取，每次取到数据之后判断保存数据的结果，只要结果不为false，那么一直取
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>

复制代码

bool想学C · 发表于 2021-4-21 08:45:29

厉害学习了

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

[学习笔记] 风险统计图---》引入饼图数据库数据

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

浏览过的版块