Commit 2420e9980203add77a60416598104fd187f8e2c8
1 parent
eb92911a
first
Showing
2 changed files
with
185 additions
and
214 deletions
js/lib/handan.json renamed to js/pagejs/handan.json
js/pagejs/index.js
| ... | ... | @@ -16,151 +16,153 @@ |
| 16 | 16 | var displayCountry = []; |
| 17 | 17 | //赤峰的省市区县 |
| 18 | 18 | function ChiFengMapSeries(name){ |
| 19 | - var obj = { | |
| 19 | + $.get('./../js/pagejs/handan.json', function (yCjson) { | |
| 20 | + echarts.registerMap('邯郸', yCjson); | |
| 21 | + var obj = { | |
| 20 | 22 | |
| 21 | - // center:[118.361313,42.27018],//中心点 | |
| 22 | - zoom:1.2,//当前视角的缩放比例。 | |
| 23 | - // roam:'scale',//是否支持鼠标缩放 | |
| 24 | - //selectedMode:true,//选中模式，表示是否支持多个选中，默认关闭 | |
| 25 | - name:name, | |
| 26 | - type:'map', | |
| 27 | - map:'邯郸', | |
| 28 | - | |
| 29 | - // markPoint:{ | |
| 30 | - // symbol:'circle' | |
| 31 | - // }, | |
| 32 | - label: { | |
| 33 | - normal: { | |
| 34 | - show: true | |
| 35 | - }, | |
| 36 | - emphasis: { | |
| 37 | - show: true, | |
| 38 | - } | |
| 39 | - }, | |
| 40 | - mapLocation:{ | |
| 41 | - y:60 | |
| 42 | - }, | |
| 43 | - itemStyle: { | |
| 44 | - normal: { | |
| 45 | - borderWidth: 1, | |
| 46 | - borderColor: 'rgba(147,191,245,.3)', | |
| 47 | - | |
| 48 | - label: { | |
| 49 | - show: false, | |
| 50 | - textStyle: { | |
| 51 | - color: "#fff" | |
| 52 | - } | |
| 53 | - } | |
| 54 | - }, | |
| 55 | - emphasis:{ | |
| 56 | - areaColor: 'rgba(255,204,0,0.4)', | |
| 57 | - label: { | |
| 58 | - show: false, | |
| 59 | - textStyle: { | |
| 60 | - color: "#fff" | |
| 61 | - } | |
| 62 | - } | |
| 63 | - } | |
| 64 | - }, | |
| 65 | - markPoint:{ | |
| 66 | - symbol:'image://./../img/cf_map_icon.png', | |
| 67 | - silent:true, | |
| 68 | - symbolSize:[17, 17], | |
| 69 | - data: [ | |
| 23 | + // center:[118.361313,42.27018],//中心点 | |
| 24 | + zoom: 1.2,//当前视角的缩放比例。 | |
| 25 | + // roam:'scale',//是否支持鼠标缩放 | |
| 26 | + //selectedMode:true,//选中模式，表示是否支持多个选中，默认关闭 | |
| 27 | + name: name, | |
| 28 | + type: 'map', | |
| 29 | + map: '邯郸', | |
| 70 | 30 | |
| 71 | - { | |
| 72 | - name: '', | |
| 73 | - coord: [103.729882,30.136356], | |
| 31 | + // markPoint:{ | |
| 32 | + // symbol:'circle' | |
| 33 | + // }, | |
| 34 | + label: { | |
| 35 | + normal: { | |
| 36 | + show: true | |
| 37 | + }, | |
| 38 | + emphasis: { | |
| 39 | + show: true, | |
| 40 | + } | |
| 41 | + }, | |
| 42 | + mapLocation: { | |
| 43 | + y: 60 | |
| 44 | + }, | |
| 45 | + itemStyle: { | |
| 46 | + normal: { | |
| 47 | + borderWidth: 1, | |
| 48 | + borderColor: 'rgba(147,191,245,.3)', | |
| 49 | + | |
| 50 | + label: { | |
| 51 | + show: false, | |
| 52 | + textStyle: { | |
| 53 | + color: "#fff" | |
| 54 | + } | |
| 55 | + } | |
| 74 | 56 | }, |
| 57 | + emphasis: { | |
| 58 | + areaColor: 'rgba(255,204,0,0.4)', | |
| 59 | + label: { | |
| 60 | + show: false, | |
| 61 | + textStyle: { | |
| 62 | + color: "#fff" | |
| 63 | + } | |
| 64 | + } | |
| 65 | + } | |
| 66 | + }, | |
| 67 | + markPoint: { | |
| 68 | + symbol: 'image://./../img/cf_map_icon.png', | |
| 69 | + silent: true, | |
| 70 | + symbolSize: [17, 17], | |
| 71 | + data: [ | |
| 72 | + | |
| 73 | + { | |
| 74 | + name: '', | |
| 75 | + coord: [103.729882, 30.136356], | |
| 76 | + }, | |
| 77 | + { | |
| 78 | + name: '', | |
| 79 | + coord: [103.789673, 30.268198], | |
| 80 | + }, | |
| 81 | + { | |
| 82 | + name: '', | |
| 83 | + coord: [103.806921, 29.789424], | |
| 84 | + }, | |
| 85 | + { | |
| 86 | + name: '', | |
| 87 | + coord: [104.164518, 30.059866], | |
| 88 | + }, | |
| 89 | + { | |
| 90 | + name: '', | |
| 91 | + coord: [103.383783, 30.04186], | |
| 92 | + }, | |
| 93 | + { | |
| 94 | + name: '', | |
| 95 | + coord: [103.26535, 29.914721], | |
| 96 | + }, | |
| 97 | + | |
| 98 | + ], | |
| 99 | + label: { | |
| 100 | + normal: { | |
| 101 | + show: false, | |
| 102 | + }, | |
| 103 | + emphasis: { | |
| 104 | + show: false, | |
| 105 | + }, | |
| 106 | + | |
| 107 | + } | |
| 108 | + }, | |
| 109 | + | |
| 110 | + data: [ | |
| 75 | 111 | { |
| 76 | - name: '', | |
| 77 | - coord: [103.789673,30.268198], | |
| 112 | + name: '峰峰矿区', | |
| 113 | + value: 0, | |
| 114 | + | |
| 78 | 115 | }, |
| 79 | 116 | { |
| 80 | - name: '', | |
| 81 | - coord: [103.806921,29.789424], | |
| 117 | + name: '彭山区', | |
| 118 | + value: 0 | |
| 82 | 119 | }, |
| 83 | 120 | { |
| 84 | - name: '', | |
| 85 | - coord: [104.164518,30.059866], | |
| 121 | + name: '青神县', | |
| 122 | + value: 0 | |
| 86 | 123 | }, |
| 87 | 124 | { |
| 88 | - name: '', | |
| 89 | - coord: [103.383783,30.04186], | |
| 125 | + name: '仁寿县', | |
| 126 | + value: 0 | |
| 90 | 127 | }, |
| 91 | 128 | { |
| 92 | - name: '', | |
| 93 | - coord: [103.26535,29.914721], | |
| 129 | + name: '丹棱县', | |
| 130 | + value: 0 | |
| 94 | 131 | }, |
| 95 | - | |
| 132 | + { | |
| 133 | + name: '洪雅县', | |
| 134 | + value: 0 | |
| 135 | + } | |
| 96 | 136 | ], |
| 97 | - label:{ | |
| 98 | - normal:{ | |
| 99 | - show:false, | |
| 100 | - }, | |
| 101 | - emphasis:{ | |
| 102 | - show:false, | |
| 103 | - }, | |
| 104 | - | |
| 105 | - } | |
| 106 | - }, | |
| 107 | 137 | |
| 108 | - data:[ | |
| 109 | - { | |
| 110 | - name:'峰峰矿区', | |
| 111 | - value:0, | |
| 112 | 138 | |
| 113 | - }, | |
| 114 | - { | |
| 115 | - name:'彭山区', | |
| 116 | - value:0 | |
| 117 | - }, | |
| 118 | - { | |
| 119 | - name:'青神县', | |
| 120 | - value:0 | |
| 121 | - }, | |
| 122 | - { | |
| 123 | - name:'仁寿县', | |
| 124 | - value:0 | |
| 125 | - }, | |
| 126 | - { | |
| 127 | - name:'丹棱县', | |
| 128 | - value:0 | |
| 129 | - }, | |
| 130 | - { | |
| 131 | - name:'洪雅县', | |
| 132 | - value:0 | |
| 133 | - } | |
| 134 | - ], | |
| 135 | - | |
| 136 | - | |
| 137 | - }; | |
| 138 | - return obj; | |
| 139 | - | |
| 139 | + }; | |
| 140 | + return obj; | |
| 141 | + }); | |
| 140 | 142 | }; |
| 141 | 143 | var map_c_option = { |
| 142 | 144 | tooltip: { |
| 143 | 145 | trigger: 'item', |
| 144 | - formatter: function(params) { | |
| 145 | - var res = params.name+'<br/>'; | |
| 146 | - var myseries = map_c_option.series; | |
| 147 | - for (var i = 0; i < myseries.length; i++) { | |
| 148 | - | |
| 149 | - var displayVal = 0; | |
| 150 | - for(var j=0;j<myseries[i].data.length;j++){ | |
| 151 | - if(myseries[i].data[j].name==params.name){ | |
| 152 | - displayVal = myseries[i].data[j].value; | |
| 153 | - break; | |
| 154 | - } | |
| 155 | - } | |
| 156 | - //除了前3项后面的数据为0 不显示 | |
| 157 | - if(i<3 || displayVal != 0){ | |
| 158 | - res+= myseries[i].name; | |
| 159 | - res+= ' : '+ displayVal+'<br/>'; | |
| 160 | - } | |
| 161 | - } | |
| 162 | - return res; | |
| 163 | - } | |
| 146 | + // formatter: function(params) { | |
| 147 | + // var res = params.name+'<br/>'; | |
| 148 | + // var myseries = map_c_option.series; | |
| 149 | + // for (var i = 0; i < myseries.length; i++) { | |
| 150 | + // | |
| 151 | + // var displayVal = 0; | |
| 152 | + // for(var j=0;j<myseries[i].data.length;j++){ | |
| 153 | + // if(myseries[i].data[j].name==params.name){ | |
| 154 | + // // displayVal = myseries[i].data[j].value; | |
| 155 | + // break; | |
| 156 | + // } | |
| 157 | + // } | |
| 158 | + // //除了前3项后面的数据为0 不显示 | |
| 159 | + // if(i<3 || displayVal != 0){ | |
| 160 | + // res+= myseries[i].name; | |
| 161 | + // res+= ' : '+ displayVal+'<br/>'; | |
| 162 | + // } | |
| 163 | + // } | |
| 164 | + // return res; | |
| 165 | + // } | |
| 164 | 166 | }, |
| 165 | 167 | |
| 166 | 168 | // dataRange:{ |
| ... | ... | @@ -297,80 +299,49 @@ |
| 297 | 299 | //左中柱图bar_l_echart |
| 298 | 300 | |
| 299 | 301 | //中间地图 |
| 300 | - map_c_echart.setOption(map_c_option,true); | |
| 301 | - // map_c_echart.mapselected({ | |
| 302 | - // | |
| 303 | - // }); | |
| 304 | - currentIndex = -1; | |
| 305 | - var dataLen = map_c_option.series[0].data.length; | |
| 306 | - // 取消之前高亮的图形 | |
| 307 | - map_c_echart.dispatchAction({ | |
| 308 | - type: 'downplay', | |
| 309 | - seriesIndex: 0, | |
| 310 | - dataIndex: currentIndex | |
| 311 | - }); | |
| 312 | - currentIndex = (currentIndex + 1) % dataLen; | |
| 313 | - // 高亮当前图形 | |
| 314 | - map_c_echart.dispatchAction({ | |
| 315 | - type: 'highlight', | |
| 316 | - seriesIndex: 0, | |
| 317 | - dataIndex:currentIndex | |
| 318 | - }); | |
| 319 | - // 显示 tooltip | |
| 320 | - map_c_echart.dispatchAction({ | |
| 321 | - type: 'showTip', | |
| 322 | - seriesIndex: 0, | |
| 323 | - dataIndex: currentIndex | |
| 302 | + $.getJSON('./../js/pagejs/handan.json', function (yCjson) { | |
| 303 | + echarts.registerMap('银川', yCjson); | |
| 304 | + var chart = echarts.init(document.getElementById('map_c_echart')); | |
| 305 | + | |
| 306 | + option = { | |
| 307 | + | |
| 308 | + dataRange:{ | |
| 309 | + min:0, | |
| 310 | + max:500, | |
| 311 | + text:['高','低'], | |
| 312 | + realtime:true, | |
| 313 | + calculable:true, | |
| 314 | + color:['orangered','yellow','green'] | |
| 315 | + }, | |
| 316 | + series:[ | |
| 317 | + { | |
| 318 | + name:'犯罪数量', | |
| 319 | + type:'map', | |
| 320 | + map:'银川', | |
| 321 | + mapLocation:{ | |
| 322 | + y:60 | |
| 323 | + }, | |
| 324 | + itemSytle:{ | |
| 325 | + emphasis:{label:{show:false}} | |
| 326 | + }, | |
| 327 | + data:[ | |
| 328 | + {name:'西夏区',value:Math.round(Math.random()*500)}, | |
| 329 | + {name:'贺兰县',value:Math.round(Math.random()*500)}, | |
| 330 | + {name:'金凤区',value:Math.round(Math.random()*500)}, | |
| 331 | + {name:'永宁县',value:Math.round(Math.random()*500)}, | |
| 332 | + {name:'灵武市',value:Math.round(Math.random()*500)}, | |
| 333 | + {name:'兴庆区',value:Math.round(Math.random()*500)} | |
| 334 | + ] | |
| 335 | + } | |
| 336 | + ], | |
| 337 | + | |
| 338 | + }; | |
| 339 | + chart.setOption(option); | |
| 324 | 340 | }); |
| 325 | - // setTimeout(function () { | |
| 326 | - // currentIndex = -1; | |
| 327 | - // var dataLen = map_c_option.series[0].data.length; | |
| 328 | - // // 取消之前高亮的图形 | |
| 329 | - // map_c_echart.dispatchAction({ | |
| 330 | - // type: 'downplay', | |
| 331 | - // seriesIndex: 0, | |
| 332 | - // dataIndex: currentIndex | |
| 333 | - // }); | |
| 334 | - // currentIndex = (currentIndex + 1) % dataLen; | |
| 335 | - // // 高亮当前图形 | |
| 336 | - // map_c_echart.dispatchAction({ | |
| 337 | - // type: 'highlight', | |
| 338 | - // seriesIndex: 0, | |
| 339 | - // dataIndex:currentIndex | |
| 340 | - // }); | |
| 341 | - // // 显示 tooltip | |
| 342 | - // map_c_echart.dispatchAction({ | |
| 343 | - // type: 'showTip', | |
| 344 | - // seriesIndex: 0, | |
| 345 | - // dataIndex: currentIndex | |
| 346 | - // }); | |
| 347 | - // },1000); | |
| 348 | 341 | |
| 349 | 342 | |
| 350 | - // setInterval(function () { | |
| 351 | - // var dataLen = map_c_option.series[0].data.length; | |
| 352 | - // // 取消之前高亮的图形 | |
| 353 | - // myChart.dispatchAction({ | |
| 354 | - // type: 'downplay', | |
| 355 | - // seriesIndex: 0, | |
| 356 | - // dataIndex: currentIndex | |
| 357 | - // }); | |
| 358 | - // currentIndex = (currentIndex + 1) % dataLen; | |
| 359 | - // // 高亮当前图形 | |
| 360 | - // myChart.dispatchAction({ | |
| 361 | - // type: 'highlight', | |
| 362 | - // seriesIndex: 0, | |
| 363 | - // dataIndex:currentIndex | |
| 364 | - // }); | |
| 365 | - // // 显示 tooltip | |
| 366 | - // myChart.dispatchAction({ | |
| 367 | - // type: 'showTip', | |
| 368 | - // seriesIndex: 0, | |
| 369 | - // dataIndex: currentIndex | |
| 370 | - // }); | |
| 371 | - // }, 1000); | |
| 372 | - | |
| 373 | - //右上线上线下排行榜图 | |
| 343 | + | |
| 344 | + //右上线上线下排行榜图 | |
| 374 | 345 | var bar_r_option = { |
| 375 | 346 | // tooltip : { |
| 376 | 347 | // trigger: 'axis', |
| ... | ... | @@ -971,16 +942,16 @@ |
| 971 | 942 | var seriesBerthData=new ChiFengMapSeries("停车位数"); |
| 972 | 943 | //停车场 |
| 973 | 944 | var seriesParkData=new ChiFengMapSeries("停车场数"); |
| 974 | - for (var i = 0; i < seriesBerthData.data.length; i++) { | |
| 975 | - var name = seriesBerthData.data[i].name; | |
| 976 | - //获取该区停车场个数 | |
| 977 | - seriesParkData.data[i].value=pkVo[name]==null?0:pkVo[name]; | |
| 978 | - //获取该区的停车位个数 | |
| 979 | - seriesBerthData.data[i].value=berthsVo[name]==null?0:berthsVo[name]; | |
| 980 | - } | |
| 981 | - map_c_option.series[0] = seriesParkData; | |
| 982 | - map_c_option.series[1] = seriesBerthData; | |
| 983 | - map_c_echart.setOption(map_c_option); | |
| 945 | + // for (var i = 0; i < seriesBerthData.data.length; i++) { | |
| 946 | + // var name = seriesBerthData.data[i].name; | |
| 947 | + // //获取该区停车场个数 | |
| 948 | + // seriesParkData.data[i].value=pkVo[name]==null?0:pkVo[name]; | |
| 949 | + // //获取该区的停车位个数 | |
| 950 | + // seriesBerthData.data[i].value=berthsVo[name]==null?0:berthsVo[name]; | |
| 951 | + // } | |
| 952 | + // map_c_option.series[0] = seriesParkData; | |
| 953 | + // map_c_option.series[1] = seriesBerthData; | |
| 954 | + // map_c_echart.setOption(map_c_option); | |
| 984 | 955 | |
| 985 | 956 | }else{ |
| 986 | 957 | |
| ... | ... | @@ -1062,14 +1033,14 @@ |
| 1062 | 1033 | |
| 1063 | 1034 | //中间地图 |
| 1064 | 1035 | //空闲停车位 |
| 1065 | - var seriesBerthData=new ChiFengMapSeries("空闲车位数"); | |
| 1066 | - for (var i = 0; i < seriesBerthData.data.length; i++) { | |
| 1067 | - var name = seriesBerthData.data[i].name; | |
| 1068 | - //获取该区的停车位个数 | |
| 1069 | - seriesBerthData.data[i].value=berthsVo[name]==null?0:berthsVo[name]; | |
| 1070 | - } | |
| 1071 | - map_c_option.series[2] = seriesBerthData; | |
| 1072 | - map_c_echart.setOption(map_c_option); | |
| 1036 | + // var seriesBerthData=new ChiFengMapSeries("空闲车位数"); | |
| 1037 | + // for (var i = 0; i < seriesBerthData.data.length; i++) { | |
| 1038 | + // var name = seriesBerthData.data[i].name; | |
| 1039 | + // //获取该区的停车位个数 | |
| 1040 | + // seriesBerthData.data[i].value=berthsVo[name]==null?0:berthsVo[name]; | |
| 1041 | + // } | |
| 1042 | + // map_c_option.series[2] = seriesBerthData; | |
| 1043 | + // map_c_echart.setOption(map_c_option); | |
| 1073 | 1044 | |
| 1074 | 1045 | }else{ |
| 1075 | 1046 | ... | ... |