ehcharts中国地图四级级下钻
echarts 官网关于中国地图，只有全国-省；省-市，没有中国-省-市-县四级下钻相关文献，echarts地图最重要一点是模块化相对于其他各个图形，一下为三级下钻部分代码包括各级别交互，望指点；
中国地图模块化部分js及各个图形联动：
1 require( 2 [ 3 'echarts', 4 'echarts/chart/map', // 使用柱状图就加载bar模块，按需加载 5 'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载 6 'echarts/chart/pie', // 使用柱状图就加载bar模块，按需加载 7 'echarts/chart/line', // 使用柱状图就加载bar模块，按需加载 8 'echarts/chart/radar', // 使用柱状图就加载bar模块，按需加载 9 'echarts/chart/funnel' // 使用柱状图就加载bar模块，按需加载 10 ], 11 function (ec) { 12 $.ajax({ 13 type: "get", 14 //url: "exp1.txt", 15 url: "/stat/led/region", 16 data: "regionType=0®ionId=0", 17 success: function (data) { 18 var areadata = []; 19 if (data.status == "0") { 20 if (data.data) { 21 var totalCntMap = data.data["totalCntMap"]; 22 $.each(totalCntMap, function (v, p) {//解析成对象模式省市部分 23 areadata.push({"name": v, "value": p}); 24 }); 25 } 26 27 var regionType = 0;//默认全国 28 var regionId = 0;//默认全国 29 var ecConfig = require('echarts/config'); 30 var zrEvent = require('zrender/tool/event'); 31 var cityMap = { 32 "北京市": "110000", 33 //"北京市": "110100", 34 "天津市": "120000", 35 //"天津市": "120100", 36 "上海市": "310000", 37 //"上海市": "310100", 38 "重庆市": "500000", 39 //"重庆市": "500100", 40 41 "崇明县": "310200", // ?? 42 "湖北省直辖县市": "429000", // ?? 43 "铜仁市": "522200", // ?? 44 "毕节市": "522400", // ?? 45 46 "石家庄市": "130100", 47 "唐山市": "130200", 48 "秦皇岛市": "130300", 49 "邯郸市": "130400", 50 "邢台市": "130500", 51 "保定市": "130600", 52 "张家口市": "130700", 53 "承德市": "130800", 54 "沧州市": "130900", 55 "廊坊市": "131000", 56 "衡水市": "131100", 57 "太原市": "140100", 58 "大同市": "140200", 59 "阳泉市": "140300", 60 "长治市": "140400", 61 "晋城市": "140500", 62 "朔州市": "140600", 63 "晋中市": "140700", 64 "运城市": "140800", 65 "忻州市": "140900", 66 "临汾市": "141000", 67 "吕梁市": "141100", 68 "呼和浩特市": "150100", 69 "包头市": "150200", 70 "乌海市": "150300", 71 "赤峰市": "150400", 72 "通辽市": "150500", 73 "鄂尔多斯市": "150600", 74 "呼伦贝尔市": "150700", 75 "巴彦淖尔市": "150800", 76 "乌兰察布市": "150900", 77 "兴安盟": "152200", 78 "锡林郭勒盟": "152500", 79 "阿拉善盟": "152900", 80 "沈阳市": "210100", 81 "大连市": "210200", 82 "鞍山市": "210300", 83 "抚顺市": "210400", 84 "本溪市": "210500", 85 "丹东市": "210600", 86 "锦州市": "210700", 87 "营口市": "210800", 88 "阜新市": "210900", 89 "辽阳市": "211000", 90 "盘锦市": "211100", 91 "铁岭市": "211200", 92 "朝阳市": "211300", 93 "葫芦岛市": "211400", 94 "长春市": "220100", 95 "吉林市": "220200", 96 "四平市": "220300", 97 "辽源市": "220400", 98 "通化市": "220500", 99 "白山市": "220600", 100 "松原市": "220700", 101 "白城市": "220800", 102 "延边朝鲜族自治州": "222400", 103 "哈尔滨市": "230100", 104 "齐齐哈尔市": "230200", 105 "鸡西市": "230300", 106 "鹤岗市": "230400", 107 "双鸭山市": "230500", 108 "大庆市": "230600", 109 "伊春市": "230700", 110 "佳木斯市": "230800", 111 "七台河市": "230900", 112 "牡丹江市": "231000", 113 "黑河市": "231100", 114 "绥化市": "231200", 115 "大兴安岭地区": "232700", 116 "南京市": "320100", 117 "无锡市": "320200", 118 "徐州市": "320300", 119 "常州市": "320400", 120 "苏州市": "320500", 121 "南通市": "320600", 122 "连云港市": "320700", 123 "淮安市": "320800", 124 "盐城市": "320900", 125 "扬州市": "321000", 126 "镇江市": "321100", 127 "泰州市": "321200", 128 "宿迁市": "321300", 129 "杭州市": "330100", 130 "宁波市": "330200", 131 "温州市": "330300", 132 "嘉兴市": "330400", 133 "湖州市": "330500", 134 "绍兴市": "330600", 135 "金华市": "330700", 136 "衢州市": "330800", 137 "舟山市": "330900", 138 "台州市": "331000", 139 "丽水市": "331100", 140 "合肥市": "340100", 141 "芜湖市": "340200", 142 "蚌埠市": "340300", 143 "淮南市": "340400", 144 "马鞍山市": "340500", 145 "淮北市": "340600", 146 "铜陵市": "340700", 147 "安庆市": "340800", 148 "黄山市": "341000", 149 "滁州市": "341100", 150 "阜阳市": "341200", 151 "宿州市": "341300", 152 "六安市": "341500", 153 "亳州市": "341600", 154 "池州市": "341700", 155 "宣城市": "341800", 156 "福州市": "350100", 157 "厦门市": "350200", 158 "莆田市": "350300", 159 "三明市": "350400", 160 "泉州市": "350500", 161 "漳州市": "350600", 162 "南平市": "350700", 163 "龙岩市": "350800", 164 "宁德市": "350900", 165 "南昌市": "360100", 166 "景德镇市": "360200", 167 "萍乡市": "360300", 168 "九江市": "360400", 169 "新余市": "360500", 170 "鹰潭市": "360600", 171 "赣州市": "360700", 172 "吉安市": "360800", 173 "宜春市": "360900", 174 "抚州市": "361000", 175 "上饶市": "361100", 176 "济南市": "370100", 177 "青岛市": "370200", 178 "淄博市": "370300", 179 "枣庄市": "370400", 180 "东营市": "370500", 181 "烟台市": "370600", 182 "潍坊市": "370700", 183 "济宁市": "370800", 184 "泰安市": "370900", 185 "威海市": "371000", 186 "日照市": "371100", 187 "莱芜市": "371200", 188 "临沂市": "371300", 189 "德州市": "371400", 190 "聊城市": "371500", 191 "滨州市": "371600", 192 "菏泽市": "371700", 193 "郑州市": "410100", 194 "开封市": "410200", 195 "洛阳市": "410300", 196 "平顶山市": "410400", 197 "安阳市": "410500", 198 "鹤壁市": "410600", 199 "新乡市": "410700", 200 "焦作市": "410800", 201 "濮阳市": "410900", 202 "许昌市": "411000", 203 "漯河市": "411100", 204 "三门峡市": "411200", 205 "南阳市": "411300", 206 "商丘市": "411400", 207 "信阳市": "411500", 208 "周口市": "411600", 209 "驻马店市": "411700", 210 "省直辖县级行政区划": "469000", 211 "武汉市": "420100", 212 "黄石市": "420200", 213 "十堰市": "420300", 214 "宜昌市": "420500", 215 "襄阳市": "420600", 216 "鄂州市": "420700", 217 "荆门市": "420800", 218 "孝感市": "420900", 219 "荆州市": "421000", 220 "黄冈市": "421100", 221 "咸宁市": "421200", 222 "随州市": "421300", 223 "恩施土家族苗族自治州": "422800", 224 "长沙市": "430100", 225 "株洲市": "430200", 226 "湘潭市": "430300", 227 "衡阳市": "430400", 228 "邵阳市": "430500", 229 "岳阳市": "430600", 230 "常德市": "430700", 231 "张家界市": "430800", 232 "益阳市": "430900", 233 "郴州市": "431000", 234 "永州市": "431100", 235 "怀化市": "431200", 236 "娄底市": "431300", 237 "湘西土家族苗族自治州": "433100", 238 "广州市": "440100", 239 "韶关市": "440200", 240 "深圳市": "440300", 241 "珠海市": "440400", 242 "汕头市": "440500", 243 "佛山市": "440600", 244 "江门市": "440700", 245 "湛江市": "440800", 246 "茂名市": "440900", 247 "肇庆市": "441200", 248 "惠州市": "441300", 249 "梅州市": "441400", 250 "汕尾市": "441500", 251 "河源市": "441600", 252 "阳江市": "441700", 253 "清远市": "441800", 254 "东莞市": "441900", 255 "中山市": "442000", 256 "潮州市": "445100", 257 "揭阳市": "445200", 258 "云浮市": "445300", 259 "南宁市": "450100", 260 "柳州市": "450200", 261 "桂林市": "450300", 262 "梧州市": "450400", 263 "北海市": "450500", 264 "防城港市": "450600", 265 "钦州市": "450700", 266 "贵港市": "450800", 267 "玉林市": "450900", 268 "百色市": "451000", 269 "贺州市": "451100", 270 "河池市": "451200", 271 "来宾市": "451300", 272 "崇左市": "451400", 273 "海口市": "460100", 274 "三亚市": "460200", 275 "三沙市": "460300", 276 "成都市": "510100", 277 "自贡市": "510300", 278 "攀枝花市": "510400", 279 "泸州市": "510500", 280 "德阳市": "510600", 281 "绵阳市": "510700", 282 "广元市": "510800", 283 "遂宁市": "510900", 284 "内江市": "511000", 285 "乐山市": "511100", 286 "南充市": "511300", 287 "眉山市": "511400", 288 "宜宾市": "511500", 289 "广安市": "511600", 290 "达州市": "511700", 291 "雅安市": "511800", 292 "巴中市": "511900", 293 "资阳市": "512000", 294 "阿坝藏族羌族自治州": "513200", 295 "甘孜藏族自治州": "513300", 296 "凉山彝族自治州": "513400", 297 "贵阳市": "520100", 298 "六盘水市": "520200", 299 "遵义市": "520300", 300 "安顺市": "520400", 301 "黔西南布依族苗族自治州": "522300", 302 "黔东南苗族侗族自治州": "522600", 303 "黔南布依族苗族自治州": "522700", 304 "昆明市": "530100", 305 "曲靖市": "530300", 306 "玉溪市": "530400", 307 "保山市": "530500", 308 "昭通市": "530600", 309 "丽江市": "530700", 310 "普洱市": "530800", 311 "临沧市": "530900", 312 "楚雄彝族自治州": "532300", 313 "红河哈尼族彝族自治州": "532500", 314 "文山壮族苗族自治州": "532600", 315 "西双版纳傣族自治州": "532800", 316 "大理白族自治州": "532900", 317 "德宏傣族景颇族自治州": "533100", 318 "怒江傈僳族自治州": "533300", 319 "迪庆藏族自治州": "533400", 320 "拉萨市": "540100", 321 "昌都地区": "542100", 322 "山南地区": "542200", 323 "日喀则地区": "542300", 324 "那曲地区": "542400", 325 "阿里地区": "542500", 326 "林芝地区": "542600", 327 "西安市": "610100", 328 "铜川市": "610200", 329 "宝鸡市": "610300", 330 "咸阳市": "610400", 331 "渭南市": "610500", 332 "延安市": "610600", 333 "汉中市": "610700", 334 "榆林市": "610800", 335 "安康市": "610900", 336 "商洛市": "611000", 337 "兰州市": "620100", 338 "嘉峪关市": "620200", 339 "金昌市": "620300", 340 "白银市": "620400", 341 "天水市": "620500", 342 "武威市": "620600", 343 "张掖市": "620700", 344 "平凉市": "620800", 345 "酒泉市": "620900", 346 "庆阳市": "621000", 347 "定西市": "621100", 348 "陇南市": "621200", 349 "临夏回族自治州": "622900", 350 "甘南藏族自治州": "623000", 351 "西宁市": "630100", 352 "海东地区": "632100", 353 "海北藏族自治州": "632200", 354 "黄南藏族自治州": "632300", 355 "海南藏族自治州": "632500", 356 "果洛藏族自治州": "632600", 357 "玉树藏族自治州": "632700", 358 "海西蒙古族藏族自治州": "632800", 359 "银川市": "640100", 360 "石嘴山市": "640200", 361 "吴忠市": "640300", 362 "固原市": "640400", 363 "中卫市": "640500", 364 "乌鲁木齐市": "650100", 365 "克拉玛依市": "650200", 366 "吐鲁番地区": "652100", 367 "哈密地区": "652200", 368 "昌吉回族自治州": "652300", 369 "博尔塔拉蒙古自治州": "652700", 370 "巴音郭楞蒙古自治州": "652800", 371 "阿克苏地区": "652900", 372 "克孜勒苏柯尔克孜自治州": "653000", 373 "喀什地区": "653100", 374 "和田地区": "653200", 375 "伊犁哈萨克自治州": "654000", 376 "塔城地区": "654200", 377 "阿勒泰地区": "654300", 378 "自治区直辖县级行政区划": "659000", 379 "台湾省": "710000", 380 "香港特别行政区": "810100", 381 "澳门特别行政区": "820000" 382 }; 383 var provinceMap = { 384 "北京": 110000, 385 "天津": 120000, 386 "河北": 130000, 387 "山西": 140000, 388 "内蒙古": 150000, 389 "辽宁": 210000, 390 "吉林": 220000, 391 "黑龙江": 230000, 392 "上海": 310000, 393 "江苏": 320000, 394 "浙江": 330000, 395 "安徽": 340000, 396 "福建": 350000, 397 "江西": 360000, 398 "山东": 370000, 399 "河南": 410000, 400 "湖北": 420000, 401 "湖南": 430000, 402 "广东": 440000, 403 "广西": 450000, 404 "海南": 460000, 405 "重庆": 500000, 406 "四川": 510000, 407 "贵州": 520000, 408 "云南": 530000, 409 "西藏": 540000, 410 "陕西": 610000, 411 "甘肃": 620000, 412 "青海": 630000, 413 "宁夏": 640000, 414 "新疆": 650000, 415 "台湾": 710000, 416 "香港": 810000, 417 "澳门": 820000 418 }; 419 var municipality = ["北京", "天津", "上海", "重庆", "台湾", "香港", "澳门"]; 420 421 function chinamap() { 422 var myChart = ec.init(document.getElementById('main')); 423 option = { 424 tooltip: { 425 show: false, 426 trigger: 'item', 427 formatter: '{a} <br/>{b}: {c}' 428 }, 429 dataRange: { 430 //orient: 'horizontal', 431 //itemWidth:'.5',宽度 432 itemHeight: 8, 433 min: 0, 434 max: 50, 435 //color:['orange','yellow'], 436 text: ['高危', '安全'], // 文本，默认为数值文本 437 calculable: true, 438 x: 'left', 439 y: '65%', 440 color: ['#DC3106', '#E25F07', '#B1DA4D', '#09CF0A'], 441 textStyle: { 442 color: '#48B1CE' // 值域文字颜色 443 } 444 445 //splitList: [ 446 // {start: 1000}, 447 // {start: 800, end: 1000}, 448 // {start: 600, end: 800}, 449 // {start: 400, end:600}, 450 // {start: 0, end:400} 451 //] 452 453 }, 454 series: [ 455 { 456 name: '中国', 457 type: 'map', 458 mapType: 'china', 459 selectedMode: 'multiple', 460 itemStyle: { 461 show: true, 462 normal: {label: {show: true}}, 463 emphasis: { 464 label: {show: true} 465 } 466 }, 467 data: areadata 468 //data:[{name:'山东',value:12}] 469 } 470 ] 471 }; 472 473 myChart.setOption(option); 474 //地图自适应 475 $(window).resize(function(){ 476 myChart.resize(); 477 }); 478 479 480 myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param) { 481 regionType = 1; 482 var provinceregionType = 1; 483 var provinceregionId; 484 var selected = param.selected; 485 var provincename = param.target;//获取各省名字 486 for (var pname in provinceMap) { 487 if (pname == provincename) { 488 provinceregionId = provinceMap[pname];//获取对应省的id 489 regionId = provinceregionId; 490 } 491 } 492 if (provincename == '北京') { 493 except1(); 494 495 496 } else if (provincename == '天津') { 497 except1(); 498 } 499 else if (provincename == '重庆') { 500 except1(); 501 } 502 else if (provincename == '上海') { 503 except1(); 504 } 505 else { 506 except(); 507 } 508 function except1() { 509 510 //请求各省里面的市的数据 511 var mapdata = "regionType=" + provinceregionType + "®ionId=" + provinceregionId; 512 $.ajax({//安装位置属性部分 513 type: "get", 514 //url: "exp2.txt", 515 async: true, 516 url: "/stat/led/region", 517 data: mapdata, 518 success: function (data) { 519 if (data.status == "0") { 520 var citydata = []; 521 if (data.data) { 522 var totalCntMap = data.data["totalCntMap"]; 523 $.each(totalCntMap, function (v, p) {//解析成对象模式省市部分 524 citydata.push({"name": v, "value": p}); 525 }); 526 } 527 function provincemap() { 528 var myChart = ec.init(document.getElementById('mainprovince')); 529 option = { 530 dataRange: { 531 //orient: 'horizontal', 532 //itemWidth:'.5',宽度 533 itemHeight: 8, 534 min: 0, 535 max: 50, 536 //color:['orange','yellow'], 537 text: ['高危', '安全'], // 文本，默认为数值文本 538 calculable: true, 539 x: 'left', 540 y: '65%', 541 color: ['#DC3106', '#E25F07', '#B1DA4D', '#09CF0A'], 542 textStyle: { 543 color: '#48B1CE' // 值域文字颜色 544 } 545 546 //splitList: [ 547 // {start: 1000}, 548 // {start: 800, end: 1000}, 549 // {start: 600, end: 800}, 550 // {start: 400, end:600}, 551 // {start: 0, end:400} 552 //] 553 554 }, 555 tooltip: { 556 show: false, 557 trigger: 'item', 558 formatter: '{a} <br/>{b}: {c}' 559 }, 560 series: [ 561 { 562 name: '中国', 563 type: 'map', 564 mapType: provincename, 565 selectedMode: 'multiple', 566 itemStyle: { 567 normal: {label: {show: true}}, 568 emphasis: {label: {show: true}} 569 }, 570 data: citydata 571 572 } 573 ] 574 }; 575 myChart.setOption(option); 576 //地图自适应 577 $(window).resize(function(){ 578 myChart.resize(); 579 }); 580 myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param) { 581 regionType = 0; 582 regionId = 0; 583 $("#mainsuffix").removeClass("show"); 584 $("#mainprovince").removeClass("show"); 585 $("#main").removeClass("none"); 586 $(".primaryselect").addClass("selected").removeClass("unselected").siblings('.selected').removeClass("selected").addClass("unselected"); 587 chinamap(); 588 mapPiedata(); 589 bottomrightdata(); 590 bottomleftdata(); 591 toprighttopdata(); 592 toprightbottomdata(); 593 boarddata(); 594 595 }) 596 597 598 } 599 600 provincemap(); 601 602 } else { 603 alert(data.message) 604 } 605 606 } 607 }); 608 609 $(".primaryselect").addClass("selected").removeClass("unselected").siblings('.selected').removeClass("selected").addClass("unselected"); 610 mapPiedata(); 611 bottomrightdata(); 612 bottomleftdata(); 613 toprighttopdata(); 614 toprightbottomdata(); 615 boarddata(); 616 $("#main").addClass("none"); 617 $("#mainprovince").addClass("show"); 618 } 619 620 function except() { 621 //请求各省里面的市的数据 622 var mapdata = "regionType=" + provinceregionType + "®ionId=" + provinceregionId; 623 $.ajax({//安装位置属性部分 624 type: "get", 625 //url: "exp2.txt", 626 async: true, 627 url: "/stat/led/region", 628 data: mapdata, 629 success: function (data) { 630 if (data.status == "0") { 631 var citydata = []; 632 if (data.data) { 633 var totalCntMap = data.data["totalCntMap"]; 634 $.each(totalCntMap, function (v, p) {//解析成对象模式省市部分 635 citydata.push({"name": v, "value": p}); 636 }); 637 } 638 function provincemap() { 639 var myChart = ec.init(document.getElementById('mainprovince')); 640 option = { 641 dataRange: { 642 //orient: 'horizontal', 643 //itemWidth:'.5',宽度 644 itemHeight: 8, 645 min: 0, 646 max: 50, 647 //color:['orange','yellow'], 648 text: ['高危', '安全'], // 文本，默认为数值文本 649 calculable: true, 650 x: 'left', 651 y: '65%', 652 color: ['#DC3106', '#E25F07', '#B1DA4D', '#09CF0A'], 653 textStyle: { 654 color: '#48B1CE' // 值域文字颜色 655 } 656 657 //splitList: [ 658 // {start: 1000}, 659 // {start: 800, end: 1000}, 660 // {start: 600, end: 800}, 661 // {start: 400, end:600}, 662 // {start: 0, end:400} 663 //] 664 665 }, 666 tooltip: { 667 show: false, 668 trigger: 'item', 669 formatter: '{a} <br/>{b}: {c}' 670 }, 671 series: [ 672 { 673 name: '中国', 674 type: 'map', 675 mapType: provincename, 676 selectedMode: 'multiple', 677 itemStyle: { 678 normal: {label: {show: true}}, 679 emphasis: {label: {show: true}} 680 }, 681 data: citydata 682 683 } 684 ] 685 }; 686 myChart.setOption(option); 687 //地图自适应 688 $(window).resize(function(){ 689 myChart.resize(); 690 }); 691 myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param) { 692 693 regionType = 2; 694 var cityregionType = 2; 695 var selected = param.selected; 696 var regionname = param.target;//获取各市名字 697 var geoJsonNamecounty; 698 for (var cityname in cityMap) { 699 if (cityname == regionname) { 700 geoJsonNamecounty = cityMap[cityname];//获取对应市的id 701 regionId = geoJsonNamecounty; 702 countymap(); 703 } 704 705 } 706 $(".primaryselect").addClass("selected").removeClass("unselected").siblings('.selected').removeClass("selected").addClass("unselected"); 707 mapPiedata(); 708 bottomrightdata(); 709 bottomleftdata(); 710 toprighttopdata(); 711 toprightbottomdata(); 712 boarddata(); 713 $("#mainprovince").removeClass("show"); 714 $("#main").addClass('none') 715 $("#mainsuffix").addClass("show").removeClass('hide'); 716 function countymap() { 717 var mapdata = "regionType=" + cityregionType + "®ionId=" + geoJsonNamecounty; 718 719 $.ajax({ 720 type: "get", 721 722 async: true, 723 url: "/stat/led/region", 724 data: mapdata, 725 success: function (data) { 726 727 if (data.status == "0") { 728 var countydata = []; 729 if (data.data) { 730 var totalCntMap = data.data["totalCntMap"]; 731 $.each(totalCntMap, function (v, p) {//解析成对象模式省市部分 732 733 //countydata.push({"name":v,"value":p}); 734 countydata.push({ 735 "name": v, 736 "value": p 737 }); 738 }); 739 } 740 citymap(); 741 function citymap() { 742 743 var myChart = ec.init(document.getElementById('mainsuffix')); 744 745 // 自定义扩展图表类型：mapType = HK 746 require('echarts/util/mapData/params').params.HK = { 747 getGeoJson: function (callback) { 748 749 $.getJSON('json文件远程保存地址', callback); 750 } 751 } 752 option = { 753 title: { 754 show: false, 755 text: '香港18区人口密度 （2011）', 756 subtext: '人口密度数据来自Wikipedia', 757 sublink: 'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12' 758 }, 759 tooltip: { 760 show: false, 761 trigger: 'item', 762 formatter: '{b}<br/>{c} (p / km2)' 763 }, 764 toolbox: { 765 show: false, 766 orient: 'vertical', 767 x: 'right', 768 y: 'center', 769 feature: { 770 mark: {show: true}, 771 dataView: { 772 show: true, 773 readOnly: false 774 }, 775 restore: {show: true}, 776 saveAsImage: {show: true} 777 } 778 }, 779 dataRange: { 780 //orient: 'horizontal', 781 //itemWidth:'.5',宽度 782 itemHeight: 8, 783 min: 0, 784 max: 50, 785 //color:['orange','yellow'], 786 text: ['高危', '安全'], // 文本，默认为数值文本 787 calculable: true, 788 x: 'left', 789 y: '65%', 790 color: ['#DC3106', '#E25F07', '#B1DA4D', '#09CF0A'], 791 textStyle: { 792 color: '#48B1CE' // 值域文字颜色 793 } 794 795 //splitList: [ 796 // {start: 1000}, 797 // {start: 800, end: 1000}, 798 // {start: 600, end: 800}, 799 // {start: 400, end:600}, 800 // {start: 0, end:400} 801 //] 802 803 }, 804 series: [ 805 { 806 name: '香港18区人口密度', 807 type: 'map', 808 mapType: 'HK', // 自定义扩展图表类型 809 itemStyle: { 810 normal: {label: {show: true}}, 811 emphasis: {label: {show: true}} 812 }, 813 data: countydata 814 } 815 ] 816 }; 817 818 myChart.setOption(option); 819 myChart.on('click', function (params) { 820 //返回首页部分 821 $("#mainsuffix").removeClass("show").addClass("hide"); 822 $("#main").removeClass("none"); 823 $(".primaryselect").addClass("selected").removeClass("unselected").siblings('.selected').removeClass("selected").addClass("unselected"); 824 regionId = 0; 825 regionType = 0; 826 chinamap(); 827 mapPiedata(); 828 bottomrightdata(); 829 bottomleftdata(); 830 toprighttopdata(); 831 toprightbottomdata(); 832 boarddata(); 833 834 }); 835 } 836 } else { 837 alert(data.message) 838 } 839 840 } 841 }); 842 } 843 844 845 }) 846 847 848 } 849 850 provincemap(); 851 852 } else { 853 alert(data.message) 854 } 855 856 } 857 }); 858 859 $(".primaryselect").addClass("selected").removeClass("unselected").siblings('.selected').removeClass("selected").addClass("unselected"); 860 mapPiedata(); 861 bottomrightdata(); 862 bottomleftdata(); 863 toprighttopdata(); 864 toprightbottomdata(); 865 boarddata(); 866 $("#main").addClass("none"); 867 $("#mainprovince").addClass("show"); 868 } 869 870 871 }) 872 } 873 874 chinamap(); 875 876 877 //function others(){ 878 879 880 var mappieinside = [];//内圈数据 881 var mappieoutside = [];//外圈数据 882 883 //中国地图右侧饼状图部分 884 function mapPiedata() { 885 mappieinside = []; 886 mappieoutside = []; 887 var mapdata = "regionType=" + regionType + "®ionId=" + regionId; 888 $.ajax({ 889 type: "get", 890 891 url: "/stat/led/region", 892 data: mapdata, 893 success: function (data) { 894 if (data.status == "0") { 895 if (data.data) { 896 var faultCntMap = data.data["faultCntMap"];//内圈 897 var alarmCntMap = data.data["alarmCntMap"];//外圈 898 $.each(faultCntMap, function (v, p) {//解析成对象模式省市部分 899 mappieinside.push({"name": v, "value": p}); 900 }); 901 $.each(alarmCntMap, function (v, p) {//解析成对象模式省市部分 902 mappieoutside.push({"name": v, "value": p}); 903 }); 904 mapPie(); 905 } else { 906 $("#map-piechild").html("此区域暂无数据……") 907 $("#map-pie").html("此区域暂无数据……") 908 } 909 } else { 910 alert(data.message) 911 } 912 913 } 914 }) 915 } 916 917 mapPiedata(); 918 //以下地图-饼状图数据部分 topleft 919 function mapPie() { 920 var myChart5 = ec.init(document.getElementById('map-pie')); 921 var myChart55 = ec.init(document.getElementById('map-piechild')); 922 option5 = { 923 tooltip: { 924 show: false, 925 trigger: 'item', 926 formatter: "{a} <br/>{b}: {c} ({d}%)" 927 }, 928 legend: { 929 show: false, 930 orient: 'vertical', 931 x: 'left', 932 data: ['海淀', '朝阳', '西城', '东城', '昌平', '密云', '怀柔', '顺义', '大兴', '通州'] 933 }, 934 series: [ 935 { 936 name: '访问来源', 937 type: 'pie', 938 selectedMode: 'single', 939 radius: [0, '20%'], 940 941 label: { 942 normal: { 943 position: 'inner' 944 } 945 }, 946 labelLine: { 947 normal: { 948 show: false 949 } 950 }, 951 //data:[ 952 // {value:335, name:'大兴', selected:true}, 953 // {value:679, name:'通州'}, 954 //] 955 data: mappieinside 956 }, 957 { 958 name: '访问来源', 959 type: 'pie', 960 radius: ['40%', '55%'], 961 962 //data:[ 963 // {value:310, name:'朝阳'}, 964 // {value:234, name:'西城'}, 965 // {value:135, name:'东城'}, 966 // {value:102, name:'其他'} 967 //] 968 data: mappieoutside 969 } 970 ] 971 }; 972 myChart5.setOption(option5); 973 myChart55.setOption(option5); 974 } 975 976 mapPie(); 977 978 //以下为历史信息地区企业本月上月部分数据索取 bottomright 979 $('.historylegend').click(function () { 980 $(this).addClass("selected").removeClass("unselected"); 981 $(this).siblings('.selected').removeClass("selected").addClass("unselected"); 982 if ($(this).html() == "地区") { 983 statType = 1; 984 bottomrightdata(); 985 986 } else { 987 statType = 2; 988 bottomrightdata(); 989 } 990 }); 991 var statType = 1;//地区或企业 992 var currentmonthydata = []; 993 var lastmonthydata = []; 994 var xdata = []; 995 996 function bottomrightdata() { 997 998 currentmonthydata = []; 999 lastmonthydata = []; 1000 xdata = []; 1001 var bottomrightdata = "regionType=" + regionType + "®ionId=" + regionId + "&statType=" + statType; 1002 $.ajax({ 1003 type: "get", 1004 1005 url: "/stat/led/relate-ratio", 1006 data: bottomrightdata, 1007 success: function (data) { 1008 if (data.status == "0") { 1009 if (data.data) { 1010 var currentmonth = data.data["本月"];//本月 1011 var lastmonth = data.data["上月"];//上月 1012 $.each(currentmonth, function (i, v) {//获取本月数据 1013 xdata.push(v.X); 1014 currentmonthydata.push(v.Y); 1015 }); 1016 $.each(lastmonth, function (i, v) {//获取上月数据 1017 lastmonthydata.push(v.Y); 1018 }); 1019 bottomright(); 1020 } else { 1021 $("#rhistory").html("此区域暂无数据……"); 1022 $("#rhistorychild").html("此区域暂无数据……") 1023 } 1024 } else { 1025 alert(data.message) 1026 } 1027 1028 } 1029 }) 1030 } 1031 1032 bottomrightdata(); 1033 //以下为历史信息地区企业本月上月部分 bottomright 1034 function bottomright() { 1035 var myChart1 = ec.init(document.getElementById('rhistory')); 1036 var myChart11 = ec.init(document.getElementById('rhistorychild')); 1037 1038 option1 = { 1039 title: { 1040 show: true, 1041 text: '历史问题统计数据图表', 1042 subtext: 'HISTORY STATISTICAL DATA CHART', 1043 x: "center", 1044 backgroundColor: '#4CB9D6', 1045 textStyle: { 1046 fontWeight: 'bold', 1047 color: '#081E57' 1048 }, 1049 subtextStyle: { 1050 fontWeight: 'normal', 1051 color: '#081E57' 1052 } 1053 }, 1054 tooltip: { 1055 show: true, 1056 trigger: 'axis', 1057 axisPointer: { // 坐标轴指示器，坐标轴触发有效 1058 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' 1059 } 1060 }, 1061 legend: { 1062 //data:['直接访问','邮件营销'] 1063 data: [ 1064 //{name: '上月', textStyle:{color:"#5DA290"}}, 1065 //{name:'本月', textStyle:{color:"#51AEFE"}} 1066 {name: '上月', textStyle: {color: "#36B6D3"}}, 1067 {name: '本月', textStyle: {color: "#E05B5A"}} 1068 ], 1069 selected: { 1070 '企业': false 1071 }, 1072 y: "22%", 1073 x: "left" 1074 }, 1075 grid: { 1076 //left: '-3%', 1077 //top: '-50%', 1078 //right: '4%', 1079 //bottom: '3%', 1080 containLabel: true, 1081 width: "85%", 1082 height: "55%", 1083 x: "10%", 1084 y: "30%", 1085 borderWidth: '0px' 1086 1087 }, 1088 xAxis: [ 1089 { 1090 type: 'category', 1091 data: xdata, 1092 //data : ['朝阳区','大兴区','海淀区','东城区','丰台区','昌平区','西城区'], 1093 axisLabel: { 1094 show: true, 1095 textStyle: { 1096 color: '#9EA2AB' 1097 } 1098 }, 1099 axisLine: { 1100 lineStyle: { 1101 color: 'transparent', 1102 width: 0//这里是为了突出显示加上的，可以去掉 1103 } 1104 }, 1105 splitLine: {show: false} 1106 } 1107 ], 1108 yAxis: [ 1109 { 1110 type: 'value', 1111 axisLabel: { 1112 formatter: '{value} ', 1113 textStyle: { 1114 color: '#9EA2AB' 1115 } 1116 }, 1117 axisLine: { 1118 lineStyle: { 1119 color: 'transparent', 1120 width: 0//这里是为了突出显示加上的，可以去掉 1121 } 1122 } 1123 } 1124 ], 1125 series: [ 1126 //{ 1127 // name:'上月', 1128 // type:'bar', 1129 // data:[320, 332, 301, 334, 390, 330, 320] 1130 //}, 1131 { 1132 name: '上月', 1133 type: 'bar', 1134 //stack:"地区上月", 1135 data: lastmonthydata, 1136 //data:[120, 132, 101, 134, 90, 230, 210], 1137 itemStyle: {normal: {color: '#5DA290'}} 1138 }, 1139 { 1140 name: '本月', 1141 type: 'bar', 1142 //stack:"地区上月", 1143 data: currentmonthydata, 1144 //data:[120, 132, 101, 134, 90, 230, 210], 1145 itemStyle: {normal: {color: '#A54C86'}} 1146 } 1147 ] 1148 }; 1149 //option1.legend.selected['企业'] = false; 1150 myChart1.setOption(option1); 1151 myChart11.setOption(option1); 1152 } 1153 1154 bottomright(); 1155 1156 1157 //以下为曲线图历史统计按年按月按日数据索取 bottomleft 1158 $('.curvedata>span').click(function () { 1159 $(this).addClass("selected").removeClass("unselected"); 1160 $(this).siblings('.selected').removeClass("selected").addClass("unselected"); 1161 if ($(this).html() == "按日统计") { 1162 timeType = 1; 1163 bottomleftdata(); 1164 1165 } else if ($(this).html() == "按周统计") { 1166 timeType = 2; 1167 bottomleftdata(); 1168 } else if ($(this).html() == "按月统计") { 1169 timeType = 3; 1170 bottomleftdata(); 1171 } else { 1172 timeType = 4; 1173 bottomleftdata(); 1174 } 1175 }); 1176 var timeType = 1;//日或年或月或周 1177 var statlengend = [];//legend数据 1178 var staty = []; 1179 var statxdata = [];//x轴数据 1180 function bottomleftdata() { 1181 var statx = []; 1182 currentmonthydata = []; 1183 lastmonthydata = []; 1184 statxdata = []; 1185 staty = []; 1186 statlengend = []; 1187 var bottomrightdata = "regionType=" + regionType + "®ionId=" + regionId + "&timeType=" + timeType; 1188 $.ajax({ 1189 type: "get", 1190 1191 url: "/stat/led/curve", 1192 data: bottomrightdata, 1193 success: function (data) { 1194 if (data.status == "0") { 1195 if (data.data) { 1196 $.each(data.data, function (i, v) {//获取本月数据 1197 statlengend.push(i);//获取legend数据 1198 statx.push(v);//x轴数据获取第一部分 1199 var ydata = [];//x，y数据获取第一部分 1200 $.each(v, function (a, b) { 1201 ydata.push(b['Y']) 1202 }); 1203 staty.push({"name": i, 'type': 'line', "data": ydata});//获取x,y数据部分 1204 }); 1205 $.each(statx[0], function (p, q) {//x轴数据获取 1206 statxdata.push(q['X']) 1207 }); 1208 bottomleft(); 1209 } 1210 else { 1211 $("#rcurvedata").html("此区域暂无数据……") 1212 $("#rcurvedatachild").html("此区域暂无数据……") 1213 } 1214 } else { 1215 alert(data.message) 1216 } 1217 1218 } 1219 }) 1220 } 1221 1222 bottomleftdata(); 1223 //曲线图历史统计部分bottomleft 1224 function bottomleft() { 1225 var myChart2 = ec.init(document.getElementById('rcurvedata')); 1226 var myChart22 = ec.init(document.getElementById('rcurvedatachild')); 1227 1228 var option2 = { 1229 grid: { 1230 //left: '-3%', 1231 //top: '-50%', 1232 //right: '4%', 1233 //bottom: '3%', 1234 containLabel: true, 1235 width: "87.5%", 1236 height: "60%", 1237 x: "7.5%", 1238 y: "30%", 1239 borderWidth: '0px' 1240 1241 }, 1242 title: { 1243 show: true, 1244 text: '历史问题统计数据图表', 1245 subtext: 'HISTORY STATISTICAL DATA CHART', 1246 x: "center", 1247 backgroundColor: '#4CB9D6', 1248 textStyle: { 1249 //fontSize:16, 1250 fontWeight: 'bold', 1251 color: '#081E57' 1252 }, 1253 subtextStyle: { 1254 //fontSize:8, 1255 fontWeight: 'normal', 1256 color: '#081E57' 1257 } 1258 }, 1259 tooltip: { 1260 show: true, 1261 trigger: 'axis', 1262 formatter: "{a} <br/>{b} : {c} " 1263 }, 1264 legend: { 1265 //data:['朝阳区','昌平区','海淀区','西城区'], 1266 //data:[ 1267 // {name: '朝阳区', textStyle:{color:"#5DA290"}}, 1268 // {name:'昌平区', textStyle:{color:"#51AEFE"}} , 1269 // {name:'海淀区', textStyle:{color:"#FFB901"}} , 1270 // {name:'西城区', textStyle:{color:"#E195D5"}} 1271 // //{name:'按年统计', textStyle:{color:"#E195D5"}}, 1272 // //{name:'按月统计', textStyle:{color:"#E195D5"}}, 1273 // //{name:'按周统计', textStyle:{color:"#E195D5"}}, 1274 // //{name:'按日统计', textStyle:{color:"#E195D5"}} 1275 // 1276 //], 1277 data: statlengend, 1278 x: "left", 1279 y: "20%", 1280 textStyle: {color: "#4CB9D6"} 1281 }, 1282 toolbox: { 1283 show: false, 1284 feature: { 1285 mark: {show: true}, 1286 dataView: {show: true, readOnly: false}, 1287 magicType: {show: true, type: ['line', 'bar']}, 1288 restore: {show: true}, 1289 saveAsImage: {show: true} 1290 } 1291 }, 1292 calculable: true, 1293 xAxis: [ 1294 { 1295 type: 'category', 1296 boundaryGap: false, 1297 data: statxdata, 1298 //data : ['周一','周二','周三','周四','周五','周六','周日'], 1299 axisLabel: { 1300 show: true, 1301 textStyle: { 1302 color: '#9EA2AB' 1303 } 1304 }, 1305 axisLine: { 1306 lineStyle: { 1307 color: 'transparent', 1308 width: 0//这里是为了突出显示加上的，可以去掉 1309 } 1310 }, 1311 splitLine: { 1312 lineStyle: { 1313 color: ['#1E5977'], 1314 width: 1, 1315 type: 'solid' 1316 } 1317 } 1318 } 1319 ], 1320 yAxis: [ 1321 { 1322 type: 'value', 1323 axisLabel: { 1324 formatter: '{value} ', 1325 //formatter: '{value} °C', 1326 textStyle: { 1327 color: '#9EA2AB' 1328 } 1329 }, 1330 axisLine: { 1331 lineStyle: { 1332 color: 'transparent', 1333 width: 0//这里是为了突出显示加上的，可以去掉 1334 } 1335 }, 1336 splitLine: { 1337 lineStyle: { 1338 color: ['#1E5977'], 1339 width: 1, 1340 type: 'solid' 1341 } 1342 } 1343 1344 } 1345 ], 1346 //series : [ 1347 // { 1348 // name:'朝阳区', 1349 // type:'line', 1350 // data:[11, 11, 15, 13, 12, 13, 10] 1351 // //markPoint : { 1352 // // data : [ 1353 // // {type : 'max', name: '最大值'}, 1354 // // {type : 'min', name: '最小值'} 1355 // // ] 1356 // //}, 1357 // //markLine : { 1358 // // data : [ 1359 // // {type : 'average', name: '平均值'} 1360 // // ] 1361 // //} 1362 // }, 1363 // { 1364 // name:'昌平区', 1365 // type:'line', 1366 // data:[1, -2, 2, 5, 33, 2, 0] 1367 // }, 1368 // { 1369 // name:'海淀区', 1370 // type:'line', 1371 // data:[1, -2, 2, 54, 3, 22, 0] 1372 // }, 1373 // { 1374 // name:'西城区', 1375 // type:'line', 1376 // data:[21, -2, 23, 5, 3, 23, 0] 1377 // } 1378 //] 1379 series: staty 1380 }; 1381 1382 // 为echarts对象加载数据 1383 myChart2.setOption(option2); 1384 myChart22.setOption(option2); 1385 } 1386 1387 bottomleft(); 1388 1389 1390 //以下为横柱状图问题统计数据获取部分 topright-leftop 1391 var toprtxdata = []; 1392 var toprtydata = []; 1393 1394 function toprighttopdata() { 1395 1396 toprtxdata = []; 1397 toprtydata = []; 1398 var bottomrightdata = "regionType=" + regionType + "®ionId=" + regionId; 1399 $.ajax({ 1400 type: "get", 1401 //url: "exp6", 1402 url: "/stat/led/efficacy", 1403 data: bottomrightdata, 1404 success: function (data) { 1405 if (data.status == "0") { 1406 if (data.data) { 1407 var colorarr = ['#D0373A', '#F45A38', '#E5982E', '#13B9DF', '#0EC7C1', '#A54C86', '#589E19']; 1408 $.each(data.data['efficacyList'], function (i, v) {//获取本月数据 1409 toprtxdata.push(v['X']); 1410 //toprtydata.push(v['Y']); 1411 toprtydata.push({ 1412 'value': v['Y'], 1413 'itemStyle': { 1414 normal: { 1415 barBorderRadius: [4, 4, 4, 4], 1416 color: colorarr[i] 1417 } 1418 } 1419 }); 1420 }); 1421 toprighttop(); 1422 } else { 1423 $("#axbar").html("此区域暂无数据……"); 1424 $("#axbarchild").html("此区域暂无数据……") 1425 } 1426 } else { 1427 alert(data.message) 1428 } 1429 1430 } 1431 }) 1432 } 1433 1434 toprighttopdata(); 1435 //以下为横柱状图问题统计数据部分 topright-leftop 1436 function toprighttop() { 1437 var myChart3 = ec.init(document.getElementById('axbar')); 1438 var myChart33 = ec.init(document.getElementById('axbarchild')); 1439 option3 = { 1440 //color:['#D0373A', '#F45A38','#E5982E','#13B9DF','#0EC7C1','red','black'], //饼图颜色设置 1441 title: { 1442 text: '数据统计图表', 1443 backgroundColor: '#4CB9D6', 1444 textStyle: { 1445 fontWeight: 'bold', 1446 color: '#081E57' 1447 }, 1448 x: 'center' 1449 //subtext: '数据来自网络' 1450 }, 1451 tooltip: { 1452 show: true, 1453 trigger: 'item', 1454 formatter: "{a} <br/>{b} : {c} " 1455 }, 1456 //legend: { 1457 // data: ['2011年', '2012年'] 1458 //}, 1459 grid: { 1460 //left: '-3%', 1461 //top: '-50%', 1462 //right: '4%', 1463 //bottom: '3%', 1464 containLabel: true, 1465 width: "75%", 1466 height: "55%", 1467 x: "15%", 1468 y: "25%", 1469 borderWidth: '0px' 1470 1471 }, 1472 xAxis: { 1473 type: 'value', 1474 boundaryGap: [0, 0.01], 1475 splitLine: { 1476 show: false 1477 }, 1478 axisLabel: { 1479 show: true, 1480 textStyle: { 1481 color: '#9EA2AB' 1482 } 1483 } 1484 }, 1485 yAxis: { 1486 axisLine: { 1487 lineStyle: { 1488 color: 'transparent', 1489 width: 0//这里是为了突出显示加上的，可以去掉 1490 } 1491 }, 1492 splitLine: { 1493 show: false 1494 }, 1495 type: 'category', 1496 data: toprtxdata, 1497 //data: ['第一教学楼','化工实验楼','哲学楼'], 1498 axisLabel: { 1499 show: true, 1500 textStyle: { 1501 color: '#9EA2AB' 1502 //fontWeight:'bold' 1503 } 1504 } 1505 1506 }, 1507 series: [ 1508 //{ 1509 // name: '2011年', 1510 // type: 'bar', 1511 // data: [104970, 131744, 630230] 1512 //}, 1513 { 1514 //name: '2012年', 1515 type: 'bar', 1516 data: toprtydata 1517 //data: [ {value:121594,itemStyle:{normal:{color:'yellow'}}}, 1518 //] 1519 } 1520 ] 1521 }; 1522 1523 myChart3.setOption(option3); 1524 myChart33.setOption(option3); 1525 } 1526 1527 toprighttop(); 1528 1529 //以下为已处理问题展开部分统计数据后台获取部分 topright-lefbottom 1530 var toprbxdata = []; 1531 var toprbydata = []; 1532 var toprbpie = []; 1533 var toprbcircle = []; 1534 1535 function toprightbottomdata() { 1536 1537 toprbxdata = [];//横向柱状图x数据 1538 toprbydata = [];//横向柱状图y数据 1539 toprbpie = [];//饼状图数据索取 1540 toprbcircle = [];//环形图数据索取 1541 var bottomrightdata = "regionType=" + regionType + "®ionId=" + regionId; 1542 $.ajax({ 1543 type: "get", 1544 //url: "exp6", 1545 url: "/stat/led/deal-cnt", 1546 data: bottomrightdata, 1547 success: function (data) { 1548 if (data.status == "0") { 1549 if (data.data) { 1550 $.each(data.data['dealCntList'], function (i, v) {//获取本月数据 1551 toprbxdata.push(v['X']); 1552 toprbydata.push(v['Y']); 1553 toprbpie.push({"name": v['X'], "value": v['Y']});//饼状图数据索取 1554 }); 1555 toprightbottom(); 1556 } else { 1557 $("#pie-chart").html("此区域暂无数据……"); 1558 $("#pie-chartchild").html("此区域暂无数据……"); 1559 $("#dount-chart").html("此区域暂无数据……"); 1560 $("#dount-chartchild").html("此区域暂无数据……"); 1561 } 1562 } else { 1563 alert(data.message) 1564 } 1565 1566 } 1567 }) 1568 } 1569 1570 toprightbottomdata(); 1571 //以下为已处理问题展开部分统计数据部分 topright-lefbottom 1572 function toprightbottom() { 1573 var myChart41 = ec.init(document.getElementById('pie-chart')); 1574 var myChart41child = ec.init(document.getElementById('pie-chartchild')); 1575 option41 = { 1576 title: { 1577 text: '已处理问题统计数据图表', 1578 backgroundColor: '#4CB9D6', 1579 textStyle: { 1580 fontWeight: 'bold', 1581 color: '#081E57' 1582 }, 1583 x: 'right' 1584 //subtext: '数据来自网络' 1585 }, 1586 tooltip: { 1587 show: true, 1588 trigger: 'item', 1589 formatter: "{a} <br/>{b} : {c} ({d}%)" 1590 }, 1591 legend: { 1592 show: false, 1593 orient: 'vertical', 1594 left: 'left', 1595 data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] 1596 }, 1597 series: [ 1598 { 1599 name: '数据统计', 1600 type: 'pie', 1601 radius: '50%', 1602 center: ['50%', '52%'], 1603 data: toprbpie, 1604 //data:[ 1605 // {value:335, name:'海淀'}, 1606 // {value:310, name:'朝阳'}, 1607 // {value:234, name:'东城'}, 1608 // {value:135, name:'西城'}, 1609 // {value:1548, name:'昌平'} 1610 //], 1611 itemStyle: { 1612 emphasis: { 1613 shadowBlur: 10, 1614 shadowOffsetX: 0, 1615 shadowColor: 'rgba(0, 0, 0, 0.5)' 1616 } 1617 } 1618 } 1619 ] 1620 }; 1621 myChart41.setOption(option41); 1622 myChart41child.setOption(option41); 1623 var myChart42 = ec.init(document.getElementById('dount-chart')); 1624 var myChart42child = ec.init(document.getElementById('dount-chartchild')); 1625 1626 option42 = { 1627 color: ['#D0373A', '#F45A38', '#E5982E', '#13B9DF', '#0EC7C1', 'red', 'black'], //饼图颜色设置 1628 title: { 1629 show: false, 1630 text: '各区故障数量', 1631 //subtext: '纯属虚构', 1632 x: 'center' 1633 }, 1634 tooltip: { 1635 show: true, 1636 trigger: 'item', 1637 formatter: "{a} <br/>{b} : {c} ({d}%)" 1638 }, 1639 legend: { 1640 show: false, 1641 orient: 'vertical', 1642 left: 'right', 1643 data: ['海淀', '朝阳', '东城', '西城', '昌平'] 1644 }, 1645 series: [ 1646 { 1647 name: '数据统计', 1648 type: 'pie', 1649 radius: ['30%', '60%'], 1650 //radius : '55%', 1651 center: ['50%', '56%'], 1652 roseType: 'area', 1653 data: toprbpie, 1654 //data:[ 1655 // {value:335, name:'海淀'}, 1656 // {value:310, name:'朝阳'}, 1657 // {value:234, name:'东城'}, 1658 // {value:135, name:'西城'}, 1659 // {value:154, name:'昌平'} 1660 //], 1661 itemStyle: { 1662 //emphasis: { 1663 // shadowBlur: 10, 1664 // shadowOffsetX: 0, 1665 // shadowColor: 'rgba(0, 0, 0, 0.5)' 1666 //}, 1667 normal: { 1668 label: { 1669 show: false, 1670 formatter: '{b} : ({d}%)' 1671 //formatter: '{b} : {c} ({d}%)' 1672 }, 1673 labelLine: {show: false} 1674 } 1675 } 1676 } 1677 ] 1678 }; 1679 1680 1681 myChart42.setOption(option42); 1682 myChart42child.setOption(option42); 1683 } 1684 1685 toprightbottom(); 1686 //以下信息为右侧公告栏数据后台获取部分 1687 function boarddata() {//请求各省的数据 1688 var mapdata = "regionType=" + regionType + "®ionId=" + regionId; 1689 $.ajax({//安装位置属性部分 1690 type: "get", 1691 //url: "exp7.txt", 1692 url: "led/msg", 1693 data: mapdata, 1694 success: function (data) { 1695 var scrollTimer = null; 1696 var scrollTimer1 = null; 1697 if (data.status == "0") { 1698 if (!(data.data.msgList.length==0)) {//判断是否有返回数据部分 1699 //if (data.data) { 1700 var paragra = ""; 1701 var typetxtdata = 1; 1702 $.each(data.data.msgList, function (v, p) { 1703 if (p.type == 1) { 1704 typetxtdata = "报警"; 1705 } else if (p.type == 2) { 1706 typetxtdata = "故障"; 1707 } else if (p.type == 3) { 1708 typetxtdata = "公告"; 1709 } else { 1710 typetxtdata = "提示"; 1711 } 1712 //paragra += "<p class="boardcolor"" + p.type + ">【<span>" + typetxtdata + '</span>】<span>' + p.content + '</span><span> ' + p.createTime + '</span></p>'; 1713 paragra += "<li class="boardcolor"" + p.type + ">【<span>" + typetxtdata + '</span>】<span>' + p.content + '</span><span> ' + p.createTime + '</span></li>'; 1714 }); 1715 $('#id2').html("<ul class='scrolling'>" + paragra + "</ul>");//一级页面 1716 $('#id1').html("<ul class='scrolling1'>" + paragra + "</ul>");//二级页面 1717 //公告栏屏幕滚动 1718 if ($(".scrolling").children().length<=8) {//确定滚动条目 1719 window.clearInterval(scrollTimer) 1720 1721 1722 } 1723 if ($(".scrolling1").children().length <=20) {//确定滚动条目 1724 window.clearInterval(scrollTimer1) 1725 1726 } 1727 } 1728 else { 1729 $('#id2').html("此区域暂无数据……");//一级页面 1730 $('#id1').html("此区域暂无数据……");//二级页面 1731 1732 1733 } 1734 } else { 1735 alert(data.message) 1736 } 1737 1738 } 1739 }) 1740 } 1741 1742 boarddata(); 1743 1744 } else { 1745 alert(data.message) 1746 } 1747 1748 } 1749 }) 1750 1751 1752 } 1753 );
