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.
495 lines
17 KiB
495 lines
17 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>长春市教育基础库运行监测</title>
|
|
<script type="text/javascript" src="../../lib/jquery-1.12.4.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;width:98%;height:98%"></div>
|
|
|
|
<script type="text/javascript">
|
|
var geoMapName="";
|
|
var area_cp="";//使用地区的坐标
|
|
// 获取全局变量 使用地区
|
|
$(function () {
|
|
$.ajax({
|
|
type : "GET",
|
|
async : false,
|
|
url : '/baseService/global/getGlobalByCodes?global_codes=install_area',
|
|
dataType : "json",
|
|
success: function (data) {
|
|
if(data.code==0){
|
|
$.ajax({
|
|
type : "GET",
|
|
async : false,
|
|
url : '/baseService/organization/getAreaInfoById?id='+data.data[0].global_value,
|
|
dataType : "json",
|
|
success: function (data) {
|
|
// 使用地区名称
|
|
geoMapName=data.area_name;
|
|
// 隶属的省份名称
|
|
// var province_name=data.province_name;
|
|
// if(province_name.indexOf("省")!== -1){
|
|
// province_name=province_name.replace("省","") ;
|
|
// }else if(province_name.indexOf("市")!== -1){
|
|
// province_name=province_name.replace("市","") ;
|
|
// }else if(province_name.indexOf("自治区")!== -1){
|
|
// province_name=province_name.replace("自治区","") ;
|
|
// }
|
|
// province_name=CC2PY(province_name).toLowerCase();
|
|
// $.ajax({
|
|
// type:'GET',
|
|
// dataType:'json',
|
|
// async:false,
|
|
// url:'../district/map/province/'+province_name+'.json',
|
|
// success:function (data) {
|
|
// for( var i=0;i<data.features.length;i++ ){
|
|
// if(data.features[i].properties.name==geoMapName){
|
|
// area_cp=data.features[i].properties.cp;
|
|
// }
|
|
// }
|
|
// }
|
|
// })
|
|
// getData();
|
|
// geoCoordMap= getData();
|
|
$.ajax({
|
|
type:'GET',
|
|
dataType:'json',
|
|
async:false,
|
|
url:'/baseService/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();
|
|
}
|
|
})
|
|
|
|
}
|
|
});
|
|
|
|
}
|
|
}
|
|
});
|
|
})
|
|
|
|
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
|
|
};
|
|
// var jsont={
|
|
// "list": [
|
|
// {
|
|
// "fromName": "白城市",
|
|
// "accessCount": 951,
|
|
// "toName": "白城市"
|
|
// },
|
|
// {
|
|
// "fromName": "洮南市",
|
|
// "accessCount": 80,
|
|
// "toName": "白城市"
|
|
// },
|
|
// {
|
|
// "fromName": "大安市",
|
|
// "accessCount": 884,
|
|
// "toName": "白城市"
|
|
// },
|
|
// {
|
|
// "fromName": "通榆县",
|
|
// "accessCount": 730,
|
|
// "toName": "白城市"
|
|
// },
|
|
// {
|
|
// "fromName": "镇赉县",
|
|
// "accessCount": 730,
|
|
// "toName": "白城市"
|
|
// },
|
|
// {
|
|
// "fromName": "洮北区",
|
|
// "accessCount":640,
|
|
// "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;
|
|
|
|
}
|
|
|
|
|
|
|
|
function initMap(){
|
|
//获取from--to数据
|
|
var DATAF=getCoorData();
|
|
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,
|
|
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 = {
|
|
// backgroundColor: 'rgba(33,55,129,0.5)',
|
|
title : {
|
|
left: 'center',
|
|
textStyle : {
|
|
color: '#ffffff',
|
|
fontWeight:'bold',
|
|
fontSize:14
|
|
},
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
|
shadowBlur: 6
|
|
},
|
|
// dataRange: {
|
|
// min : 0,
|
|
// max : 1000,
|
|
// calculable : true,
|
|
// color: ['#ff3333', '#F739FF', 'yellow','lime','aqua'],
|
|
// textStyle:{
|
|
// color:'#fff'
|
|
// }
|
|
// },
|
|
|
|
tooltip : {//提示框组件
|
|
trigger: 'item',//触发类型
|
|
formatter:
|
|
|
|
function(params) {
|
|
if(params.seriesIndex==1){
|
|
return params.name + '<br>访问量:' + params.data.value[2];
|
|
}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 ]
|
|
});
|
|
}
|
|
}
|
|
return res;
|
|
};
|
|
|
|
//更新数据
|
|
function refreshData(city,newcount) {
|
|
if (!myChart) {
|
|
return;
|
|
}
|
|
//更新数据
|
|
var option = myChart.getOption();
|
|
console.log(option);
|
|
//展示资源数刷新
|
|
option.tooltip[0].formatter = function(params) {
|
|
var res = params.name + '<br/>';
|
|
var myseries = option.series;
|
|
|
|
//for (var j = 0; j < myseries[0].data.length; j++) {
|
|
if (city == params.name) {
|
|
res = params.name + '<br/>' + newcount
|
|
+ '访问量</br>';
|
|
// }
|
|
}
|
|
|
|
return res;
|
|
}
|
|
|
|
myChart.setOption(option,true);
|
|
}
|
|
|
|
// 刷新数据
|
|
setInterval(function () {
|
|
dealData();
|
|
},1000)
|
|
|
|
|
|
function dealData() {
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html> |