代码拉取完成，页面将自动刷新
同步操作将从 北京科富兴科技有限公司/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;
}
.unit_num {
position: absolute;
left: 3%;
top: 14px;
font-size: 12px;
font-weight: bold;
}
.columnar_bottom {
position: relative;
font-size: 14px;
font-weight: bold;
top: -4px;
text-align: center;
color: #000;
}
</style>
</head>
<body>
<!-- 图表4 -->
<div class="imacontent">
<img src="./image/timg.gif" id="onloadingImg">
</div>
<div id="container_columnar">
<div class="unit_num">印<br/>章<br/>刻<br/>制<br/>企<br/>业</div>
<div id="container"></div>
<div class="columnar_bottom">图4：本月刻制企业印章备案量排行榜(Top10)</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 arrName = [];//公司名字
var currentMonthPushCount = [];//当交付总量
//请求当月工商推送总量函数
//初始初调用的路径，以及轮询后调用的路径
var newUrl = "http://192.168.66.72:8080/chart/repeat";
currentMonthDataTopTen(newUrl);
//x秒请求一次数据
setInterval(function () { currentMonthDataTopTen(newUrl); }, setTimeSlideshow(8000));
var currentWindowHeight = document.documentElement.clientHeight;
var currentWindowWidth = document.documentElement.clientWidth;
// $("#container_columnar").css({ 'height': currentWindowHeight + 'px' }, { 'width': currentWindowWidth + 'px' });
document.getElementById("container").style.height = currentWindowHeight * 0.95 + 'px';
document.getElementById("container").style.width = currentWindowWidth + 'px';
// window.onresize = function () {
// var currentWindowHeight = document.documentElement.clientHeight;
// var currentWindowWidth = document.documentElement.clientWidth;
// document.getElementById("container").style.height = currentWindowHeight * 0.95 + 'px';
// document.getElementById("container").style.width = currentWindowWidth + 'px';
// };
var container_four = document.getElementById("container");
var myChart = echarts.init(container_four);
var seriesLabel = {
normal: {
show: true,
color: '#fff',
textBorderWidth: 2
}
};
container_four.config = {
rotate: 90,
align: 'left',
verticalAlign: 'middle',
position: 'insideTop',
distance: 15,
onChange: function () {
var labelOption = {
normal: {
rotate: container_four.config.rotate,
align: container_four.config.align,
verticalAlign: container_four.config.verticalAlign,
position: container_four.config.position,
distance: container_four.config.distance
}
};
myChart.setOption({
series: [{
label: labelOption
}, {
label: labelOption
}, {
label: labelOption
}, {
label: labelOption
}]
});
}
};
var labelOption = {
normal: {
show: true,
position: container_four.config.position,
distance: container_four.config.distance,
align: container_four.config.align,
verticalAlign: container_four.config.verticalAlign,
rotate: container_four.config.rotate,
formatter: '{c} {name|{a}}',
fontSize: 16,
rich: {
name: {
textBorderColor: '#fff'
}
}
}
};
option = {
color: ['#73a3e8'],
// title: {
// text: '图4：本月北京市印章刻制企业交付量排行榜',
// // subtext: '数据来自网络',
// bottom: '0',
// left: 'center',
// textStyle: {
// color: '#348234',
// fontWeight: 'normal',
// fontSize: '16'
// }
// },
tooltip: {
trigger: 'axis',//去掉鼠标经过柱状图的背景颜色
confine: true,//鼠标经过，数据强制显示在div区域内
axisPointer: {
type: 'shadow'
}
},
toolbox: { //下载数据功能及其位置
show: true,
orient: 'vertical',
right: '16%',
top: '15',
itemSize: 18,
emphasis: {//触发时
iconStyle: {
borderColor: "#006bb7"//图形的描边颜色
}
},
// feature: {
// saveAsImage: {
// show: true,
// title: '下载数据'
// }
// }
},
animation: true,
// animationThreshold: 400,
// animationDuration: function (idx) {
// // 越往后的数据延迟越大
// return idx * 300;
// },
// animationDurationUpdate: function (idx) {
// // 越往后的数据延迟越大
// return idx * 300;
// },
// animationDelayUpdate: function (idx) {
// // 越往后的数据延迟越大
// return idx * 300;
// },
grid: {
top: '15',
left: '8%',
right: '14%',
bottom: '0',
containLabel: true
},
xAxis: {
type: 'value',
axisTick: { show: false },
// offset:4,//设置X轴偏移量
position: 'bottom',
name: '印章数量(单位：枚)',//设置x轴中顶部数据及其样式位置等
nameLocation: 'end',
nameTextStyle: {
padding: [0, 0, 18, -130],
fontSize: 12,
fontWeight: 'bold'
},
axisLine: { //让X轴顶部出现箭头
symbol: ['none', 'arrow'],
symbolSize: [6, 6]
},
axisLabel: { //去掉X轴向上的刻度值
formatter: function () {
return "";
}
},
splitLine: { //去掉垂直网格背景线
show: false
}
},
yAxis: {
type: 'category',
axisTick: { show: false }, //是否显示图表刻度
axisLine: { //显示图表两端箭头
symbol: ['none', 'arrow'],
symbolSize: [6, 6]
},
boundaryGap: ['30', '30'],
// min: function (value) {
// return value.min + 1;
// },
// max: function (value) {
// return value.max + 1;
// },
// axisPointer: {
// label:{
// // show:true
// margin:18,
// padding:20
// }
// },
axisLabel: {
inside: true,
padding: [-18, 0, 0, 0], //设置每个柱状图对应的企业名称
verticalAlign: 'top',
fontSize: 11,
textStyle: {
color: "#000000"
}
},
data: ['广东省高', '广东省高', '广东省高', '广东省高', '广东省高', '广东省高', '广东省高', '广东省高', '广东省高', '广东省高']
},
series: [
{
name: '交付量',
type: 'bar',
barWidth: '10',//调整柱子宽度
label: {
normal: {
show: true,
position: 'right',
textStyle: {
color: '#000'
}
}
},
itemStyle: {
//通常情况下：
normal: {
//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
color: function (params) {
var colorList = ['#4e88da', '#4e88da', '#4e88da', '#4e88da', '#4e88da', '#4e88da', '#4e88da', '#ffcc35', '#fa9c00', '#ff6469'];
return colorList[params.dataIndex];
}
}
},
barCategoryGap: '40%',
data: [123, 345, 623, 888, 1000, 1123, 2144, 3453, 4656, 5767]
}
]
};
function currentMonthDataTopTen(url) {
$.ajax({
type: "post",
// async: false,
url: url,
dataType: "json", //返回数据形式为json
success: function (res) {
console.log(res);
if (res && res.type == 'success') {
resArr = res.map.sealFactoryDeliverCount;
arrName = [];//清空数据，为定时器5秒一请求准备
currentMonthPushCount = [];//清空数据，为定时器5秒一请求准备
for (var i = 0; i < resArr.length; i++) {
arrName.unshift(resArr[i].factoryName);
currentMonthPushCount.unshift(resArr[i].sealCount);
}
option.yAxis.data = arrName;
option.series[0].data = currentMonthPushCount;
// 使用刚指定的配置项和数据显示图表。
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
//去掉onloading并显示数据
$("#onloadingImg").css('display', 'none');
$("#container_columnar").css('display', 'block');
}
},
// error: function (errorMsg) {
// alert("图表5数据加载失败！");
// }
});
}
// if (option && typeof option === "object") {
// myChart.setOption(option, true);
// }
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。