将风险地图的代码区分一下
相较于之前的代码，我将取数据库数据并修改的代码写到一个新的php文件中去（mysql_RiskDataGet.php），然后在JavaScript中嵌入PHP代码进行引入。需要注意的是，这个JavaScript本身是存在于php代码中的（见代码后缀），所以该JavaScript中的PHP是可以被解析的。acumulator_test.php:
<!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>
<script src="jquery.js"></script>
<script src="jquery.table2excel.js"></script>
</head>
<body>
<!--每个div单独占据一行，如果想要显示多个统计图，可以创建多个div-->
<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';
//获取所有风险记录
include_once 'mysql_RiskDataGet.php';
?>
//引用该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,
lang: ['数据视图', '关闭', '导出Excel'], // 按钮
contentToOption: function (opts) {
$("#tableExcel_Day").table2excel({ // 下载jquery.table2excel.js，引入，$("#tempChart")是table的id
exclude: ".noExl", //过滤位置的 css 类名， 有class = “noExl” 的行不被导出
filename: '风险统计图' + ".xls", // 文件名称
name: "Excel Document Name.xls",
exclude_img: true,
exclude_links: true,
exclude_inputs: true
});
},
optionToContent:function(option){
var legend = option.legend;
var series = option.series; //坐标数据
var tdHeads = ''; //表头第一列
var tdBodys = ''; //表数据
//组装表头
var nameData = new Array('较大风险','中风险','低风险','2019年风险数量','2020年风险数量','2021年风险数量');
for (var i = 0; i < nameData.length; i++) {
tdHeads += '<td style="padding: 0 10px">' + nameData + '</td>';
}
var table = '<table id="tableExcel_Day" border="1" class="table-bordered table-striped" style="width:100%;text-align:center" ><tbody><tr>' + tdHeads + '</tr>';
//组装表数据
for (var i = 0; i < 2;i++) {
for (var j = 0; j < 3 ; j++) {
var temp = series.data['value'];
if (temp != null && temp != undefined) {
tdBodys += '<td>' + temp + '</td>';
} else {
tdBodys += '<td></td>';
}
}
// table += '<tr>' + tdBodys + '</tr>';
// tdBodys = '';
}
table += '<tr>' + tdBodys + '</tr>';
table += '</tbody></table>';
return table;
}
},
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';
//获取所有风险记录
include_once 'mysql_RiskDataGet.php';
?>
//引用该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:'数据视图',
lang: ['数据视图', '关闭', '导出Excel'], // 按钮
contentToOption: function (opts) {
$("#tableExcel_Day").table2excel({ // 下载jquery.table2excel.js，引入，$("#tempChart")是table的id
exclude: ".noExl", //过滤位置的 css 类名， 有class = “noExl” 的行不被导出
filename: '风险统计图' + ".xls", // 文件名称
name: "Excel Document Name.xls",
exclude_img: true,
exclude_links: true,
exclude_inputs: true
});
},
optionToContent:function(option){
var dataset = option.dataset;
var axisData = option.xAxis.data; //坐标数据
var tdHeads = '<tdstyle="padding: 0 10px">时间</td>'; //表头第一列
var tdBodys = ''; //表数据
//组装表头
var nameData = new Array("高风险","中风险","低风险");
for (var i = 0; i < nameData.length; i++) {
tdHeads += '<td style="padding: 0 10px">' + nameData + '</td>';
}
var table = '<table id="tableExcel_Day" border="1" class="table-bordered table-striped" style="width:100%;text-align:center" ><tbody><tr>' + tdHeads + '</tr>';
//组装表数据
for (var i = 1; i < 4;i++) {
for (var j = 1; j < 4 ; j++) {
var temp = dataset.source;
if (temp != null && temp != undefined) {
tdBodys += '<td>' + temp + '</td>';
} else {
tdBodys += '<td></td>';
}
}
table += '<tr><td style="padding: 0 10px">' + axisData + '</td>' + tdBodys + '</tr>';
tdBodys = '';
}
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['2020']['高风险'],RiskNum['2020']['中风险'],RiskNum['2020']['低风险']],
['2021',RiskNum['2021']['高风险'],RiskNum['2021']['中风险'],RiskNum['2021']['低风险']],
]
},
series: [
{
//name: '高风险',
type: 'bar',
// 根据stack的值来选取那些柱子堆叠在一起
stack: '风险等级',
color: 'red',
emphasis: {
focus: 'series'
},
//data: ,
barWidth: '25%'
},
{
//name: '中风险',
type: 'bar',
stack: '风险等级',
color: 'orange',
emphasis: {
focus: 'series'
},
//data: ,
barWidth: '25%'
},
{
//name: '低风险',
type: 'bar',
stack: '风险等级',
color: 'blue',
emphasis: {
focus: 'series'
},
//data: ,
barWidth: '25%'
}
]
};
//把配置项给实例对象
myChart.setOption(option);
</script>
</body>
</html>
页:
[1]