饼状图&柱状图
queryReportGraphics.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript" src="jquery-2.1.4.js"></script>
<script type="text/javascript" src="reportGraphics.js"></script>
<script type="text/javascript" src="echarts.common.min.js"></script>
<script type="text/javascript" src="echarts.js"></script>
<script type="text/javascript" src="echarts.min.js"></script>
<script type="text/javascript" src="queryReportGraphicsl.js"></script>
<title>queryReportGraphics</title>
</head>
<body>
<div class="row">
<div class="box col-md-12">
<div class="box-inner">
<div class="box-content">
<div class="charts-content">
<!-- 1.饼图 -->
<div class="map-area">
<div class="charts-item-task">
<div id="regularClass-piechart"></div>
</div>
<div class="error-content">
<div id="regularSubClass-piechart"></div>
</div>
</div>
<div class="charts-btm">
<div class="charts-item-large">
<div id="productName-piechart"></div>
</div>
<div class="charts-item1">
<div id="error-chart"></div>
</div>
</div>
<!-- 2.柱形图 -->
<div class="map-area">
<div class="charts-item-task">
<div id="regularProblem-barchart"></div>
</div>
<div class="error-content">
<div id="regularDistort-barchart"></div>
</div>
</div>
<div class="charts-btm">
<div class="charts-item-large">
<div id="productProblem-barchart"></div>
</div>
<div class="charts-item">
<div id="productDistort-barchart"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<style>
.row,.box-inner{
/* min-width:1140px; */
overflow:auto;
}
.charts-content {
width: 100%;
min-width:1100px;
overflow: hidden;
}
#world-map {
width: 1100px;
min-width:800px;
height: 400px;
margin-left: -50px;
cursor: default;
}
#productDistort-barchart {
width: 500px;
/* min-width:180px; */
height: 250px;
z-index:100;
}
.invisible-bolck{
width:10%;
height:100%;
min-width:100px;
opacity:0;
}
.error-content{
display: flex;
display: -webkit-flex;
/* width: 25%; */
width:48%;
height: 270px;
border: 1px solid #2fa4e7;
/* position:absolute; */
background-color: #fff;
align-items:center;
justify-content: center;
right:1%;
border-radius: 6px;
overflow-x: hidden;
/* box-shadow: -2px -2px 5px #2fa4e7; */
}
.task-content{
display: flex;
display: -webkit-flex;
position:absolute;
left:10px;
/* width: 25%; */
width:270px;
background-color: #fff;
height: 80%;
border: 1px solid #2fa4e7;
border-radius: 6px;
overflow-x: hidden;
align-items:center;
justify-content: center;
/* box-shadow: -2px -2px 5px #2fa4e7; */
}
#regularClass-piechart{
width: 500px;
height: 250px;
z-index:100;
}
#regularProblem-barchart{
width: 500px;
height: 250px;
z-index:100;
}
.charts-btm {
width: 100%;
display: flex;
display: -webkit-flex;
justify-content: space-around;
margin-bottom: 10px;
}
.map-area {
position: relative;
display: flex;
align-items: center;
/* height: 350px; */
margin-bottom: 20px;
margin-top: 10px;
width: 100%;
/* min-width:1000px; */
justify-content: space-around;
}
#agent-chart,
#productName-piechart {
width: 500px;
/* max-width:100%; */
height: 250px;
}
#productProblem-barchart {
width: 500px;
/* max-width:100%; */
height: 250px;
}
#regularSubClass-piechart{
width: 500px;
/* max-width:100%; */
height: 250px;
}
#regularDistort-barchart{
width: 500px;
/* max-width:100%; */
height: 250px;
}
.charts-item1 {
display:flex;
display:-webkit-flex;
justify-content: center;
align-items: center;
width: 48%;
min-width:320px;
height: 270px;
border: 1px solid hsl(210, 100%, 99%);
border-radius: 6px;
overflow-x: hidden;
/* box-shadow: -2px -2px 5px #2fa4e7; */
}
.charts-item {
display:flex;
display:-webkit-flex;
justify-content: center;
align-items: center;
width: 48%;
min-width:320px;
height: 270px;
border: 1px solid #2fa4e7;
border-radius: 6px;
overflow-x: hidden;
/* box-shadow: -2px -2px 5px #2fa4e7; */
}
.charts-item-large {
display:flex;
display:-webkit-flex;
justify-content: center;
align-items: center;
width: 48%;
min-width:450px;
height: 270px;
border: 1px solid #2fa4e7;
border-radius: 6px;
overflow: hidden;
/* box-shadow: -2px -2px 5px #2fa4e7; */
}
.charts-item-task{
display:flex;
display:-webkit-flex;
justify-content: center;
align-items: center;
width: 48%;
min-width:450px;
height: 270px;
border: 1px solid #2fa4e7;
border-radius: 6px;
overflow: hidden;
/* box-shadow: -2px -2px 5px #2fa4e7; */
}
</style>
</html>
queryReportGraphicsl.js
$(function () {
//饼图-声明变量
var pieRegularClass = {
"ruleType": {
"types": {
"WEB_LDAP": 0,
"文件操作": 0,
"WEB_XSS": 0,
"Cherry.zip": 0,
"WEB_SQL": 0,
"Orange.zip": 2,
"存储和传输": 0,
"Android": 0,
"密码算法": 0,
"WEB_XXE": 0,
"认证鉴权": 0,
"WEB_CRLF": 0,
"信息泄露": 6,
"WEB_代码注入": 0,
"密码算法:Android": 0,
"WEB_代码注入:Android": 0,
"Mango.zip": 239
},
"ruleTypeTotal": 27530,
"ruleTypeDistortTotal": 135,
"ruleTypeTagTotal": 247
},
"ruleName": {
"ruleNameTypeDistortTotal": 135,
"types": {
"FIND_XXE": 0,
"FIND_MD5": 0,
"FIND_HTML_PASSWORD": 0,
"Cherry.zip": 0,
"Orange.zip": 2,
"FIND_MODE_WORLD": 0,
"FIND_GEOLOCATIONENABLED": 0,
"FIND_JSP_EVAL": 0,
"FIND_WebView_Html": 0,
"FIND_SHA1": 0,
"FIND_UNLINK": 0,
"FIND_LDAP": 0,
"FIND_CANONICALPATH": 0,
"FIND_SSL": 0,
"FIND_SHELL_system": 0,
"Mango.zip": 22,
"FIND_HTML_AUTOCOMPLETE": 0,
"FIND_PASSWORD": 6,
"FIND_INTENT_ACTIVITY": 0,
"FIND_SHELL": 0,
"FIND_RSA_KeyFactory": 0,
"FIND_NEXTENTRY": 0,
"FIND_HmacSHA_KeyFactory": 0,
"FIND_XXE_SAXParser": 0,
"FIND_CLIPBOAR": 0,
"FIND_RSA": 0,
"FIND_HTTP_HEADER": 0,
"FIND_SETRESULT": 0,
"其他": 217,
"FIND_MYBATIS": 0,
"FIND_AESECB": 0,
"FIND_RANDOM": 0,
"FIND_HmacSHA": 0,
"FIND_OS_INJECT": 0,
"FIND_CIPHERSUITES": 0,
"FIND_PROTOCOLS": 0,
"FIND_AES_128": 0,
"FIND_OPENFILEOUTPUT": 0,
"FIND_CLASSLOADER": 0,
"FIND_PREFERENCES": 0
},
"ruleNameTypeTagTotal": 247,
"ruleNameTypeTotal": 27530
},
"productName": {
"productNameTotal": 27530,
"distortTypes":{
"社交":9,
"游戏中心":37,
"Hicloud云服务":0,
"华为帐号":0,
"应用市场":0,
"HMS":99
},
"types": {
"社交": 8,
"游戏中心": 39,
"华为帐号": 0,
"应用市场": 2,
"HMS": 198
},
"productNameTagTotal": 247,
"productNameDistortTotal": 135
}
}
// console.log(pieRegularClass)
// console.log(pieRegularClass.ruleType)
// console.log(pieRegularClass.ruleName)
// console.log(pieRegularClass.productName)
// 大类声明
textpie1 = '大类';
var data1 = [];
// 小类声明
textpie2 = '小类';
var data2 = [];
//产品声明
textpie3 = '产品'
var data3 = [];
var ruleTypeObj = pieRegularClass.ruleType.types;
for (var key in ruleTypeObj) {
if(ruleTypeObj[key]!==0){
data1.push({value:ruleTypeObj[key],name:key})
}
}
var ruleNameObj=pieRegularClass.ruleName.types;
for(var key in ruleNameObj){
if(ruleNameObj[key]!==0){
data2.push({value:ruleNameObj[key],name:key})
}
}
var productNameObj=pieRegularClass.productName.types;
for(var key in productNameObj){
if(productNameObj[key]!==0){
data3.push({value:productNameObj[key],name:key})
}
}
//饼状图-模板
function fun_echarts_PIE(echartsPieCnt, pieName, datas) {
echartsPieCnt.setOption({
title: {
text: pieName, //名字
subtext: '',
left: 10
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
},
series: [{
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: datas, //数据
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
normal: {
color: function (params) {
var colorList = ['#4F6D9F', '#0cA98C', '#F8B131', '#EB5345', '#635CA0', '#4275AA',
'#4F6D9F', '#0cA98C', '#F8B131', '#EB5345', '#635CA0', '#4275AA'
];
return colorList[params.dataIndex];
}
}
}
}]
});
};
// 饼图-初始化图表标签
var myChart1 = echarts.init(document.getElementById('regularClass-piechart'));
fun_echarts_PIE(myChart1, textpie1, data1);
var myChart2 = echarts.init(document.getElementById('regularSubClass-piechart'));
fun_echarts_PIE(myChart2, textpie2, data2);
var myChart3 = echarts.init(document.getElementById('productName-piechart'));
fun_echarts_PIE(myChart3, textpie3, data3);
//柱状图-声明变量
textbar1 = '大类'
var data_Type1 = [],
data_Qty1 = [],
textbar2 = '小类'
var data_Type2 = [],
data_Qty2 = []
textbar3 = '产品（有效问题数图）'
var data_Type3 = [],
data_Qty3 = []
textbar4 = '产品（误报率图）'
var data_Type4 = [],
data_Qty4 = []
var ruleTypeObjBar = pieRegularClass.ruleType.types;
for( var key in ruleTypeObjBar){
if(ruleTypeObjBar[key]!==0){
data_Type1.push(key);
data_Qty1.push(ruleTypeObjBar[key]);
}
};
var ruleNameObjBar=pieRegularClass.ruleName.types;
for(var key in ruleNameObjBar){
if(ruleNameObjBar[key]!==0){
data_Type2.push(key);
data_Qty2.push(ruleNameObjBar[key]);
}
}
var productNameObjBar=pieRegularClass.productName.types;
for(var key in productNameObjBar){
if(productNameObjBar[key]!==0){
data_Type3.push(key);
data_Qty3.push(productNameObjBar[key]);
}
}
var productNameObjBar=pieRegularClass.productName.distortTypes;
for(var key in productNameObjBar){
if(productNameObjBar[key]!==0){
data_Type4.push(key);
data_Qty4.push(productNameObjBar[key]);
}
}
// console.log(data_Qty1);
// console.log(data_Type1);
//console.log(pieRegularClass.ruleType.types)
//柱状图-模板
function fun_echarts_BAR(echartsBarCnt, barName, data_Types, data_Qtys) {
echartsBarCnt.setOption({
title: {
text: barName,
x: 'center'
},
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: data_Types, // ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}],
yAxis: [{
type: 'value'
}],
series: [{
name: '直接访问',
type: 'bar',
center: ['45%', '45%'],
barWidth: '18%',
data: data_Qtys, //[10, 52, 200, 334, 390, 330, 220],
itemStyle: {
normal: {
color: function (params) {
var colorList = ['#4F6D9F', '#0cA98C', '#F8B131', '#EB5345', '#635CA0', '#4275AA',
'#4F6D9F', '#0cA98C', '#F8B131', '#EB5345', '#635CA0', '#4275AA'
];
return colorList[params.dataIndex];
}
}
}
}]
});
}
//柱状图-初始化图表标签
var myBarChart1 = echarts.init(document.getElementById('regularProblem-barchart'));
fun_echarts_BAR(myBarChart1, textbar1, data_Type1, data_Qty1);
var myBarChart2 = echarts.init(document.getElementById('regularDistort-barchart'));
fun_echarts_BAR(myBarChart2, textbar2, data_Type2, data_Qty2)
var myBarChart3 = echarts.init(document.getElementById('productProblem-barchart'));
fun_echarts_BAR(myBarChart3, textbar3, data_Type3, data_Qty3);
var myBarChart4 = echarts.init(document.getElementById('productDistort-barchart'));
fun_echarts_BAR(myBarChart4, textbar4, data_Type4, data_Qty4)
});
