javascript - echart3 省市下钻 如何实现
天蓬老师
天蓬老师 2017-04-11 11:31:47
0
0
274

比如:我现在已经知晓四川省21州市的id

var curIndx = 0;
var mapType = [];
var mapGeoData = require('echarts/util/mapData/params');
for (var city in cityMap) {
    mapType.push(city);
    // 自定义扩展图表类型
    mapGeoData.params[city] = {
        getGeoJson: (function (c) {
            var geoJsonName = cityMap[c];
            return function (callback) {
                $.getJSON('geoJson/china-main-city/' + geoJsonName + '.json', callback);
            }
        })(city)
    }
}

var ecConfig = require('echarts/config');
var zrEvent = require('zrender/tool/event');
document.getElementById('main').onmousewheel = function (e){
    var event = e || window.event;
    curIndx += zrEvent.getDelta(event) > 0 ? (-1) : 1;
    if (curIndx < 0) {
        curIndx = mapType.length - 1;
    }
    var mt = mapType[curIndx % mapType.length];
    option.series[0].mapType = mt;
    option.title.subtext = mt + ' (滚轮或点击切换)';
    myChart.setOption(option, true);
    zrEvent.stop(event);
};
myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){
    var mt = param.target;
    var len = mapType.length;
    var f= false;
    for(var i=0;i<len;i++){
        if(mt == mapType[i]){
              f =true;
              mt=mapType[i];
        }
     }
  if(!f){
      mt='四川';
  }
    option.series[0].mapType = mt;
    
    option.title.subtext = mt + ' (滚轮或点击切换)';
    myChart.setOption(option, true);
});
option = {
    title: {
        text : '四川21个州市主要城市(县)地图',
        link : 'http://www.pactera.com/',
        subtext : '成都市 (滚轮或点击切换)'
    },
    tooltip : {
        trigger: 'item',
        formatter: '滚轮或点击切换<br/>{b}'
    },
    series : [
        {
            name: '全国344个主要城市(县)地图',
            type: 'map',
            mapType: '四川',
            selectedMode : 'single',
            itemStyle:{
                normal:{label:{show:true}},
                emphasis:{label:{show:true}}
            },
            data:[]
        }
    ]
};

天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

全部回覆(0)
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!