Echarts 数据视图 生成Excel的方法2
今日计划完成：饼图修改dataView样式，修改为表格的形式，然后添加将其输出为Excel的功能。解决的问题：1.数据获取问题，因为饼图的数据源是二维数组，且内部元素是有键值的，但是我在引用数据时忘记写成键值series.data[‘value’]而是写成series.data，因此一直无法获取到数据。2.表格显示问题，由于饼图有两个，我将两个饼图的数据合并展示，其表格的头部元素共有6个，由于使用了之前的柱状图的代码，导致数据全部集中在前三列，后三列空白，于是将源代码略作修改，将
table += '<tr>' + tdBodys + '</tr>';
移出外循环。
3.在测试过程中意外发现饼图数据与直方图数据对不上，检查完数据库之后发现，直方图某一年的数据引用可能出现了问题，最后发现是2020年高风险数据用错了，变成2019年的数据了，修改后就正常了。
<!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';
//获取所有风险记录
$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;
}
//输出修改后的风险记录
//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,
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';
//获取所有风险记录
$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;
}
//输出修改后的风险记录
//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:'数据视图',
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]