代码拉取完成，页面将自动刷新
同步操作将从 北京科富兴科技有限公司/echarts_大数据可视化项目 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
<!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">
<link rel="stylesheet" href="./css/conmon.css">
<style>
* {
margin: 0;
padding: 0;
}
.columnar_bottom {
text-align: center;
color: #000;
font-size: 14px;
font-weight: bold;
}
.unit_num {
position: absolute;
left: 20px;
top: 43px;
font-size: 12px;
font-weight: bold;
}
</style>
</head>
<body>
<!-- 图表5 -->
<div class="imacontent">
<img src="./image/timg.gif" id="onloadingImg">
</div>
<div id="container_columnar">
<div class="unit_num">印章数量(单位：枚)</div>
<div id="columnar"></div>
<div class="columnar_bottom">图5：本月北京各区域印章备案量</div>
</div>
<script src="./js/jQuery.js"></script>
<script src="./js/echarts.min.js"></script>
<script src="./js/common.js"></script>
<script type="text/javascript">
// 请求数据
var resArr;//后端返回数据数组
var areaName = [];//北京各区名字
var currentMonthRecordsCount = [];//当月备案总量
var currentMonthPushCount = [];//当推送总量
//请求当月工商推送总量函数
//初始初调用的路径，以及轮询后调用的路径
var newUrl = "http://192.168.66.72:8080/chart/repeat";
getCurrentMonthPushData(newUrl);
//x秒请求一次数据
setInterval(function () { getCurrentMonthPushData(newUrl); }, setTimeSlideshow(10000));
var currentWindowHeight = document.documentElement.clientHeight;
var currentWindowWidth = document.documentElement.clientWidth;
document.getElementById("columnar").style.height = currentWindowHeight * 0.9 + 'px';
document.getElementById("columnar").style.width = currentWindowWidth + 'px';
window.onresize = function () {
var currentWindowHeight = document.documentElement.clientHeight;
document.getElementById("columnar").style.height = currentWindowHeight * 0.9 + 'px';
}
//图五start
var columnar = echarts.init(document.getElementById('columnar'));
var columnar_option = {
color: ['#336cbd', '#f69b23'],//配置柱状图工具颜色
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['本月印章备案总量', '本月工商印章备案量'],
top: '30',
right: '12%',
orient: 'vertical',
selectedMode: false,
itemGap: 5
},
toolbox: {
show: true,
orient: 'vertical',
right: '22%',
top: '25',
itemSize: 18,
emphasis: {//触发时
iconStyle: {
borderColor: "#006bb7"//图形的描边颜色
}
},
// feature: {
// saveAsImage: {
// show: true,
// title: '下载数据'
// }
// }
},
// calculable: true,
grid: {
// top: '40',
left: '36',
right: '4%',
bottom: '11%', //图表距离底部距离
},
xAxis: [
{
type: 'category',
name: '区域',
axisTick: { show: false }, //是否显示图表刻度
axisLine: { //显示图表两端箭头
symbol: ['none', 'arrow'],
symbolSize: [6, 6],//设置箭头大小
fontWeight: 'bold'
},
nameTextStyle: {
padding: [0, 0, 16, -10],
fontSize: 12,
fontWeight: 'bold'
},
axisLabel: {
interval: 0,
},
data: []
}
],
yAxis: [
{
type: 'value',
// name: '印章数量(单位：枚)', //设置Y轴名称，位置，字体样式等
// nameLocation: 'end',
// nameTextStyle: {
// fontWeight: 'bold',
// fontSize: 14
// },
splitLine: {
show: false
},
max: function (value) {
return value.max + value.max*0.2;
},
axisLine: {//设置Y轴顶部箭头样式
symbol: ['none', 'arrow'],
symbolSize: [6, 6]
},
axisTick: {
show: false
},
axisLabel: {
formatter: function () {
return "";
}
}
},
],
// animation: true,
// animationThreshold: 400,
// animationDuration: function (idx) {
// // 越往后的数据延迟越大
// return idx * 300;
// },
// animationDurationUpdate: function (idx) {
// // 越往后的数据延迟越大
// return idx * 300;
// },
// animationDelayUpdate: function (idx) {
// // 越往后的数据延迟越大
// return idx * 300;
// },
series: [
{
name: '本月印章备案总量',
type: 'bar',
barGap: 0,
itemStyle: {
normal: {
color: function (params) {
var colorList = ['#336cbd', '#336cbd', '#336cbd', '#336cbd', '#336cbd'
, '#336cbd', '#336cbd', '#336cbd', '#336cbd', '#336cbd'
, '#336cbd', '#336cbd', '#336cbd', '#336cbd', '#336cbd', '#336cbd'
];
return colorList[params.dataIndex]
},
},
// emphasis: { //鼠标经过强调样式
// borderWidth: .8,
// borderColor: '#fff',
// areaColor: "#f6b125",
// label: {
// fontSize: 20,
// }
// }
// // opacity:0.5
},
label: {
normal: {
show: true,
position: 'top',
distance: '12',
align: 'right',
textStyle: {//柱子顶部数字颜色
color: '#000'
},
formatter: function (a) {//设置字体每个三位用“，”隔开
var result = [],
counter = 0,
num = a.data;
num = (num || 0).toString().split('');
for (var i = num.length - 1; i >= 0; i--) {
counter++;
result.unshift(num[i]);
if (!(counter % 3) && i != 0) {
result.unshift(',');
}
}
// result.unshift("¥");
result = result.join('');
// result = "<span style='color:red;font-size:20px'>"+result.join('')+"</span>";
return result;
}
}
},
barMinHeight: 10,//设置柱子的最小高度
data: [11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11]
},
{
name: '本月工商印章备案量',
type: 'bar',
distance: '1',
barCategoryGap: '50%',
itemStyle: {
normal: {
color: function (params) {
var colorList = ['#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23'
, '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23'
, '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23'
];
return colorList[params.dataIndex]
},
// opacity:0.5
},
// emphasis: { //鼠标经过强调样式
// // borderWidth: .8,
// // borderColor: '#fff',
// // areaColor: "#f6b125",
// label: {
// fontSize: 20,
// }
// }
},
label: {
normal: {
show: true,
position: 'top',
align: 'left',
textStyle: {
color: '#000'
},
formatter: function (a) {//设置字体每个三位用“，”隔开
var result = [],
counter = 0,
num = a.data;
num = (num || 0).toString().split('');
for (var i = num.length - 1; i >= 0; i--) {
counter++;
result.unshift(num[i]);
if (!(counter % 3) && i != 0) {
result.unshift(',');
}
}
// result.unshift("¥");
result = result.join('');
// result = "<span style='color:red;font-size:20px'>"+result.join('')+"</span>";
return result;
}
}
},
barMinHeight: 10,//设置柱子的最小高度
data: [11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11]
}
]
};
//请求当月推送总量函数
var dataArrBack = {};//避免全局污染，设置对象
dataArrBack.currentMonthRecordsCountOld = [];//本月印章备案总量上一次请求数据
dataArrBack.currentMonthPushCountOld = [];//本月工商推送印章量上一次数据
dataArrBack.numOneFlag = 0;//判断是否是第一次请求标识
dataArrBack.indexFlagRecordsCount = [];//存储每次产生数据变化的印章备案量数据索引（series[0]）
dataArrBack.indexFlagPushCount = [];//存储每次产生数据变化的工商推送印章量数据索引（series[0]）
dataArrBack.timerStart = 0;//是否启动定时器开关
dataArrBack.timers;//定时器
dataArrBack.color = "#f00";
dataArrBack.colorListOneOld = ['#336cbd', '#336cbd', '#336cbd', '#336cbd', '#336cbd'
, '#336cbd', '#336cbd', '#336cbd', '#336cbd', '#336cbd'
, '#336cbd', '#336cbd', '#336cbd', '#336cbd', '#336cbd', '#336cbd'
];//定义印章备案总量16个柱状图颜色
dataArrBack.colorListTwoOld = ['#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23'
, '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23'
, '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23'
];//定义工商推送印章量16个柱状图颜色
function getCurrentMonthPushData(url) {
// num++;
$.ajax({
type: "post",
// async: false,
url: url,
dataType: "json", //返回数据形式为json
success: function (res) {
console.log(res);
if (res && res.type == 'success') {
dataArrBack.numOneFlag++;
if (dataArrBack.numOneFlag == 1) {//判断是第一次请求
resArr = res.map.sealMonthCount;
for (var i = 0; i < resArr.length; i++) {
areaName[i] = resArr[i].areaName
currentMonthRecordsCount[i] = resArr[i].sealCount;//本月印章备案总量
dataArrBack.currentMonthRecordsCountOld[i] = parseInt(resArr[i].sealCount);//第一次请求，将本月印章备案总量存储，对比后续请求的数据变化
if (!resArr[i].aicSealCount) {//担心后端返回null或undefined，进行校验（沟通约束）
dataArrBack.currentMonthPushCount[i] = 0;
} else {
currentMonthPushCount[i] = resArr[i].aicSealCount;//本月工商推送印章量
dataArrBack.currentMonthPushCountOld[i] = parseInt(resArr[i].aicSealCount);//第一次请求，本月工商推送印章量存储，对比后续请求的数据变化
}
}
console.log(dataArrBack.currentMonthRecordsCountOld);
console.log(dataArrBack.currentMonthPushCountOld);
columnar_option.xAxis[0].data = areaName;
columnar_option.series[0].data = currentMonthRecordsCount;
columnar_option.series[1].data = currentMonthPushCount;
// 使用刚指定的配置项和数据显示图表。
columnar.setOption(columnar_option);
//去掉onloading并显示数据
$("#onloadingImg").css('display', 'none');
$("#container_columnar").css('display', 'block');
} else {//判断如果不是第一次请求，将新数据与老数据进行对比
console.log(dataArrBack.numOneFlag);
resArr = res.map.sealMonthCount;
for (var i = 0; i < resArr.length; i++) {
areaName[i] = resArr[i].areaName
currentMonthRecordsCount[i] = resArr[i].sealCount;//本月印章备案总量
if (!resArr[i].aicSealCount) {
currentMonthPushCount[i] = 0;
} else {
currentMonthPushCount[i] = resArr[i].aicSealCount;//本月工商推送印章量
}
//判断新一次请求到数据与上一次请求数据是否不同，若不同，存储变化的数据索引值
//1.判断本月印章备案总量上一次与本次是否相同
if (parseInt(currentMonthRecordsCount[i]) != dataArrBack.currentMonthRecordsCountOld[i]) {
dataArrBack.indexFlagRecordsCount.push(i);
}//2.判断本月工商推送印章量上一次与本次是否相同
if (parseInt(currentMonthPushCount[i]) != dataArrBack.currentMonthPushCountOld[i]) {
dataArrBack.indexFlagPushCount.push(i);
}
}
console.log(currentMonthRecordsCount);
console.log(dataArrBack.currentMonthRecordsCountOld);
// console.log(dataArrBack.indexFlagRecordsCount);
// console.log(dataArrBack.indexFlagRecordsCount);
console.log(dataArrBack.currentMonthRecordsCountOld);
console.log(dataArrBack.currentMonthPushCountOld);
columnar_option.xAxis[0].data = areaName;
columnar_option.series[0].data = currentMonthRecordsCount;
columnar_option.series[1].data = currentMonthPushCount;
//设置时间动画
console.log(dataArrBack.indexFlagRecordsCount);
console.log(dataArrBack.indexFlagPushCount);
// dataArrBack.indexFlagRecordsCount = [3, 8, 11];
// dataArrBack.indexFlagPushCount = [6,2,4,14];
//存储动画所需最大变化步骤，即dataArrBack.indexFlagRecordsCount.length和dataArrBack.indexFlagPushCount.length中的最大值
// var animateMaxNum = dataArrBack.indexFlagRecordsCount.length > dataArrBack.indexFlagPushCount.length ? dataArrBack.indexFlagRecordsCount.length : dataArrBack.indexFlagPushCount.length;
// console.log(animateMaxNum);
// var numAddFlag = 0;//存储动画执行次数
if (!dataArrBack.timerStart) {
// dataArrBack.timers = setInterval(function () {
// numAddFlag++;
// // console.log(numAddFlag - 1);
// if (numAddFlag - 1 >= animateMaxNum) {//判断numAddFlag-1值是否>=animateMaxNum,如果成立，清空定时器页面恢复最初效果
// clearInterval(dataArrBack.timers);
// columnar_option.series[0].itemStyle.normal.color = function (params) {
// var colorList = ['#336cbd', '#336cbd', '#336cbd', '#336cbd', '#336cbd'
// , '#336cbd', '#336cbd', '#336cbd', '#336cbd', '#336cbd'
// , '#336cbd', '#336cbd', '#336cbd', '#336cbd', '#336cbd', '#336cbd'
// ];
// return colorList[params.dataIndex]
// };
// // columnar_option.series[0].itemStyle.emphasis = { //鼠标经过强调样式
// // // borderWidth: .8,
// // // borderColor: '#fff',
// // // areaColor: "#f6b125",
// // label: {
// // fontSize: 20,
// // }
// // }
// columnar_option.series[1].itemStyle.normal.color = function (params) {
// var colorList = ['#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23'
// , '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23'
// , '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23'
// ];
// return colorList[params.dataIndex]
// };
// // columnar_option.series[1].itemStyle.emphasis = { //鼠标经过强调样式
// // // borderWidth: .8,
// // // borderColor: '#fff',
// // // areaColor: "#f6b125",
// // label: {
// // fontSize: 20,
// // }
// // }
// columnar.setOption(columnar_option);//绘制图表
// dataArrBack.indexFlagRecordsCount = [];//动画结束，清空存储下标数组，避免影响下次存储
// dataArrBack.indexFlagPushCount = [];
// } else {
// columnar_option.series[0].itemStyle.normal.color = function (params) {
// var colorList = ['#336cbd', '#336cbd', '#336cbd', '#336cbd', '#336cbd'
// , '#336cbd', '#336cbd', '#336cbd', '#336cbd', '#336cbd'
// , '#336cbd', '#336cbd', '#336cbd', '#336cbd', '#336cbd', '#336cbd'
// ];
// if (params.dataIndex == dataArrBack.indexFlagRecordsCount[numAddFlag - 1]) {
// colorList[params.dataIndex] = '#f00';
// }
// return colorList[params.dataIndex]
// },
// // columnar_option.series[0].itemStyle.emphasis = { //鼠标经过强调样式
// // // borderWidth: .8,
// // // borderColor: '#fff',
// // // areaColor: "#f6b125",
// // label: {
// // fontSize: 20,
// // }
// // }
// columnar_option.series[1].itemStyle.normal.color = function (params) {
// var colorList = ['#dca439', '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23'
// , '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23'
// , '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23'
// ];
// if (params.dataIndex == dataArrBack.indexFlagPushCount[numAddFlag - 1]) {
// colorList[params.dataIndex] = '#f00';
// }
// return colorList[params.dataIndex]
// },
// // columnar_option.series[1].itemStyle.emphasis = { //鼠标经过强调样式
// // // borderWidth: .8,
// // // borderColor: '#fff',
// // // areaColor: "#f6b125",
// // label: {
// // fontSize: 20,
// // }
// // };
// // columnar.on('mouseover', function (params) {
// // console.log(11111);
// // console.log(params);
// // });
// // columnar.onmouseover();
// columnar.setOption(columnar_option);//绘制图表
// columnar_option.series[0].itemStyle.normal.color = function (params) {
// var colorList = ['#336cbd', '#336cbd', '#336cbd', '#336cbd', '#336cbd'
// , '#336cbd', '#336cbd', '#336cbd', '#336cbd', '#336cbd'
// , '#336cbd', '#336cbd', '#336cbd', '#336cbd', '#336cbd', '#336cbd'
// ];
// return colorList[params.dataIndex]
// };
// // columnar_option.series[0].itemStyle.emphasis = { //鼠标经过强调样式
// // // borderWidth: .8,
// // // borderColor: '#fff',
// // // areaColor: "#f6b125",
// // label: {
// // fontSize: 12,
// // }
// // }
// columnar_option.series[1].itemStyle.normal.color = function (params) {
// var colorList = ['#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23'
// , '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23'
// , '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23'
// ];
// return colorList[params.dataIndex]
// };
// }
// }, 500);
//循环本月印章备案总量数组，取出对应索引进行对比，将数据变化对应的索引柱状图颜色改变
columnar_option.series[0].itemStyle.normal.color = function (params) {
var colorList = ['#336cbd', '#336cbd', '#336cbd', '#336cbd', '#336cbd'
, '#336cbd', '#336cbd', '#336cbd', '#336cbd', '#336cbd'
, '#336cbd', '#336cbd', '#336cbd', '#336cbd', '#336cbd', '#336cbd'
];
for (var i = 0; i < dataArrBack.indexFlagRecordsCount.length; i++) {
colorList[dataArrBack.indexFlagRecordsCount[i]] = dataArrBack.color;
}
return colorList[params.dataIndex]
}
//循环本月工商推送印章量数组，取出对应索引进行对比，将数据变化对应的索引柱状图颜色改变
columnar_option.series[1].itemStyle.normal.color = function (params) {
var colorList = ['#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23'
, '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23'
, '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23'
];
for (var i = 0; i < dataArrBack.indexFlagPushCount.length; i++) {
colorList[dataArrBack.indexFlagPushCount[i]] = dataArrBack.color;
}
return colorList[params.dataIndex]
}
columnar.setOption(columnar_option);//绘制图表
//三秒后还原柱状图样式，方便下次调用
dataArrBack.timers = setTimeout(function () {
columnar_option.series[0].itemStyle.normal.color = function (params) {
// var colorList = ['#336cbd', '#336cbd', '#336cbd', '#336cbd', '#336cbd'
// , '#336cbd', '#336cbd', '#336cbd', '#336cbd', '#336cbd'
// , '#336cbd', '#336cbd', '#336cbd', '#336cbd', '#336cbd', '#336cbd'
// ];
return dataArrBack.colorListOneOld[params.dataIndex]
}
//循环本月工商推送印章量数组，取出对应索引进行对比，将数据变化对应的索引柱状图颜色改变
columnar_option.series[1].itemStyle.normal.color = function (params) {
// var colorList = ['#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23'
// , '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23'
// , '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23'
// ];
return dataArrBack.colorListTwoOld[params.dataIndex]
}
columnar.setOption(columnar_option);//绘制图表
dataArrBack.indexFlagRecordsCount = [];//动画结束，清空存储下标数组，避免影响下次存储
dataArrBack.indexFlagPushCount = [];
}, 3000);
} else {
dataArrBack.indexFlagRecordsCount = [];//此时页面隐藏。
dataArrBack.indexFlagPushCount = [];
// 使用刚指定的配置项和数据显示图表。
columnar.setOption(columnar_option);
}
//解决浏览器隐藏或切换tab栏定时器加速闪动bug
document.onvisibilitychange = function () {
if (document.visibilityState == "visible") {//页面可见时
dataArrBack.timerStart = 0;
} else {//页面不可见时
clearInterval(dataArrBack.timers);
dataArrBack.timerStart = 1;
}
};
//循环后将新旧数据互换，后清空新数组数组(防止下次请求数组遗留数据,注意*：这里要进行深拷贝)
console.log(currentMonthRecordsCount);
console.log(dataArrBack.currentMonthRecordsCountOld);
for (var item in currentMonthRecordsCount) {
dataArrBack.currentMonthRecordsCountOld[item] = currentMonthRecordsCount[item];
}
for (var item in currentMonthPushCount) {
dataArrBack.currentMonthPushCountOld[item] = currentMonthPushCount[item];
}
//去掉onloading并显示数据
$("#onloadingImg").css('display', 'none');
$("#container_columnar").css('display', 'block');
}
}
}
});
}
//图五end
// 使用刚指定的配置项和数据显示图表。
// columnar.setOption(columnar_option);
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。