var map; var infoBoxTemp = null; $(function () { // var whdef = 100/1920;// 表示1920的设计图,使用100PX的默认值 var whdef = 100/916;// 表示1920的设计图,使用100PX的默认值 var wH = window.innerHeight;// 当前窗口的高度 var wW = window.innerWidth;// 当前窗口的宽度 // var rem = wW * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值 var rem = wH * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值 $('html').css('font-size', rem + "px"); //创建地图 initMap(); getBoundary(); findInfo(); //加载统计图1 loadoOption1(0); //加载统计图2 loadoOption2(0); //加载统计图3 loadoOption3(0); // guimoTop5(); //加载距离排行榜 loadjuliTop(109.088,34.321 ); //重新按类型加载数据 $("#seType").change(function(){ //加载教育 if($(this).val()==0){ var grade=$("#seDj"); grade.empty(); grade.append(""); grade.append(""); //添加下拉列表 grade.append(""); grade.append(""); grade.append(""); var html=' 教育部门'+ '民办'+ ' 地方企业'+ ' 事业单位'; $("#slexz").html(html); //加载区域边框 getBoundary(); findInfo(); //加载统计图1 loadoOption1(0); //加载统计图2 loadoOption2(0); //加载距离排行榜 loadjuliTop(109.088,34.321 ); //加载医疗 }else{ var grade=$("#seDj"); grade.empty(); grade.append(""); grade.append(""); //添加下拉列表 grade.append(""); grade.append(""); grade.append(""); var html=' 测试'; $("#slexz").html(html); map.clearOverlays(); getBoundary(); $("#jlTop").html(""); //加载区域边框 getBoundary(); findInfo1(); loadoOption1(1); loadoOption2(1); //加载距离排行榜 loadjuliTop(109.088,34.321 ); } }); }) ; /** * 地图添加标记点 */ function findInfo(){ //名称 var seName= $("#seName").val(); //类型(教育、医疗) var seType= $("#seType").val(); var tophtml=""; //等级(教育(高中、初中、小学、幼儿园)、医疗(诊所、医院)) var seDj= $("#seDj").val(); //等级(正常 停业 注销) var seZT= $('input[name="seZT"]:checked').val(); //性质(教育(教育部门、民办、地方企业、事业单位)、医疗(诊所、医院)) var seXz= $('input[name="seXz"]:checked').val(); } /** * 地图添加标记点 */ function findInfo1(){ //名称 var seName= $("#seName").val(); //类型(教育、医疗) var seType= $("#seType").val(); var tophtml=""; //等级(教育(高中、初中、小学、幼儿园)、医疗(诊所、医院)) var seDj= $("#seDj").val(); //等级(正常 停业 注销) var seZT= $('input[name="seZT"]:checked').val(); //性质(教育(教育部门、民办、地方企业、事业单位)、医疗(诊所、医院)) // var seXz= $('input[name="seXz"]:checked').val(); } // //加载学校规模排行榜 // function guimoTop5(){ // var tophtml=""; // jQuery.ajax({ // type:"post", // dataType:"json", // cache:false, // url:ctx+"/front/guimoTop", // success:function(data){ // //如果返回success // if(data.success){ // //循环返回json串中models的数据 // jQuery.each(data.models,function(index,value){ // if(index>4){ // return false; // }else{ // tophtml = tophtml+'
  • '+(index+1)+' ' + // ''+value.rnrs+'' +value.bxxz+'
  • '; // } // }) // } // $("#gmTop").html(tophtml); // } // }); // } //加载距离排行榜 function loadjuliTop(jd,wd){ //名称 var seName= $("#seName").val(); //类型(教育、医疗) var seType= $("#seType").val(); //等级(教育(高中、初中、小学、幼儿园)、医疗(诊所、医院)) var seDj= $("#seDj").val(); var tophtml=""; } //查询数据 function searchDate(){ //清除地图所有覆盖物 map.clearOverlays(); getBoundary(); findInfo(); } //加载统计图1数据 function loadoOption1(type){ myChart1.clear(); var data = [{ value:48, name: '教育部门' },{ value:48, name: '地方企业' }, { value: 10, name: '事业单位' }, { value: 1, name: '民办' }, { value: 33, name: '其它' }]; var option = { title: { text:'1000', subtext: '总数', left:'center', top:'50%', padding:[24,0], textStyle:{ color:'#fff', fontSize:18, align:'center' } }, backgroundColor: 'rgba(255,255,255,0)', tooltip: { trigger: 'item', formatter: "{a}
    {b}: {c} ({d}%)" }, legend: { orient: 'horizontal', top: '2%', left: 'center', data: ['教育部门', '地方企业', '民办', '事业单位','其它'], textStyle:{ fontSize: 12, color: '#6cbbe6' } }, series: [{ name: '受理数', type: 'pie', selectedMode: 'single', center : ['50%', '60%'], radius: ['40%', '58%'], color: ['#C1232B','#B5C334','#FCCE10','#E87C25','#27727B','#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD'], label: { normal: { position: 'outside', formatter: '{b}', textStyle: { color: '#3db3cb', fontSize: 10 } } }, labelLine: { normal: { show: true, lineStyle: { color: '#3db3cb' } } }, data: data }] }; myChart1.setOption(option); } //加载统计图2数据 function loadoOption2(type){ var title,data,data1,data2; data1=['2014','2015','2016','2017','2018']; //教育 if(type==0){ // title="办学数量变化趋势"; data=['教育部门','地方企业','民办','事业单位']; data2=[{value:335, name:'教育部门'},{value:310, name:'地方企业'}, {value:234, name:'民办'},{value:135, name:'事业单位'}]; //医疗 }else{ // title="医疗机构数量变化趋势"; data=['综合医院','村卫生室','普通诊所','中医诊所','社区卫生服务站']; data2=[{value:35, name:'综合医院'},{value:10, name:'村卫生室'}, {value:23, name:'中医诊所'},{value:35, name:'社区卫生服务站'},{value:5, name:'普通诊所'}]; } var option2 = { tooltip : { trigger: 'axis' }, legend: { y:'top', data:data, textStyle:{ color: '#6cbbe6' } }, calculable : true, grid:{ x:30, y:30, x2:20, height:'70%' }, xAxis : [ { type : 'category', boundaryGap : false, data :data1 , axisLabel:{ textStyle:{ color: '#6cbbe6' } } } ], yAxis : [ { type : 'value', axisLabel:{ textStyle:{ color: '#6cbbe6' } } } ], series : [ { name:'教育部门', type:'line', stack: '总数', itemStyle: {normal: {areaStyle: {type: 'default'}}}, data:[20, 32, 10, 34, 90, 30, 21] }, { name:'地方企业', type:'line', stack: '总数', itemStyle: {normal: {areaStyle: {type: 'default'}}}, data:[20, 18, 19, 23, 29, 33, 31] }, { name:'民办', type:'line', stack: '总数', itemStyle: {normal: {areaStyle: {type: 'default'}}}, data:[15, 23, 20, 15, 19, 33, 41] }, { name:'其它', type:'line', stack: '总数', itemStyle: {normal: {areaStyle: {type: 'default'}}}, data:[32, 33, 31, 34, 39, 33, 32] } ] }; myChart2.clear(); myChart2.setOption(option2); } //加载统计图3数据 function loadoOption3(type){ var Name = ['省级目标', '市级目标', '完成情况']; var color = ['#fb734e', '#e32f46', '#94d96c', '#0bbcb7', '#1a9bfc', '#7049f0']; var data = { //['国家目标', '海南目标', '完成情况'] "学前教育入园率(%)": [65, 60, 76.5], "义务教育巩固率(㎡)": [93, 93, 93.4], "高中教育毛入学率(%)": [87, 87, 88.3] }; var xAxisData = []; var data1 = [], data2 = [], data3 = []; for (var i in data) { xAxisData.push(i); data1.push(data[i][0]) data2.push(data[i][1]) data3.push(data[i][2]) } var label = { normal: { show: false, position: 'right', distance: 10, formatter: function(param) { return param.value + '%'; }, textStyle: { color: '#ffffff', fontSize: '16', } } }; var series = []; for (var j = 1; j < 4; j++) { if (j == 1) { var symbolOffset = [-48, 0]; var dataArr = data1 } else if (j == 2) { var symbolOffset = [0, 0]; var dataArr = data2 } else if (j == 3) { var symbolOffset = [48, 0]; var dataArr = data3 } series.push({ name: Name[j - 1], type: 'bar', stack: j, xAxisIndex: 0, data: dataArr, label: label, barWidth: 8, barGap: 5, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: color[j * 2 - 2] }, { offset: 1, color: color[j * 2 - 1] }]), } }, z: 2 }, { name: Name[j - 1], type: 'scatter', stack: j, xAxisIndex: 0, symbolOffset: symbolOffset, //相对于原本位置的偏移量 data: [0, 0, 0, 0], label: { normal: { show: false, } }, xAxisIndex: 2, symbolSize: 14, itemStyle: { normal: { borderColor: '#fff', borderWidth: 2, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: color[j * 2 - 2] }, { offset: 1, color: color[j * 2 - 1] }]), opacity: 1, } }, z: 2 }, { name: Name[j - 1], type: 'bar', xAxisIndex: 1, barGap: '140%', data: [dataArr[0] + 15, dataArr[1] + 15, dataArr[2] + 15, dataArr[3] + 15, ], barWidth: 20, itemStyle: { normal: { color: '#0e2147', barBorderRadius: 5, } }, z: 1 }, { name: Name[j - 1], type: 'bar', xAxisIndex: 2, data: [dataArr[0] + 15.5, dataArr[1] + 15.5, dataArr[2] + 15.5, dataArr[3] + 15.5, ], barWidth: 24, barGap: 1, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: color[j * 2 - 2] }, { offset: 1, color: color[j * 2 - 1] }]), barBorderRadius: 5, } }, z: 0 }, { name: Name[j - 1], type: 'scatter', hoverAnimation: false, data: [1.2, 1.2, 1.2, 1.2], xAxisIndex: 2, symbolOffset: symbolOffset, //相对于原本位置的偏移量 symbolSize: 24, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: color[j * 2 - 2] }, { offset: 1, color: color[j * 2 - 1] }]), opacity: 1, } }, z: 2 }) } var option3 = { backgroundColor: '#142058', grid: { left: '3%', right: '3%', bottom: '5%', top: '10%', containLabel: true }, tooltip: { show: "true", trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow', // 默认为直线,可选为:'line' | 'shadow' shadowStyle: { color: 'rgba(112,112,112,0)', }, }, // formatter: '{b}
    {a0}: {c0}%
    {a1}: {c1}%
    {a2}: {c2}%', formatter: function(params) { var unit = params[0].name.substring(params[0].name.indexOf('(') + 1, params[0].name.indexOf(')')); return params[0].name + ' :
    ' + params[0].seriesName + ' :' + params[0].data + unit + '
    ' + params[1].seriesName + ' :' + params[1].data + unit + '
    ' + params[2].seriesName + ' :' + params[2].data + unit; }, backgroundColor: 'rgba(0,0,0,0.7)', // 背景 padding: [8, 10], //内边距 extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影 }, legend: { top: 20, textStyle: { color: '#fff', }, data: Name, }, xAxis: [{ type: 'category', axisTick: { show: false }, axisLine: { show: true, lineStyle: { color: '#363e83', } }, axisLabel: { inside: false, textStyle: { color: '#bac0c0', fontWeight: 'normal', fontSize: '12', }, }, data: xAxisData }, { type: 'category', axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false }, splitArea: { show: false }, splitLine: { show: false }, data: xAxisData }, { type: 'category', axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false }, splitArea: { show: false }, splitLine: { show: false }, data: xAxisData }], yAxis: { type: 'value', axisTick: { show: false }, axisLine: { show: true, lineStyle: { color: '#32346c', } }, splitLine: { show: true, lineStyle: { color: '#32346c ', } }, axisLabel: { textStyle: { color: '#bac0c0', fontWeight: 'normal', fontSize: '12', }, }, }, series: series }; myChart3.clear(); myChart3.setOption(option3); } //加载灞桥区行政区划边框 function getBoundary(){ var bdary = new BMap.Boundary(); bdary.get("陕西省西安市灞桥区", function(rs){ //获取行政区域 // map.clearOverlays(); //清除地图覆盖物 var count = rs.boundaries.length; //行政区域的点有多少个 if (count === 0) { alert('未能获取当前输入行政区域'); return ; } var pointArray = []; for (var i = 0; i < count; i++) { var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 3, strokeColor: "#FFD700",fillColor:"none"}); //建立多边形覆盖物 pay1=ply; map.addOverlay(ply); //添加覆盖物 pointArray = pointArray.concat(ply.getPath()); } }); } function initMap() { map = bmap('map' , new BMap.Point(109.1007, 34.3163), 12,false,false,false);// new BMap.Map("container"); // 创建Map实例 //地图自定义样式 map.setMapStyle({ styleJson: [ { "featureType": "land", "elementType": "geometry.fill", "stylers": { "color": "#20254c", "hue": "#20254c", "visibility": "on" } }, { "featureType": "water", "elementType": "geometry.fill", "stylers": { "color": "#2e5eb0" } }, { "featureType": "green", "elementType": "geometry.fill", "stylers": { "color": "#079f3a" } }, { "featureType": "road", "elementType": "all", "stylers": { "color": "#1892dd" } }, { "featureType": "all", "elementType": "labels.text.fill", "stylers": { "color": "#857f7f" } }, { "featureType": "all", "elementType": "labels.text.stroke", "stylers": { "color": "#182c5f" } }, { "featureType": "poi", "elementType": "all", "stylers": { "visibility": "off" } }, { "featureType": "all", "elementType": "labels.icon", "stylers": { "visibility": "off" } }, { "featureType": "all", "elementType": "labels.text.fill", "stylers": { "color": "#2da0c6", "visibility": "on" } }, { "featureType": "manmade", "elementType": "geometry.fill", "stylers": { "color": "#6a6666ff" } } , { "featureType": "building", "elementType": "geometry.fill", "stylers": { "color": "#857f7fff" } } ] }); }