echarts地图 json数据 和 后套动态数据加载

 $(function () {
    
              zbw();

          });
var contentzbw= "../../static/assets/js/map/"
    
function zbw() {
              var myChart = echarts.init(document.getElementById("henanmap"));
              
              echarts.util.mapData.params.params.河南 = {
                  getGeoJson: function (callback) {
                      $.getJSON('../../static/assets/js/map/mapJson/hn.json', function (data) {
                          // 压缩后的地图数据必须使用 decode 函数转换
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };


              var cityindx='河南';
              var curIndx = 0;
              var mapType = [
            '河南',
              // 18市
    '安阳市', '鹤壁市', '濮阳市', '新乡市', '焦作市',
    '三门峡市', '洛阳市', '郑州市', '开封市', '许昌市',
    '平顶山市', '漯河市', '周口市', '南阳市', '驻马店市',
    '信阳市', '商丘市', '济源市',
    '项城市','二七区','新郑市','新密市',
    '登封市','巩义市','上街区','荥阳市',
    '惠济区','金水区','中原区','管城回族区'
    ,'中牟县'
    
   ];

              echarts.util.mapData.params.params.郑州市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'zzs' + '.json', function (data) {
                          // 压缩后的地图数据必须使用 decode 函数转换
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.安阳市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'ays' + '.json', function (data) {
                          // 压缩后的地图数据必须使用 decode 函数转换
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.鹤壁市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'hbs' + '.json', function (data) {
                          // 压缩后的地图数据必须使用 decode 函数转换
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.濮阳市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'pys' + '.json', function (data) {
                          // 压缩后的地图数据必须使用 decode 函数转换
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.新乡市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'xxs' + '.json', function (data) {
                          // 压缩后的地图数据必须使用 decode 函数转换
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.焦作市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'jzs' + '.json', function (data) {
                          // 压缩后的地图数据必须使用 decode 函数转换
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.三门峡市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'smss' + '.json', function (data) {
                          // 压缩后的地图数据必须使用 decode 函数转换
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.洛阳市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'lys' + '.json', function (data) {
                          // 压缩后的地图数据必须使用 decode 函数转换
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.开封市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'kfs' + '.json', function (data) {
                          // 压缩后的地图数据必须使用 decode 函数转换
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.许昌市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'xcs' + '.json', function (data) {
                          // 压缩后的地图数据必须使用 decode 函数转换
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.平顶山市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'pdss' + '.json', function (data) {
                          // 压缩后的地图数据必须使用 decode 函数转换
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.漯河市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'lhs' + '.json', function (data) {
                          // 压缩后的地图数据必须使用 decode 函数转换
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.周口市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'zks' + '.json', function (data) {
                          // 压缩后的地图数据必须使用 decode 函数转换
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.南阳市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'nys' + '.json', function (data) {
                          // 压缩后的地图数据必须使用 decode 函数转换
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.驻马店市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'zmds' + '.json', function (data) {
                          // 压缩后的地图数据必须使用 decode 函数转换
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.信阳市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'xys' + '.json', function (data) {
                          // 压缩后的地图数据必须使用 decode 函数转换
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.商丘市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'sqs' + '.json', function (data) {
                          // 压缩后的地图数据必须使用 decode 函数转换
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.济源市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'jys' + '.json', function (data) {
                          // 压缩后的地图数据必须使用 decode 函数转换
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              
              var datas=[];
              // 同步执行  
              $.ajaxSettings.async = false;
              // 加载数据  
              $.getJSON('../../datas/gethomemap', function (json) {  
                  datas = json.datas;
                  datas1=json.datas1;
                  datas2=json.datas2;
                  
              });  
              
              
              
              
              
              var option = {
                  title: {
                      x: 'center',
                      text: '全省18个市',
                      subtext: '河南'
                  },
                  tooltip: {
                      trigger: 'item',
                      show : true,
                      showDelay:500,
                      formatter: '{b}<br/>{a}:{c}'
                  },
                  
                  legend: {
                      orient: 'vertical',
                      x: 'left',
                      data: ['微博数据量','关注人数','信息量息量']
                  },
                  dataRange: {
                      min: 0,
                      max: 1000,
                      color: ['#1e90ff', '#f0ffff'],
                      text: ['高', '低'],           // 文本,默认为数值文本
                      calculable: true
                  },
                  toolbox: {
                      show: true,
                      orient : 'vertical',
                      x: 'right',
                      y: 'center',
                      feature : {
                          mark : {show: true},
                          dataView : {show: true, readOnly: false},
                          restore : {show: true},
                          saveAsImage : {show: true}
                      }
                  },
                  roamController: {
                      show: true,
                      x: 'right',
                      mapTypeControl: {
                          '河南': true,
                          '郑州市':true
                      }
                  },
                  series: [
        {
            name: '微博数据量',
            type: 'map',
            mapType: '河南',
            selectedMode: 'single',
            
            roam: false,
            itemStyle: {
                normal: { label: { show: true} },
                emphasis: { label: { show: true} }
            },
            data: datas
        },
        {
            name: '关注人数',
            type: 'map',
            mapType: '河南',
           
            itemStyle: {
                normal: { label: { show: true} },
                emphasis: { label: { show: true} }
            },
            data: datas1
        },
        {
            name: '信息量息量',
            type: 'map',
            mapType: '河南',
            
            itemStyle: {
                normal: { label: { show: true} },
                emphasis: { label: { show: true} }
            },
            data:datas2
        }
        
    ]
              };
              myChart.setOption(option);
              var len = mapType.length;
              var mt = mapType[curIndx % len];
              myChart.on(echarts.config.EVENT.MAP_SELECTED, function (param) {
                  len = mapType.length;
                  
                  if (mt == '河南') {
                      // 河南选择指定的市区
                      var selected = param.selected;
                      for (var i in selected) {
                          if (selected[i]) {
                              mt = i;
                              while (len--) {
                                  if (mapType[len] == mt) {
                                      curIndx = len;
                                  }
                              }
                              break;
                          }
                      }
                      
                      if (mt == '济源市') {
                        mt='河南|济源市'
                      }
                      cityindx=mt;
                      
                      
                      option.series[0].mapType = mt;
                      option.series[1].mapType = mt;
                        option.series[2].mapType = mt;
                      option.title.subtext = mt;
                      myChart.setOption(option, true);
                      
                  }
                  else {
                      //选择市内的区  
                      
                      var selected = param.selected;
                      for (var i in selected) {
                          if (selected[i]) {
                              mt = i;
                              break;
                          }
                      }
                      
                      if(cityindx==mt){
                          mt='河南'
                          curIndx = 0
                          option.series[0].mapType = mt;
                          option.series[1].mapType = mt;
                          option.series[2].mapType = mt;
                          option.title.subtext = mt;
                          myChart.setOption(option, true);
                      }
                      
                      cityindx=mt;
                  }
                  
              });
              
          }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值