You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
466 lines
18 KiB
466 lines
18 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>长春市教育基础库运行监测</title>
|
|
<script type="text/javascript" src="../../lib/jquery-3.6.0.min.js"></script>
|
|
<script src="../../lib/echarts.min.js"></script>
|
|
<script src="../../lib/shine.js"></script>
|
|
<script src="../../lib/pinyin.js"></script>
|
|
<script src="../district/map/city/china-main-city-map.js"></script>
|
|
<style>
|
|
::-webkit-scrollbar {
|
|
width: 0px;
|
|
}
|
|
scrollbar {
|
|
-moz-appearance: none !important;
|
|
width: 0;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<div id="main" style="position: absolute;top:0;left:0;width:98%;"></div>
|
|
|
|
<script type="text/javascript">
|
|
var result=getGlobalByCodes("install_area");
|
|
function getGlobalByCodes(keys){
|
|
var jsonStr;
|
|
$.ajax({
|
|
type: "GET",
|
|
url: "/FengHuang/global/getGlobalByCodes?global_codes="+keys,
|
|
dataType: 'json',
|
|
async : false,
|
|
success: function (data) {
|
|
if(data.code==0){
|
|
jsonStr=data.data;
|
|
}
|
|
}
|
|
})
|
|
return jsonStr;
|
|
}
|
|
var areaId=result[0].global_value;
|
|
function getSoorData(min) {
|
|
var data_new=[];
|
|
$.ajax({
|
|
type:'GET',
|
|
dataType:'json',
|
|
async:false,
|
|
url:'/FengHuang/bigData/getPeriodAreaLoginInfoByCityId?city_id='+areaId+'&min='+min,
|
|
success:function(data){
|
|
if(data.success){
|
|
var lis=[];
|
|
var liss=[];
|
|
var sum=[];
|
|
var total=0;
|
|
for (var i=0;i<data.list.length;i++) {
|
|
// if(data.list[i]['login_count']=='0'){
|
|
// data.list[i]['login_count']=i*100;
|
|
// }
|
|
if(data.list[i]['area_name']=='经开区'||data.list[i]['area_name']=='莲花山'|| data.list[i]['area_name']=='高新区'||data.list[i]['area_name']=='净月开发区'|| data.list[i]['area_name']=='一汽区'){
|
|
data.list.splice(i,1);
|
|
i--;
|
|
}
|
|
if(data.list[i]['area_name']=='市直属'){
|
|
data.list[i]['area_name']='长春市';
|
|
}
|
|
total +=Number(data.list[i]['login_count']);
|
|
lis=data.list;
|
|
}
|
|
for (var i=0;i<lis.length;i++) {
|
|
if(data.list[i]['area_name']=='长春市'){
|
|
data.list[i]['login_count']=total;
|
|
}
|
|
liss.push({
|
|
"fromName": lis[i]['area_name'],
|
|
"accessCount":lis[i]['login_count'],
|
|
"toName": geoMapName,
|
|
"school_count":lis[i]['school_count'],
|
|
"org_count":lis[i]['org_count'],
|
|
"teacher_count":lis[i]['teacher_count'],
|
|
"student_count":lis[i]['student_count']
|
|
})
|
|
}
|
|
}
|
|
var jsont={
|
|
"list": liss,
|
|
"success": true
|
|
};
|
|
$.each(jsont.list,function(k,m){
|
|
data_new.push([{name:m.fromName,value:m.accessCount,school_count:m.school_count,org_count:m.org_count,teacher_count:m.teacher_count,student_count:m.student_count}, {name:m.toName}]);
|
|
});
|
|
}
|
|
})
|
|
return data_new;
|
|
}
|
|
|
|
|
|
|
|
|
|
var geoMapName="";
|
|
var area_cp="";//使用地区的坐标
|
|
// 获取全局变量 使用地区
|
|
$(function () {
|
|
var h=$(window.parent.document).find("#mapDiv").height();
|
|
$("#main").height(h);
|
|
$.ajax({
|
|
type : "GET",
|
|
async : false,
|
|
url : '/FengHuang/global/getGlobalByCodes?global_codes=install_area',
|
|
dataType : "json",
|
|
success: function (data) {
|
|
if(data.code==0){
|
|
$.ajax({
|
|
type : "GET",
|
|
async : false,
|
|
url : '/FengHuang/organization/getAreaInfoById?id='+data.data[0].global_value,
|
|
dataType : "json",
|
|
success: function (data) {
|
|
// 使用地区名称
|
|
geoMapName=data.area_name;
|
|
$.ajax({
|
|
type:'GET',
|
|
dataType:'json',
|
|
async:false,
|
|
url:'/FengHuang/dm/getCityCoordinate?city_id='+data.city_id,
|
|
async:false,
|
|
success:function (data) {
|
|
geoCoordMap= eval("("+data.json+")");
|
|
$.ajax({
|
|
type:'GET',
|
|
async:false,
|
|
dataType:'json',
|
|
url:'../district/map/city/'+ cityMap[geoMapName] +'.json',
|
|
success:function (data) {
|
|
echarts.registerMap('city', data);
|
|
}
|
|
})
|
|
initMap(min);
|
|
}
|
|
})
|
|
|
|
}
|
|
});
|
|
|
|
}
|
|
}
|
|
});
|
|
})
|
|
|
|
var myHosName = '';
|
|
var myChart;
|
|
var SEDATA=[];
|
|
//地图
|
|
var geoCoordMap={};
|
|
|
|
function getCoorData(){
|
|
var data_new=[];
|
|
var jsont={
|
|
"list": [
|
|
{
|
|
"fromName": "长春市",
|
|
"accessCount": 312951,
|
|
"toName": "长春市"
|
|
},
|
|
{
|
|
"fromName": "榆树市",
|
|
"accessCount": 884,
|
|
"toName": "长春市"
|
|
},
|
|
{
|
|
"fromName": "德惠市",
|
|
"accessCount": 730,
|
|
"toName": "长春市"
|
|
},
|
|
{
|
|
"fromName": "农安县",
|
|
"accessCount":640,
|
|
"toName": "长春市"
|
|
},
|
|
{
|
|
"fromName": "九台市",
|
|
"accessCount": 80,
|
|
"toName": "长春市"
|
|
},
|
|
{
|
|
"fromName": "宽城区",
|
|
"accessCount": 430,
|
|
"toName": "长春市"
|
|
},
|
|
{
|
|
"fromName": "二道区",
|
|
"accessCount": 310,
|
|
"toName": "长春市"
|
|
},
|
|
{
|
|
"fromName": "朝阳区",
|
|
"accessCount": 40,
|
|
"toName": "长春市"
|
|
},
|
|
{
|
|
"fromName": "绿园区",
|
|
"accessCount": 580,
|
|
"toName": "长春市"
|
|
},
|
|
{
|
|
"fromName": "南关区",
|
|
"accessCount": 120,
|
|
"toName": "长春市"
|
|
},
|
|
{
|
|
"fromName": "双阳区",
|
|
"accessCount": 90,
|
|
"toName": "长春市"
|
|
}
|
|
],
|
|
"success": true
|
|
};
|
|
$.each(jsont.list,function(k,m){
|
|
data_new.push([{name:m.fromName,value:m.accessCount}, {name:m.toName}]);
|
|
});
|
|
return data_new;
|
|
}
|
|
// 获取长春市下区地图
|
|
function getData1(){
|
|
var list ={};
|
|
$.ajax({
|
|
type:'GET',
|
|
async:false,
|
|
dataType:'json',
|
|
url:'../district/map/city/'+ cityMap[geoMapName] +'.json',
|
|
success:function (data) {
|
|
echarts.registerMap('city', data);
|
|
for( var i=0;i<data.features.length;i++ ){
|
|
list[data.features[i].properties.name]= data.features[i].geometry.coordinates[0][0][0];
|
|
}
|
|
// list['长春市']=[125.347644,43.879875];
|
|
list[geoMapName]=area_cp;
|
|
// list['白城市']=[122.841114,45.619026];
|
|
geoCoordMap=list;
|
|
// console.log(geoCoordMap);
|
|
initMap();
|
|
}
|
|
})
|
|
}
|
|
function getData(){
|
|
$.ajax({
|
|
type:'GET',
|
|
async:false,
|
|
dataType:'json',
|
|
url:'../district/map/city/'+ cityMap[geoMapName] +'.json',
|
|
success:function (data) {
|
|
echarts.registerMap('city', data);
|
|
}
|
|
})
|
|
var data_new={};
|
|
data_new={
|
|
"德惠市": [125.70514,44.545406],
|
|
"农安县": [125.181659,44.438724],
|
|
"九台市": [125.826151,44.152305],
|
|
"宽城区": [125.347576,44.092181], //125.333329,43.94918
|
|
// "宽城区": [125.333329,43.94918], //
|
|
"二道区": [125.703266,43.887419],//125.378112,43.878125
|
|
// "二道区": [125.378112,43.878125],//
|
|
"朝阳区": [125.260863,43.662466],//125.294733,43.839716
|
|
// "朝阳区": [125.294733,43.839716],//
|
|
"绿园区": [125.118676,43.876976],//125.262779,43.886998
|
|
// "绿园区": [125.262779,43.886998],//
|
|
"南关区": [125.297226,43.928239],//125.338919,43.89144
|
|
// "南关区": [125.338919,43.89144],//
|
|
"双阳区": [125.66678,43.527766],
|
|
"长春市": [125.323816,43.774638],
|
|
"榆树市": [126.551432,44.843088],
|
|
}
|
|
data={
|
|
"镇赉县": [123.205618,45.848797],
|
|
"洮北区": [122.852396,45.631993],
|
|
"洮南市": [122.782741,45.342534],
|
|
"通榆县": [123.100987,44.81677],
|
|
"大安市": [124.289634,45.521303]
|
|
}
|
|
return data_new;
|
|
|
|
}
|
|
var min=10;
|
|
setInterval(function () {
|
|
min +=10;
|
|
initMap(min);
|
|
},600000);
|
|
|
|
function initMap(min){
|
|
//获取from--to数据
|
|
var DATAF=getSoorData(min);
|
|
if(myChart){//释放浏览器内存
|
|
myChart.dispose();
|
|
}
|
|
myChart = echarts.init(document.getElementById('main'), 'shine');
|
|
|
|
var color = ['#a6c84c', '#ffa022', '#46bee9'];
|
|
var series = [];
|
|
[[[myHosName],DATAF]].forEach(function (item, i) {
|
|
series.push(
|
|
{
|
|
type: 'lines',
|
|
zlevel: 1,
|
|
symbol: ['none', 'arrow'],
|
|
symbolSize:5,
|
|
effect: {
|
|
show: true,
|
|
period: 6,
|
|
trailLength: 0,
|
|
symbol: 'arrow',//circle'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
|
|
color: '#A6C84C',
|
|
symbolSize:9,
|
|
shadowBlur: 1
|
|
|
|
},
|
|
lineStyle: {
|
|
normal: {
|
|
width: '2',
|
|
color: '#a6c84c',
|
|
curveness: 0.2,
|
|
color: color[i],
|
|
opacity: 0.4,
|
|
}
|
|
},
|
|
data: convertData(item[1])
|
|
},
|
|
|
|
{ //区原点
|
|
type: 'effectScatter',
|
|
coordinateSystem: 'geo',
|
|
zlevel: 2,
|
|
rippleEffect: {
|
|
brushType: 'stroke'
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'right',
|
|
formatter: '{b}'
|
|
|
|
}
|
|
},
|
|
symbolSize: function (val) {
|
|
var val_return =3 + val[2] / 10;
|
|
if(val_return>18){
|
|
val_return=18;
|
|
}
|
|
|
|
return val_return;
|
|
},
|
|
data: item[1].map(function (dataItem) {
|
|
return {
|
|
name: dataItem[0].name,
|
|
school_count:dataItem[0]['school_count'],
|
|
org_count:dataItem[0]['org_count'],
|
|
teacher_count:dataItem[0]['teacher_count'],
|
|
student_count:dataItem[0]['student_count'],
|
|
value: geoCoordMap[dataItem[0].name].concat([dataItem[0].value])
|
|
};
|
|
}),
|
|
itemStyle: {
|
|
normal: {
|
|
color: function(params) {
|
|
var tmp = params.data.value[2]
|
|
if (tmp < 100) {
|
|
return 'lime';
|
|
}else if (tmp>100 && tmp<900) {
|
|
return 'aqua'
|
|
}else{
|
|
return 'red';
|
|
}
|
|
}
|
|
|
|
}
|
|
},
|
|
});
|
|
});
|
|
option = {
|
|
tooltip : {//提示框组件
|
|
trigger: 'item',//触发类型
|
|
formatter:
|
|
function(params) {
|
|
if(params.seriesIndex==1){
|
|
return params.name + '<br>访问量：' + params.data.value[2]
|
|
+ '<br>学校总数：' + params.data.school_count
|
|
+ '<br>单位总数：' + params.data.org_count
|
|
+ '<br>教师总数：' + params.data.teacher_count
|
|
+ '<br>学生总数：' + params.data.student_count
|
|
}else{
|
|
return params.data.fromName + '→' + params.data.toName;
|
|
}
|
|
},
|
|
},
|
|
geo: {//地理坐标系
|
|
map: 'city',
|
|
label: {//图形上的文本标签
|
|
normal: {
|
|
show: false//true 显示地图上的数据
|
|
},
|
|
|
|
emphasis: {
|
|
show:false//若为true,鼠标移动上去显示当前区域名称
|
|
}
|
|
},
|
|
roam: false,//设置为开启缩放和平移
|
|
itemStyle: {
|
|
normal: {//正常展示
|
|
areaColor: 'rgb(17, 38, 99,0.6)',
|
|
borderColor:'#4C6DA8',//'#4C6DA8'
|
|
borderWidth:'2',
|
|
shadowColor: 'rgba(63, 218, 255, 0.5)',
|
|
shadowBlur: 30
|
|
},
|
|
emphasis: {
|
|
areaColor: '#2a333d'
|
|
}
|
|
},
|
|
zoom:1//缩放比例。正常为1:1
|
|
},
|
|
series : series,
|
|
};
|
|
if (option && typeof option === "object") {
|
|
myChart.setOption(option, true);
|
|
// setTimeout(function () {
|
|
// myChart.dispatchAction({
|
|
// type: 'showTip',
|
|
// seriesIndex:1 ,//第几条series
|
|
// dataIndex:0,//第几个tooltip
|
|
// position: ['43%', '71%'],
|
|
// });
|
|
//
|
|
// },10);
|
|
|
|
}
|
|
|
|
window.onresize = function() {
|
|
myChart.resize();
|
|
}
|
|
}
|
|
|
|
var convertData = function(data) {
|
|
var res = [];
|
|
for (var i = 0; i < data.length; i++) {
|
|
var dataItem = data[i];
|
|
var fromCoord = geoCoordMap[dataItem[0].name];
|
|
var toCoord = geoCoordMap[dataItem[1].name];
|
|
if (fromCoord && toCoord) {
|
|
res.push({
|
|
fromName : dataItem[0].name,
|
|
value : dataItem[0].value,
|
|
toName : dataItem[1].name,
|
|
coords : [ fromCoord, toCoord ],
|
|
// school_count:dataItem[0]['school_count'],
|
|
// org_count:dataItem[0]['org_count'],
|
|
// teacher_count:dataItem[0]['org_count'],
|
|
// student_count:dataItem[0]['org_count']
|
|
});
|
|
}
|
|
}
|
|
return res;
|
|
};
|
|
</script>
|
|
</body>
|
|
</html> |