zoukankan      html  css  js  c++  java
  • 使用ECharts来实现地图下钻功能(某省的市级下钻到县级)

     1 var cityMap = {  
     2     "长沙市": "430100",  
     3     "株洲市": "430200",  
     4     "湘潭市": "430300",  
     5     "衡阳市": "430400",  
     6     "邵阳市": "430500",  
     7     "岳阳市": "430600",  
     8     "常德市": "430700",  
     9     "张家界市": "430800",  
    10     "益阳市": "430900",  
    11     "郴州市": "431000",  
    12     "永州市": "431100",  
    13     "怀化市": "431200",  
    14     "娄底市": "431300",  
    15     "湘西土家族苗族自治州": "433100"  
    16     
    17 };  
    18 var curIndx = 0;  
    19 var mapType = [];  
    20 var mapGeoData = require('echarts/util/mapData/params');  
    21 for (var city in cityMap) {  
    22     mapType.push(city);  
    23     // 自定义扩展图表类型  
    24     mapGeoData.params[city] = {  
    25         getGeoJson: (function (c) {  
    26             var geoJsonName = cityMap[c];  
    27             return function (callback) {  
    28                 $.getJSON('geoJson/china-main-city/' + geoJsonName + '.json', callback);  
    29             }  
    30         })(city)  
    31     }  
    32 }  
    33   
    34 var ecConfig = require('echarts/config');  
    35 var zrEvent = require('zrender/tool/event');  
    36 document.getElementById('main').onmousewheel = function (e){  
    37     var event = e || window.event;  
    38     curIndx += zrEvent.getDelta(event) > 0 ? (-1) : 1;  
    39     if (curIndx < 0) {  
    40         curIndx = mapType.length - 1;  
    41     }  
    42     var mt = mapType[curIndx % mapType.length];  
    43     option.series[0].mapType = mt;  
    44     option.title.subtext = mt + ' (滚轮或点击切换)';  
    45     myChart.setOption(option, true);  
    46     zrEvent.stop(event);  
    47 };  
    48 myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){  
    49     var mt = param.target;  
    50     var len = mapType.length;  
    51     var f= false;  
    52     for(var i=0;i<len;i++){  
    53         if(mt == mapType[i]){  
    54               f =true;  
    55               mt=mapType[i];  
    56         }  
    57      }  
    58   if(!f){  
    59     mt='湖南';  
    60   }  
    61     option.series[0].mapType = mt;  
    62       
    63     option.title.subtext = mt + ' (滚轮或点击切换)';  
    64     myChart.setOption(option, true);  
    65 });  
    66 option = {  
    67     title: {  
    68         text : '全国344个主要城市(县)地图 by Pactera 陈然',  
    69         link : 'http://www.pactera.com/',  
    70         subtext : '长沙市 (滚轮或点击切换)'  
    71     },  
    72     tooltip : {  
    73         trigger: 'item',  
    74         formatter: '滚轮或点击切换<br/>{b}'  
    75     },  
    76     series : [  
    77         {  
    78             name: '全国344个主要城市(县)地图',  
    79             type: 'map',  
    80             mapType: '湖南',  
    81             selectedMode : 'single',  
    82             itemStyle:{  
    83                 normal:{label:{show:true}},  
    84                 emphasis:{label:{show:true}}  
    85             },  
    86             data:[]  
    87         }  
    88     ]  
    89 };  
    1. 将上面部分代码复制,然后粘贴覆盖到http://echarts.baidu.com/doc/example/mix5.html左侧的黑色区域中,然后点击刷新,即可看到效果。  

             2.其中var mapGeoData = require('echarts/util/mapData/params');我的理解是找到param.js这个文件,然后执行循环将city对应的县级数据加载到param.js文件中 

    每天学习一点点 编程PDF电子书、视频教程免费下载:
    http://www.shitanlife.com/code

  • 相关阅读:
    host文件的用处
    探究 Flex 组件的生命周期
    QQ在开发中的应用
    转:linux进程间通信的几种机制的比较及适用场合
    转:Linux 2.4.x内核软中断机制
    转:PLL 锁相环
    转:LPC2214的PLL与定时器设置
    转: V4L2驱动程序架构
    转:linux select 多路复用机制
    [转] Linux 句柄是什么 ?
  • 原文地址:https://www.cnblogs.com/scode2/p/8966305.html
Copyright © 2011-2022 走看看