echarts地图扩展中国七大区，下转到区域下的各个省

因为要用到区域点击触发事件下转到省，就用的echarts模块化单文件引入

注意“params.东北地区”,为了在地图中正常显示地区名称，这里用的中文。试过用nameMap映射，地图就显示不出来

了。感觉用中文貌似不怎么好，如果有更好的办法，不用中文，请告知本人，将不甚感激。

// 路径配置

require.config({

   paths: {

       echarts: 'js/echarts/build/dist'

   }

}); 

  $(function(){areaMap("main")});        

  function areaMap(divId){

  require(

  ['echarts','echarts/chart/map'],

  function (ec) {

//加载中国地图（分区域）           

  require('echarts/util/mapData/params').params.area = {

  getGeoJson: function (callback) {

  $.getJSON('js/echarts/geoJson/area.geo.json',callback);

  }

  };

  require('echarts/util/mapData/params').params.东北地区 = {

  getGeoJson: function (callback) {

  $.getJSON('js/echarts/geoJson/db.geo.json',callback);

  }

  };

  require('echarts/util/mapData/params').params.华北地区 = {

  getGeoJson: function (callback) {

  $.getJSON('js/echarts/geoJson/hb.geo.json',callback);

  }

  };

  require('echarts/util/mapData/params').params.华东地区 = {

  getGeoJson: function (callback) {

  $.getJSON('js/echarts/geoJson/hd.geo.json',callback);

  }

  };

  require('echarts/util/mapData/params').params.华南地区 = {

  getGeoJson: function (callback) {

  $.getJSON('js/echarts/geoJson/hn.geo.json',callback);

  }

  };

  require('echarts/util/mapData/params').params.华中地区 = {

  getGeoJson: function (callback) {

  $.getJSON('js/echarts/geoJson/hz.geo.json',callback);

  }

  };

  require('echarts/util/mapData/params').params.西北地区 = {

  getGeoJson: function (callback) {

  $.getJSON('js/echarts/geoJson/xb.geo.json',callback);

  }

  };

  require('echarts/util/mapData/params').params.西南地区 = {

  getGeoJson: function (callback) {

  $.getJSON('js/echarts/geoJson/xn.geo.json',callback);

  }

  };

  var myChart = ec.init(document.getElementById(divId));

  var ecConfig = require('echarts/config');

  var curIndx = 0;

  var mapType = ['area','东北地区','华北地区','华东地区','华南地区','华中地区','西南地区','西北地区'];

//区域和省相互切换点击事件

  myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){

  var len = mapType.length;

  var mt = mapType[curIndx % len];

  if (mt == 'area') {

  var selected = param.selected;

  for (var i in selected) {

  if (selected[i]) {

  mt = i;

  while (len--) {

  if (mapType[len] == mt) {

  curIndx = len;

  }

  }

  break;

  }

  }

  }else {

  curIndx = 0;

  mt = 'area';

  }

  option.series[0].mapType = mt;

  option.title.subtext = mt;

  myChart.setOption(option, true);

  });

 

  var option = {

             title: {

                 text : '全国34个省市自治区',

                 subtext : 'china'

             },

             tooltip : {

                 trigger: 'item',

                 formatter: '{a} <br/>{b} : {c}%'

             },

             legend: {

                 orient: 'vertical',

                 x:'right',

                 data:['集客达成率']

             },

            dataRange: {

                show: false,

                 min: 0,

                 max: 100,

                 x: 'left',

                 y: 'bottom',

                 text:['高','低'],           // 文本，默认为数值文本

                 calculable : true

             },

             series : [

                 {

                     name: '集客达成率',

                     type: 'map',

                     mapType: 'area',

                     selectedMode : 'single',

                     itemStyle:{

                         normal:{label:{show:true}},

                         emphasis:{label:{show:true}},

                     },

                     data:[ 

                          {name: '东北地区',value: Math.round(Math.random()*100)},

                          {name: '华北地区',value: Math.round(Math.random()*100)},

                          {name: '华东地区',value: Math.round(Math.random()*100)},

                          {name: '华南地区',value: Math.round(Math.random()*100)},

                          {name: '华中地区',value: Math.round(Math.random()*100)},

                          {name: '西北地区',value: Math.round(Math.random()*100)},

                          {name: '西南地区',value: Math.round(Math.random()*100)},]

                 }

             ]

          };

 

  myChart.setOption(option,true);

 

  }

  );

  }

转载于:https://my.oschina.net/u/2007534/blog/425832