代码拉取完成，页面将自动刷新
同步操作将从 北京科富兴科技有限公司/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">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.columnar_bottom {
font-size: 14px;
font-weight: bold;
position: relative;
text-align: center;
color: #000;
left: 0px;
top: -21px;
}
.unitNum {
font-size: 12px;
color: #000;
position: absolute;
right: 60px;
bottom: 60px;
font-weight: bold;
}
#onloadingImg {
margin: 100px auto;
}
</style>
</head>
<body>
<div class="imacontent">
<img src="./image/timg.gif" id="onloadingImg">
</div>
<div id="container_columnar">
<div id="container"></div>
<div class="unitNum">单位：枚</div>
<div class="columnar_bottom">图1：当日北京地区印章备案量</div>
</div>
<script src="./js/echarts.min.js"></script>
<script type="text/javascript" src="./js/map/js/china.js"></script>
<script type="text/javascript" src="./js/map/js/province/beijing.js"></script>
<script src="./js/jQuery.js"></script>
<script src="./js/common.js"></script>
</body>
<script type="text/javascript">
//请求当月推送总量函数
var resArr;//后端返回数据数组
var arrName = [];//公司名字
var currentMonthPushCount = [];//当交付总量
//请求当月工商推送总量函数
//初始初调用的路径，以及轮询后调用的路径
var newUrl = "http://192.168.66.72:8080/chart/repeat";
//X秒请求一次数据
currentMonthDataTopTen(newUrl);
setInterval(function () { currentMonthDataTopTen(newUrl); }, setTimeSlideshow(12000));
var currentWindowHeight = document.documentElement.clientHeight;
var currentWindowWidth = document.documentElement.clientWidth;
document.getElementById("container").style.height = currentWindowHeight + 'px';
document.getElementById("container").style.width = currentWindowWidth + 'px';
$('.columnar_bottom').css({ "bottom": currentWindowHeight * 0.232 + "px" });
var myChart = echarts.init(document.getElementById('container'));
//地图
var option = {
tooltip: {
// formatter: '{b}', //提示标签格式
// backgroundColor: "#6f6f6f",//提示标签背景颜色
textStyle: { color: "#fff" }, //提示标签字体颜色
trigger: 'item'
},
visualMap: {
min: 0,
max: 6,
show: false,
inRange: {
color: ['#bee7f8', '#006edd']//设置地图颜色值范围
},
},
// toolbox: {
// show: true,
// orient: 'vertical',
// right: '18%',
// top: '125',
// itemSize: 18,
// emphasis: {//触发时
// iconStyle: {
// borderColor: "#000"//图形的描边颜色
// }
// },
// },
// geo: {//设置地图鼠标经过样式
// map: 'china',
// roam: true,
// label: {
// normal: {
// show: true,
// textStyle: {
// color: 'rgba(0,0,0,0.4)'
// }
// }
// },
// itemStyle: {
// normal: {
// borderColor: 'rgba(0, 0, 0, 0.2)'
// },
// emphasis: {
// areaColor: null,
// shadowOffsetX: 0,
// shadowOffsetY: 0,
// shadowBlur: 20,
// borderWidth: 0,
// shadowColor: 'rgba(0, 0, 0, 0.5)'
// }
// }
// },
series: [
{
selectedMode: 'single', //multiple多选 single单选 默认关闭
name: '备案量',
type: 'map',
// center:[115.97, 29.71],//视图中心点
// left:'16%',//地图距离左侧及上部距离
top: '6%',
scaleLimit: {//设置地图缩放比例
min: 1,
max: 6,
},
mapType: '北京',
roam: true,//开启拖拽
zoom: 1.1,
// map: {
// tooltip: {
// formatter: '{c}'
// }
// },
label: {
normal: {
// show: true,//显示区域名称标签
textStyle: { color: "#000" }//省份标签字体颜色
},
emphasis: {//对应的鼠标悬浮效果
show: false,
textStyle: { color: "#9bbff3" }
}
},
itemStyle: {//将数据数值设置到地图当中
normal: {
label: {
show: true,
//添加下面的代码就可以显示数据*
formatter: '{per|{c}}',
rich: {
per: {
color: '#000',
// backgroundColor: '#7D7D7D',
// padding: [6, 4],
// borderRadius: 4,
}
}
},
borderWidth: .5,//区域边框宽度
borderColor: '#fff',//区域边框颜色
areaColor: "#9bbff3",//区域颜色
},
emphasis: { //鼠标经过地图显示的强调样式
areaColor: "#fccc44",
shadowOffsetX: 0,
shadowOffsetY: 0,
// shadowBlur: 20,
borderWidth: 1,
shadowColor: '#fff0a5'
}
},
data: [
{ name: '东城区', selected: false, value: 312 },
{ name: '丰台区', selected: false, value: 51 },
{ name: '大兴区', selected: false, value: 161, },
{ name: '密云区', selected: false, value: 92 },
{ name: '平谷区', selected: false, value: 122 },
{ name: '延庆区', selected: false, value: 172 },
{ name: '怀柔区', selected: false, value: 102 },
{ name: '房山区', selected: false, value: 151 },
{ name: '昌平区', selected: false, value: 82 },
{ name: '朝阳区', selected: false, value: 1111, },
{ name: '海淀区', selected: false, value: 211 },
{ name: '石景山区', selected: false, value: 61 },
{ name: '西城区', selected: false, value: 41 },
{ name: '通州区', selected: false, value: 141 },
{ name: '门头沟区', selected: false, value: 193 },
{ name: '顺义区', selected: false, value: 112 },
],
},
]
};
var arrOld = [];//上一次请求数组存储库，用来对比数据变化
var arrNew = [];//最新请求数组
var postNumFlag = 0;// 请求次数判断标识
var timers;//定时器
var timerStart = 0;//是否启动定时器
function currentMonthDataTopTen(url) {
$.ajax({
type: "post",
// async: false,
url: url,
dataType: "json", //返回数据形式为json
success: function (res) {
console.log(res);
if (res && res.type == 'success') {
postNumFlag++;//判断是否是第一次请求
if (postNumFlag == 1) {//第一次请求，将数据存储arrOld中即可不进行数据对比，直接渲染
resArr = res.map.sealAreaDateCount;
var newArrdata = [];//用来存储每次请求到的数据，按格式赋值给option.series[0]
var setColorRange = [];//设置地图区域颜色（根据后端返回数值确定）数组
for (var i = 0; i < resArr.length; i++) {
arrOld.push(parseInt(resArr[i].sealCount));//将第一次请求到的数据存储到数组中，与新数据进行对比
newArrdata.push({ name: resArr[i].areaName, value: resArr[i].sealCount });
setColorRange.push(parseInt(resArr[i].sealCount));
}
console.log(arrOld);
option.series[0].data = newArrdata; //设置地图区域数据
// option.series[1].data[3].selected = true;
// 数组排序，根据返回数值设置地图颜色
var minNum;
for (var i = 0; i < setColorRange.length; i++) {
for (var j = i; j < setColorRange.length; j++) {
if (setColorRange[i] > setColorRange[j]) {
minNum = setColorRange[j];
setColorRange[j] = setColorRange[i];
setColorRange[i] = minNum;
}
}
}
// console.log(setColorRange);
//设置地图颜色值域范围
option.visualMap.min = setColorRange[0];
option.visualMap.max = setColorRange[setColorRange.length - 1];
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//去掉onloading并显示数据
$("#onloadingImg").css('display', 'none');
$("#container_columnar").css('display', 'block');
} else {
//判断不是第一次请求
resArr = res.map.sealAreaDateCount;
var newArrdata = [];//用来存储每次请求到的数据，按格式赋值给option.series[0]
var setColorRange = [];//设置地图区域颜色（根据后端返回数值确定）数组
for (var i = 0; i < resArr.length; i++) {
arrNew.push(resArr[i].sealCount);//将最新数据存储到数组中，与老数据进行对比
newArrdata.push({ name: resArr[i].areaName, value: resArr[i].sealCount });
setColorRange.push(parseInt(resArr[i].sealCount));
}
// console.log(arrNew);
// 重新循环resArr数组，判断新老数据是否相同，若不相同，将其下标存储
var indexFlag = [];
for (var i = 0; i < resArr.length; i++) {
if (arrNew[i] != arrOld[i]) {
indexFlag.push(i);
}
}
//循环后将旧数组替换为新数组，后清空新数组数组(防止下次请求数组遗留数据)，
arrOld = arrNew;
arrNew = [];
// console.log(indexFlag.length);//打印数据变化的区域下标，将对应option.series[0].data数据对象下标的selected改为true，并设置定时器
option.series[0].data = newArrdata; //设置地图区域数据
// option.series[1].data[3].selected = true;
// 数组排序，根据返回数值设置地图颜色
var minNum;
for (var i = 0; i < setColorRange.length; i++) {
for (var j = i; j < setColorRange.length; j++) {
if (setColorRange[i] > setColorRange[j]) {
minNum = setColorRange[j];
setColorRange[j] = setColorRange[i];
setColorRange[i] = minNum;
}
}
}
// console.log(setColorRange);
//设置地图颜色值域范围
option.visualMap.min = setColorRange[0];
option.visualMap.max = setColorRange[setColorRange.length - 1];
// var numAddFlag = 0;//设置标识数字，selected为true可以改变当前变化数据项的地图颜色,当numAddFlag-1 =indexFlag.length证明地图颜色动画结束
if (!timerStart) {
if (indexFlag.length) {//判断，如果数据有变化再执行
// timers = setInterval(function () {
// numAddFlag++;
// if (numAddFlag - 1 >= indexFlag.length) {//判断numAddFlag-1值是否>=indexFlag.length,如果成立，清空定时器页面恢复最初效果
// clearInterval(timers);
// // console.log(indexFlag.length - 1);
// option.series[0].data[indexFlag.length - 1].selected = false;
// myChart.setOption(option);//绘制地图
// indexFlag = [];
// // return false;
// } else {
// // console.log(indexFlag[numAddFlag - 1]);
// option.series[0].data[indexFlag[numAddFlag - 1]].selected = true;
// myChart.setOption(option);//绘制地图
// option.series[0].data[indexFlag[numAddFlag - 1]].selected = false;
// }
// // console.log(numAddFlag);
// // console.log(indexFlag.length);
// }, 500);
console.log(indexFlag);
for (var i = 0; i < indexFlag.length; i++) {
option.series[0].data[indexFlag[i]].selected = true;
}
myChart.setOption(option);//绘制地图
timers = setTimeout(function () {
for (var i = 0; i < indexFlag.length; i++) {
option.series[0].data[indexFlag[i]].selected = false;
}
myChart.setOption(option);//绘制地图
indexFlag = [];
}, 3000);
} else {
myChart.setOption(option);//绘制地图
}
} else {
myChart.setOption(option);//绘制地图
}
//解决浏览器隐藏或切换tab栏定时器加速闪动bug
document.onvisibilitychange = function () {
if (document.visibilityState == "visible") {
// console.log(888);
// timer = setInterval(slidemove, 1000);
timerStart = 0;
} else {
clearInterval(timers);
// console.log(77777);
timerStart = 1;
}
}
//去掉onloading并显示数据
$("#onloadingImg").css('display', 'none');
$("#container_columnar").css('display', 'block');
}
}
// error: function (errorMsg) {
// alert("图表5数据加载失败！");
// }
}
})
}
// myChart.setOption(option);
//解决浏览器隐藏或切换tab栏定时器加速闪动bug
// document.onvisibilitychange = function () {
// if (document.visibilityState == "visible") {
// // timer = setInterval(slidemove, 1000);
// } else {
// clearInterval(timers);
// console.log(888888)
// }
// }
</script>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。