因为要用到区域点击触发事件下转到省，就用的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}
{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);
}
);
}