最近使用Echarts地图实现世界地图及中国34省地图间切换 (版本为echarts2,echarts3目前无法下载地图版)。
问题描述：之前使用require形式加载，地图首次加载显示要6-7秒，难以接受。
js配置代码如下：
<div class="w_b50 fl bg_x" id="main">
<script type="text/javascript" src="<%=request.getContextPath()%>/js/dist/echarts.js"></script>
<script type="text/javascript">
$(function(){
initMap();
});
$(window).resize(function(){
initMap();
});
function initMap(){
var namemapping={
'Afghanistan':'阿富汗', 'Angola':'安哥拉', 'Albania':'阿尔巴尼亚', 'United Arab Emirates':'阿联酋', 'Argentina':'阿根廷', 'Armenia':'亚美尼亚', 'French Southern and Antarctic Lands':'法属南半球和南极领地','Australia':'澳大利亚',
'Austria':'奥地利', 'Azerbaijan':'阿塞拜疆', 'Burundi':'布隆迪', 'Belgium':'比利时', 'Benin':'贝宁', 'Burkina Faso':'布基纳法索', 'Bangladesh':'孟加拉国', 'Bulgaria':'保加利亚', 'The Bahamas':'巴哈马',
'Belarus':'白俄罗斯', 'Belize':'伯利兹', 'Bermuda':'百慕大', 'Bolivia':'玻利维亚', 'Brazil':'巴西', 'Brunei':'文莱', 'Bhutan':'不丹', 'Botswana':'博茨瓦纳', 'Central African Republic':'中非*', 'Canada':'加拿大', 'Switzerland':'瑞士',
'Chile':'智利', 'China':'中国', 'Ivory Coast':'象牙海岸', 'Cameroon':'喀麦隆', 'Democratic Republic of the Congo':'刚果**', 'Republic of the Congo':'刚果*', 'Colombia':'哥伦比亚', 'Costa Rica':'哥斯达黎加',
'Cuba':'古巴', 'Northern Cyprus':'北塞浦路斯', 'Cyprus':'塞浦路斯', 'Czech Republic':'捷克*', 'Germany':'德国', 'Djibouti':'吉布提', 'Denmark':'丹麦', 'Dominican Republic':'多明尼加*', 'Algeria':'阿尔及利亚',
'Ecuador':'厄瓜多尔', 'Egypt':'埃及','Eritrea':'厄立特里亚','Spain':'西班牙', 'Estonia':'爱沙尼亚', 'Ethiopia':'埃塞俄比亚', 'Finland':'芬兰', 'Fiji':'斐', 'Falkland Islands':'福克兰群岛', 'France':'法国', 'Gabon':'加蓬', 'United Kingdom':'英国',
'Ghana':'加纳', 'Guinea':'几内亚', 'Gambia':'冈比亚', 'Guinea Bissau':'几内亚比绍','Equatorial Guinea':'赤道几内亚', 'Greece':'希腊', 'Greenland':'格陵兰', 'Guatemala':'危地马拉', 'French Guiana':'法属圭亚那',
'Guyana':'圭亚那', 'Honduras':'洪都拉斯', 'Croatia':'克罗地亚', 'Haiti':'海地', 'Hungary':'匈牙利', 'Indonesia':'印尼', 'India':'印度', 'Ireland':'爱尔兰', 'Iran':'伊朗','Georgia':'格鲁吉亚','United States of America':'美国',
'Iraq':'伊拉克', 'Iceland':'冰岛', 'Israel':'以色列', 'Italy':'意大利', 'Jamaica':'牙买加', 'Jordan':'约旦', 'Japan':'日本', 'Kazakhstan':'哈萨克斯坦', 'Kenya':'肯尼亚', 'Kyrgyzstan':'吉尔吉斯斯坦', 'Cambodia':'柬埔寨',
'South Korea':'韩国', 'Kosovo':'科索沃', 'Kuwait':'科威特', 'Laos':'老挝', 'Lebanon':'黎巴嫩', 'Liberia':'利比里亚', 'Libya':'利比亚', 'Sri Lanka':'斯里兰卡', 'Lesotho':'莱索托', 'Lithuania':'立陶宛', 'Luxembourg':'卢森堡',
'Latvia':'拉脱维亚','Morocco':'摩洛哥', 'Moldova':'摩尔多瓦', 'Madagascar':'马达加斯加', 'Mexico':'墨西哥', 'Macedonia':'马其顿', 'Mali':'马里', 'Myanmar':'缅甸', 'Montenegro':'黑山', '*':'蒙古', 'Mozambique':'莫桑比克',
'Mauritania':'毛里塔尼亚','Malawi':'马拉维', 'Malaysia':'马来西亚', 'Namibia':'纳米比亚', 'New Caledonia':'新喀里多尼亚', 'Niger':'尼日尔','Nigeria':'尼日利亚', 'Nicaragua':'尼加拉瓜', 'Netherlands':'荷兰', 'Norway':'挪威',
'Nepal':'尼泊尔','New Zealand':'新西兰', 'Oman':'阿曼', 'Pakistan':'巴基斯坦','Panama':'*','Peru':'秘鲁', 'Philippines':'菲律宾', 'Papua New Guinea':'巴布亚新几内亚', 'Poland':'波兰','Puerto Rico':'波多黎各',
'North Korea':'北朝鲜', 'Portugal':'葡萄牙', 'Paraguay':'巴拉圭', 'Qatar':'卡塔尔', 'Romania':'罗马尼亚', 'Russia':'俄罗斯','Rwanda':'卢旺达', 'Western Sahara':'西撒哈拉', 'Saudi Arabia':'沙特阿拉伯','Sudan':'苏丹',
'South Sudan':'南苏丹', 'Senegal':'塞内加尔', 'Solomon Islands':'所罗门群岛', 'Sierra Leone':'塞拉利昂', 'El Salvador':'萨尔瓦多', 'Somaliland':'索马里兰', 'Somalia':'索马里', 'Republic of Serbia':'塞尔维亚*',
'Suriname':'苏里南','Slovakia':'斯洛伐克', 'Slovenia':'斯洛文尼亚','Sweden':'瑞典', 'Swaziland':'斯威士兰', 'Syria':'叙利亚', 'Chad':'乍得', 'Togo':'多哥', 'Thailand':'泰国', 'Tajikistan':'塔吉克斯坦', 'Turkmenistan':'土库曼斯坦',
'East Timor':'东帝汶','Trinidad and Tobago':'特里尼达和多巴哥','Tunisia':'突尼斯','Turkey':'土耳其', 'United Republic of Tanzania':'坦桑尼亚联合*', 'Uganda':'乌干达', 'Ukraine':'乌克兰', 'Uruguay':'乌拉圭',
'Uzbekistan':'乌兹别克斯坦', 'Venezuela':'委内瑞拉', 'Vietnam':'越南', 'Vanuatu':'瓦努阿图', 'West Bank':'西岸', 'Yemen':'也门', 'South Africa':'南非', 'Zambia':'赞比亚', 'Zimbabwe':'津巴布韦' ,'Bosnia and Herzegovina':'波斯尼亚和黑塞哥维那'
};
require.config({
paths: {
echarts: '<%=request.getContextPath()%>/js/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/map' // 使用柱状图就加载map模块，按需加载
],
function (ec) {
var myChart = ec.init(document.getElementById('main'));
var option = {
title : {
text: '终端分布',
x:'center',
y:'top',
textStyle : {
fontSize: 18,
fontWeight: 100,
color: '#999',
fontFamily: '"Microsoft Yahei",simhei'
}
},
backgroundColor:$(".w_b50").css('background-color'),
tooltip : {
trigger: 'item',
textStyle : {
fontSize: 11,
fontWeight: 60,
color: '#ccc',
fontFamily: '"Microsoft Yahei",simhei'
},
formatter : function (params) {
var value=params.value;
if(value>=0){
return '设备总数' + '<br/>' + params.name + ' : ' + value;
}else{
return '设备总数' + '<br/>' + params.name + ' : ' + 0;
}
}
},
dataRange: {
show: false,
min: 1,
max: 10,
text:['高','低'], // 文本，默认为数值文本
realtime: false,
calculable : true,
color: ['#da70d6', '#32cd32', '#6495ed','#6b8e23','orange',
'#ba55d3', '#cd5c5c', '#ffa500', '#00fa9a','#ff00ff',
'#ff6347', '#7b68ee', '#3cb371']
},
toolbox: {
show : true,
x:'right',
borderColor:'#ccc',
itemSize:14,
feature : {
selfButtons:{//自定义按钮
show:true,
title:'world', //鼠标移动上去显示的文字
icon:'<%=request.getContextPath()%>/images/world.png',
option:{},
onclick:function(param) {//点击事件
loaddata(null,'dev_country_id'); //回到世界地图
}
},
}
},
series : [
{
name: '设备总数',
type: 'map',
mapType: 'world',
roam: false,
mapLocation: {
y : 40
},
itemStyle:{
normal:{
areaStyle:{color:'lightskyblue'}
},
emphasis:{label:{show:true}},
},
data:[],
nameMap :namemapping //国家英文名映射为中文名
}]
};
function loaddata(cityname,countryField){
$.ajax({
type : "post",
async : true,
data :{"countryField":countryField},
url : "<%=request.getContextPath()%>/cities/devicecountrylist.json",
dataType : "json", //返回数据形式为json
success : function(result) {
var data=[];
for(var i=0;i<result.length;i++){
if(result[i].value>0){//过滤设备数小于0的地址
var d={'name':result[i].name,'value':result[i].value};
data.push(d);
}
}
option.series[0].data=data;
if(countryField=='dev_country_id'){//显示世界地图
option.series[0].mapType='world';
myChart.setOption(option);
}else if(countryField=='dev_province_id'){//显示中国地图
option.series[0].mapType='china';
myChart.setOption(option);
}else if(countryField=='dev_city_id'){//显示省地图
option.series[0].mapType=cityname;
myChart.setOption(option);
}
}
});
};
loaddata(null,'dev_country_id');
var i=0;
myChart.on('click',function(params){
var select= params.name;
if(option.series[0].mapType=='world' && select=='中国'){//进入中国
loaddata(null,'dev_province_id');
}else if(option.series[0].mapType!='world' && select!='中国'){//中国省或市地图
if(i%2==0 && option.series[0].mapType=='china'){//为0进入市图
loaddata(select,'dev_city_id');
}else if(i%2==1 && option.series[0].mapType!='china'){//为1进入中国图
loaddata(null,'dev_province_id');
}
i++;
}
});
}
);
}
</script>
</div>
解决思路：
1、采用单文件加载地图方式：
由于使用的已经是压缩版(官网http://echarts.baidu.com/echarts2/下载后dist目录下)，只是加载慢。
其中echarts.js(354KB)、chart目录下的map.js(441KB)。
改用压缩版全图表 echarts-all.js(949KB)，对应加载地图配置：
<div class="w_b50 fl bg_x" id="main">
<script type="text/javascript" src="<%=request.getContextPath()%>/dist/echarts-all.js"></script>
<script type="text/javascript">
var namemapping={
'Afghanistan':'阿富汗', 'Angola':'安哥拉', 'Albania':'阿尔巴尼亚', 'United Arab Emirates':'阿联酋', 'Argentina':'阿根廷', 'Armenia':'亚美尼亚', 'French Southern and Antarctic Lands':'法属南半球和南极领地','Australia':'澳大利亚',
'Austria':'奥地利', 'Azerbaijan':'阿塞拜疆', 'Burundi':'布隆迪', 'Belgium':'比利时', 'Benin':'贝宁', 'Burkina Faso':'布基纳法索', 'Bangladesh':'孟加拉国', 'Bulgaria':'保加利亚', 'The Bahamas':'巴哈马',
'Belarus':'白俄罗斯', 'Belize':'伯利兹', 'Bermuda':'百慕大', 'Bolivia':'玻利维亚', 'Brazil':'巴西', 'Brunei':'文莱', 'Bhutan':'不丹', 'Botswana':'博茨瓦纳', 'Central African Republic':'中非*', 'Canada':'加拿大', 'Switzerland':'瑞士',
'Chile':'智利', 'China':'中国', 'Ivory Coast':'象牙海岸', 'Cameroon':'喀麦隆', 'Democratic Republic of the Congo':'刚果**', 'Republic of the Congo':'刚果*', 'Colombia':'哥伦比亚', 'Costa Rica':'哥斯达黎加',
'Cuba':'古巴', 'Northern Cyprus':'北塞浦路斯', 'Cyprus':'塞浦路斯', 'Czech Republic':'捷克*', 'Germany':'德国', 'Djibouti':'吉布提', 'Denmark':'丹麦', 'Dominican Republic':'多明尼加*', 'Algeria':'阿尔及利亚',
'Ecuador':'厄瓜多尔', 'Egypt':'埃及','Eritrea':'厄立特里亚','Spain':'西班牙', 'Estonia':'爱沙尼亚', 'Ethiopia':'埃塞俄比亚', 'Finland':'芬兰', 'Fiji':'斐', 'Falkland Islands':'福克兰群岛', 'France':'法国', 'Gabon':'加蓬', 'United Kingdom':'英国',
'Ghana':'加纳', 'Guinea':'几内亚', 'Gambia':'冈比亚', 'Guinea Bissau':'几内亚比绍','Equatorial Guinea':'赤道几内亚', 'Greece':'希腊', 'Greenland':'格陵兰', 'Guatemala':'危地马拉', 'French Guiana':'法属圭亚那',
'Guyana':'圭亚那', 'Honduras':'洪都拉斯', 'Croatia':'克罗地亚', 'Haiti':'海地', 'Hungary':'匈牙利', 'Indonesia':'印尼', 'India':'印度', 'Ireland':'爱尔兰', 'Iran':'伊朗','Georgia':'格鲁吉亚','United States of America':'美国',
'Iraq':'伊拉克', 'Iceland':'冰岛', 'Israel':'以色列', 'Italy':'意大利', 'Jamaica':'牙买加', 'Jordan':'约旦', 'Japan':'日本', 'Kazakhstan':'哈萨克斯坦', 'Kenya':'肯尼亚', 'Kyrgyzstan':'吉尔吉斯斯坦', 'Cambodia':'柬埔寨',
'South Korea':'韩国', 'Kosovo':'科索沃', 'Kuwait':'科威特', 'Laos':'老挝', 'Lebanon':'黎巴嫩', 'Liberia':'利比里亚', 'Libya':'利比亚', 'Sri Lanka':'斯里兰卡', 'Lesotho':'莱索托', 'Lithuania':'立陶宛', 'Luxembourg':'卢森堡',
'Latvia':'拉脱维亚','Morocco':'摩洛哥', 'Moldova':'摩尔多瓦', 'Madagascar':'马达加斯加', 'Mexico':'墨西哥', 'Macedonia':'马其顿', 'Mali':'马里', 'Myanmar':'缅甸', 'Montenegro':'黑山', '*':'蒙古', 'Mozambique':'莫桑比克',
'Mauritania':'毛里塔尼亚','Malawi':'马拉维', 'Malaysia':'马来西亚', 'Namibia':'纳米比亚', 'New Caledonia':'新喀里多尼亚', 'Niger':'尼日尔','Nigeria':'尼日利亚', 'Nicaragua':'尼加拉瓜', 'Netherlands':'荷兰', 'Norway':'挪威',
'Nepal':'尼泊尔','New Zealand':'新西兰', 'Oman':'阿曼', 'Pakistan':'巴基斯坦','Panama':'*','Peru':'秘鲁', 'Philippines':'菲律宾', 'Papua New Guinea':'巴布亚新几内亚', 'Poland':'波兰','Puerto Rico':'波多黎各',
'North Korea':'北朝鲜', 'Portugal':'葡萄牙', 'Paraguay':'巴拉圭', 'Qatar':'卡塔尔', 'Romania':'罗马尼亚', 'Russia':'俄罗斯','Rwanda':'卢旺达', 'Western Sahara':'西撒哈拉', 'Saudi Arabia':'沙特阿拉伯','Sudan':'苏丹',
'South Sudan':'南苏丹', 'Senegal':'塞内加尔', 'Solomon Islands':'所罗门群岛', 'Sierra Leone':'塞拉利昂', 'El Salvador':'萨尔瓦多', 'Somaliland':'索马里兰', 'Somalia':'索马里', 'Republic of Serbia':'塞尔维亚*',
'Suriname':'苏里南','Slovakia':'斯洛伐克', 'Slovenia':'斯洛文尼亚','Sweden':'瑞典', 'Swaziland':'斯威士兰', 'Syria':'叙利亚', 'Chad':'乍得', 'Togo':'多哥', 'Thailand':'泰国', 'Tajikistan':'塔吉克斯坦', 'Turkmenistan':'土库曼斯坦',
'East Timor':'东帝汶','Trinidad and Tobago':'特里尼达和多巴哥','Tunisia':'突尼斯','Turkey':'土耳其', 'United Republic of Tanzania':'坦桑尼亚联合*', 'Uganda':'乌干达', 'Ukraine':'乌克兰', 'Uruguay':'乌拉圭',
'Uzbekistan':'乌兹别克斯坦', 'Venezuela':'委内瑞拉', 'Vietnam':'越南', 'Vanuatu':'瓦努阿图', 'West Bank':'西岸', 'Yemen':'也门', 'South Africa':'南非', 'Zambia':'赞比亚', 'Zimbabwe':'津巴布韦' ,'Bosnia and Herzegovina':'波斯尼亚和黑塞哥维那'
};
var option = {
title : {
text: '终端分布',
x:'center',
y:'top',
textStyle : {
fontSize: 18,
fontWeight: 100,
color: '#999',
fontFamily: '"Microsoft Yahei",simhei'
}
},
backgroundColor:$(".w_b50").css('background-color'),
tooltip : {
trigger: 'item',
textStyle : {
fontSize: 11,
fontWeight: 60,
color: '#ccc',
fontFamily: '"Microsoft Yahei",simhei'
},
formatter : function (params) {
var value=params.value;
if(value>=0){
return '设备总数' + '<br/>' + params.name + ' : ' + value;
}else{
return '设备总数' + '<br/>' + params.name + ' : ' + 0;
}
}
},
dataRange: {
show: false,
min: 1,
max: 10,
text:['高','低'], // 文本，默认为数值文本
realtime: false,
calculable : true,
color: ['#da70d6', '#32cd32', '#6495ed','#6b8e23','orange',
'#ba55d3', '#cd5c5c', '#ffa500', '#00fa9a','#ff00ff',
'#ff6347', '#7b68ee', '#3cb371']
},
toolbox: {
show : true,
x:'right',
borderColor:'#ccc',
itemSize:14,
feature : {
selfButtons:{//自定义按钮
show:true,
title:'world', //鼠标移动上去显示的文字
icon:'<%=request.getContextPath()%>/images/world.png',
option:{},
onclick:function(param) {//点击事件
loaddata(null,'dev_country_id'); //回到世界地图
}
},
}
},
series : [{
name: '设备总数',
type: 'map',
mapType: 'world',
roam: false,
mapLocation: {
y : 40
},
itemStyle:{
normal:{
areaStyle:{color:'lightskyblue'}
},
emphasis:{label:{show:true}},
},
data:[],
nameMap :namemapping //国家英文名映射为中文名
}]
};
var myChart; $(function(){
initMap();
});
$(window).resize(function(){
myChart.resize();
});
//初始化地图
function initMap(){
myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
loaddata(null,'dev_country_id');
var i=0;
myChart.on("click",function(params){
var select= params.name;
if(option.series[0].mapType=='world' && select=='中国'){//进入中国
loaddata(null,'dev_province_id');
}else if(option.series[0].mapType!='world' && select!='中国'){//中国省或市地图
if(i%2==0 && option.series[0].mapType=='china'){//为0进入市图
loaddata(select,'dev_city_id');
}else if(i%2==1 && option.series[0].mapType!='china'){//为1进入中国图
loaddata(null,'dev_province_id');
}
i++;
}
});
} function loaddata(cityname,countryField){
var url="<%=request.getContextPath()%>/cities/devicecountrylist.json";
ajaxRequestPost(url,{"countryField":countryField},function(result){
var data=[];
for(var i=0;i<result.length;i++){
if(result[i].value>0){//过滤设备数小于0的地址
var d={'name':result[i].name,'value':result[i].value};
data.push(d);
}
}
option.series[0].data=data;
if(countryField=='dev_country_id'){//显示世界地图
option.series[0].mapType='world';
myChart.setOption(option);
}else if(countryField=='dev_province_id'){//显示中国地图
option.series[0].mapType='china';
myChart.setOption(option);
}else if(countryField=='dev_city_id'){//显示省地图
option.series[0].mapType=cityname;
myChart.setOption(option);
}
})
};
</script>
</div>
其中，浏览器缩放时调用echarts的resize方法，不需要每次都重构echarts地图（即重新初始化地图，加载慢）。
采用该方式首次加载时间为4-5秒，仍然不够快。
2、官网自定义构建地图方式：
使用官网 http://echarts.baidu.com/echarts2/ 在线构建工具，构建地图(大小734KB)严重错位，暂时放弃该方式。
3、去除压缩版全图表不相关模块：
压缩版全图表 echarts-all.js(949KB)，我们只需要map地图，去除多余其他部分，正好研究下源码。
去除多余的模块如下：
echarts/chart/line
echarts/chart/bar
echarts/chart/scatter
echarts/chart/k
echarts/chart/pie
echarts/chart/radar
echarts/chart/chord
echarts/chart/force
echarts/chart/gauge
echarts/chart/funnel
echarts/chart/eventRiver
echarts/chart/venn
echarts/chart/treemap
echarts/chart/tree
echarts/chart/wordCloud
echarts/chart/heatmap echarts/component/timeline echarts/layout/Chord
echarts/layout/eventRiver
echarts/layout/Force
echarts/layout/forceLayoutWorker
echarts/layout/WordCloudRectZero
echarts/layout/Tree
echarts/layout/TreeMap
echarts/layout/WordCloud
echarts/theme/infographic
echarts/theme/macarons zrender/loadingEffect/Bar
zrender/loadingEffect/Bubble
zrender/loadingEffect/DynamicLine
zrender/loadingEffect/Ring
zrender/loadingEffect/Spin
zrender/loadingEffect/Whirling
zrender/shape/Droplet zrender/shape/Heart
zrender/shape/Star echarts/component/polar
echarts/data/Graph
echarts/data/Tree
echarts/util/coordinates
echarts/util/date
echarts/util/shape/HalfSmoothPolygon
echarts/util/shape/Ribbon
echarts/util/smartLogSteps
每个模块定义标识(define )如下：
define('zrender/zrender', [
'require',
'./dep/excanvas',
'./tool/util',
'./tool/log',
'./tool/guid',
'./Handler',
'./Painter',
'./Storage',
'./animation/Animation',
'./tool/env'
], function (require) {
...
去除后大小为756KB，测试地图首次加载时间为3-4秒，不够快速。
4、异步加载js文件：
H5的js加载属性async (旧的html也具备) 实现异步加载。
但存在一个问题，地图加载时echarts js还未加载，导致无法初始化地图。
1、想到判断js加载完，再执行地图初始化。
$.getScript("<%=request.getContextPath()%>/dist/echarts-all.js",function(){
initMap();//js加载完成，继续执行后续代码
});
执行结果仍类似同步加载js，无法加速。
2、在登录页实现异步加载，再在使用页面引入js文件。
之前还采用了在登录成功后跳转的第一个页面同步加载echarts文件，但导致登录缓慢，影响体验。
联想到浏览器会缓存js等文件，采用在系统登录页异步加载echarts文件，在不影响体验又不影响性能的情况下，将echarts文件加载了，并交由浏览器缓存。
接着只要在使用的地方采用普通方式引入即可，不会再从服务器下载，而使用缓存的js文件。
①登录页login.jsp异步加载js文件：
<script type="text/javascript" src="<%=request.getContextPath()%>/dist/echarts-all.js" async="async"></script>
②登录后地图页面引入js文件( 使用的却是浏览器缓存的js文件)
<script type="text/javascript" src="<%=request.getContextPath()%>/dist/echarts-all.js"></script>
再次测试地图首次加载时间,1-2秒！和普通页面跳转时间一样。
==========================================