首先关键在于引入
<script type="text/javascript" src="/bundles/jquery/js/jQuery-2.2.0.min.js"></script>
<script type="text/javascript" src="./bundles/require/require.js"></script> // 因为后边要用到require，不适用这个会报错
<script type="text/javascript" src="js/echarts.js" charset="UTF-8"></script> // 好像是echarts版本太高也会出问题，echarts3.0目前没有map了
按需引入的时候一些资源文件js文件夹下的chart
js/chart
chart文件夹.png
配置这些之后就可以按需引入了
html
<div id="mainMap" style="width:800px;height:800px"> </div>
js
function getEcharts(){
// Step:3 conifg ECharts's path, link to echarts.js from current page.
// Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
require.config({
paths: {
echarts: './js'
}
});
// Step:4 require echarts and use it in the callback.
// Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
require(
[
'echarts',
'echarts/chart/map'
],
function (ec) {
// --- 地图 ---
var myChart2 = ec.init(document.getElementById('mainMap'));
myChart2.setOption({
title : {
text: '',
subtext: '',
left: 'center',
textStyle : {
color: '#3DDCFC'
}
},
tooltip : {
trigger: 'axis',
backgroundColor: 'rgba(0,0,0,.6)',
padding: 14,
textStyle:{
color:'#fff'
},
fontSize: 12,
lineHeight:20
},
dataRange: {
min : 0,
max : 100,
calculable : false,
color: ['#ff3333', 'orange', 'yellow','lime','aqua'],
x: 'right',
textStyle:{
color:'#fff',
}
},
layoutCenter: ['50%', '50%'],
series : [
{
name: '目的地为：',
type: 'map',
roam: false,
hoverable: false,
mapType: 'world',
itemStyle:{
normal:{
label:{
show:false,
rich:{
per:{
color: '#fff',
padding: [6, 4],
borderRadius: 4,
}
}},
borderColor:'rgba(100,149,237,1)',
borderWidth:1,
areaStyle:{
color: 'rgba(0,0,0,0.2)'
}
}
},
data:[
],
markLine : {
smooth:true,
symbol: ['none', 'circle'],
symbolSize : 1,
itemStyle : {
normal: {
color:'#fff',
borderWidth:1,
borderColor:'rgba(30,144,255,0.5)'
}
},
data : [
],
},
geoCoord: {
'阿富汗':[67.709953,33.93911],
'安哥拉':[17.873887,-11.202692],
'阿尔巴尼亚':[20.168331,41.153332],
'阿联酋':[53.847818,23.424076],
'阿根廷':[-63.61667199999999,-38.416097],
'亚美尼亚':[45.038189,40.069099],
'法属南半球和南极领地':[69.348557,-49.280366],
'澳大利亚':[133.775136,-25.274398],
'奥地利':[14.550072,47.516231],
'阿塞拜疆':[47.576927,40.143105],
'布隆迪':[29.918886,-3.373056],
'比利时':[4.469936,50.503887],
'贝宁':[2.315834,9.30769],
'布基纳法索':[-1.561593,12.238333],
'孟加拉国':[90.356331,23.684994],
'保加利亚':[25.48583,42.733883],
'巴哈马':[-77.39627999999999,25.03428],
'波斯尼亚和黑塞哥维那':[17.679076,43.915886],
'白俄罗斯':[27.953389,53.709807],
'伯利兹':[-88.49765,17.189877],
'百慕大':[-64.7505,32.3078],
'玻利维亚':[-63.58865299999999,-16.290154],
'巴西':[-51.92528,-14.235004],
'文莱':[114.727669,4.535277],
'不丹':[90.433601,27.514162],
'博茨瓦纳':[24.684866,-22.328474],
'中非共和国':[20.939444,6.611110999999999],
'加拿大':[-106.346771,56.130366],
'瑞士':[8.227511999999999,46.818188],
'智利':[-71.542969,-35.675147],
'中国':[104.195397,35.86166],
'象牙海岸':[-5.547079999999999,7.539988999999999],
'喀麦隆':[12.354722,7.369721999999999],
'刚果民主共和国':[21.758664,-4.038333],
'刚果共和国':[15.827659,-0.228021],
'哥伦比亚':[-74.297333,4.570868],
'哥斯达黎加':[-83.753428,9.748916999999999],
'古巴':[-77.781167,21.521757],
'北塞浦路斯':[33.429859,35.126413],
'塞浦路斯':[33.429859,35.126413],
'捷克共和国':[15.472962,49.81749199999999],
'德国':[10.451526,51.165691],
'吉布提':[42.590275,11.825138],
'丹麦':[9.501785,56.26392],
'多明尼加共和国':[-70.162651,18.735693],
'阿尔及利亚':[1.659626,28.033886],
'厄瓜多尔':[-78.18340599999999,-1.831239],
'埃及':[30.802498,26.820553],
'厄立特里亚':[39.782334,15.179384],
'西班牙':[-3.74922,40.46366700000001],
'爱沙尼亚':[25.013607,58.595272],
'埃塞俄比亚':[40.489673,9.145000000000001],
'芬兰':[25.748151,61.92410999999999],
'斐':[178.065032,-17.713371],
'福克兰群岛':[-59.523613,-51.796253],
'法国':[2.213749,46.227638],
'加蓬':[11.609444,-0.803689],
'英国':[-3.435973,55.378051],
'格鲁吉亚':[-82.9000751,32.1656221],
'加纳':[-1.023194,7.946527],
'几内亚':[-9.696645,9.945587],
'冈比亚':[-15.310139,13.443182],
'几内亚比绍':[-15.180413,11.803749],
'赤道几内亚':[10.267895,1.650801],
'希腊':[21.824312,39.074208],
'格陵兰':[-42.604303,71.706936],
'危地马拉':[-90.23075899999999,15.783471],
'法属圭亚那':[-53.125782,3.933889],
'圭亚那':[-58.93018,4.860416],
'洪都拉斯':[-86.241905,15.199999],
'克罗地亚':[15.2,45.1],
'海地':[-72.285215,18.971187],
'匈牙利':[19.503304,47.162494],
'印尼':[113.921327,-0.789275],
'印度':[78.96288,20.593684],
'爱尔兰':[-8.24389,53.41291],
'伊朗':[53.688046,32.427908],
'伊拉克':[43.679291,33.223191],
'冰岛':[-19.020835,64.963051],
'以色列':[34.851612,31.046051],
'意大利':[12.56738,41.87194],
'牙买加':[-77.297508,18.109581],
'约旦':[36.238414,30.585164],
'日本':[138.252924,36.204824],
'哈萨克斯坦':[66.923684,48.019573],
'肯尼亚':[37.906193,-0.023559],
'吉尔吉斯斯坦':[74.766098,41.20438],
'柬埔寨':[104.990963,12.565679],
'韩国':[127.766922,35.907757],
'科索沃':[20.902977,42.6026359],
'科威特':[47.481766,29.31166],
'老挝':[102.495496,19.85627],
'黎巴嫩':[35.862285,33.854721],
'利比里亚':[-9.429499000000002,6.428055],
'利比亚':[17.228331,26.3351],
'斯里兰卡':[80.77179699999999,7.873053999999999],
'莱索托':[28.233608,-29.609988],
'立陶宛':[23.881275,55.169438],
'卢森堡':[6.129582999999999,49.815273],
'拉脱维亚':[24.603189,56.879635],
'摩洛哥':[-7.092619999999999,31.791702],
'摩尔多瓦':[28.369885,47.411631],
'马达加斯加':[46.869107,-18.766947],
'墨西哥':[-102.552784,23.634501],
'马其顿':[21.745275,41.608635],
'马里':[-3.996166,17.570692],
'缅甸':[95.956223,21.913965],
'黑山':[19.37439,42.708678],
'蒙古':[103.846656,46.862496],
'莫桑比克':[35.529562,-18.665695],
'毛里塔尼亚':[-10.940835,21.00789],
'马拉维':[34.301525,-13.254308],
'马来西亚':[101.975766,4.210484],
'纳米比亚':[18.49041,-22.95764],
'新喀里多尼亚':[165.618042,-20.904305],
'尼日尔':[8.081666,17.607789],
'尼日利亚':[8.675277,9.081999],
'尼加拉瓜':[-85.207229,12.865416],
'荷兰':[5.291265999999999,52.132633],
'挪威':[8.468945999999999,60.47202399999999],
'尼泊尔':[84.12400799999999,28.394857],
'新西兰':[174.885971,-40.900557],
'阿曼':[55.923255,21.512583],
'巴基斯坦':[69.34511599999999,30.375321],
'巴拿马':[-80.782127,8.537981],
'秘鲁':[-75.015152,-9.189967],
'菲律宾':[121.774017,12.879721],
'巴布亚新几内亚':[143.95555,-6.314992999999999],
'波兰':[19.145136,51.919438],
'波多黎各':[-66.590149,18.220833],
'北朝鲜':[127.510093,40.339852],
'葡萄牙':[-8.224454,39.39987199999999],
'巴拉圭':[-58.443832,-23.442503],
'卡塔尔':[51.183884,25.354826],
'罗马尼亚':[24.96676,45.943161],
'俄罗斯':[105.318756,61.52401],
'卢旺达':[29.873888,-1.940278],
'西撒哈拉':[-12.885834,24.215527],
'沙特阿拉伯':[45.079162,23.885942],
'苏丹':[30.217636,12.862807],
'南苏丹':[31.3069788,6.876991899999999],
'塞内加尔':[-14.452362,14.497401],
'所罗门群岛':[160.156194,-9.64571],
'塞拉利昂':[-11.779889,8.460555],
'萨尔瓦多':[-88.89653,13.794185],
'索马里兰':[46.8252838,9.411743399999999],
'索马里':[46.199616,5.152149],
'塞尔维亚共和国':[21.005859,44.016521],
'苏里南':[-56.027783,3.919305],
'斯洛伐克':[19.699024,48.669026],
'斯洛文尼亚':[14.995463,46.151241],
'瑞典':[18.643501,60.12816100000001],
'斯威士兰':[31.465866,-26.522503],
'叙利亚':[38.996815,34.80207499999999],
'乍得':[18.732207,15.454166],
'多哥':[0.824782,8.619543],
'泰国':[100.992541,15.870032],
'塔吉克斯坦':[71.276093,38.861034],
'土库曼斯坦':[59.556278,38.969719],
'东帝汶':[125.727539,-8.874217],
'特里尼达和多巴哥':[-61.222503,10.691803],
'突尼斯':[9.537499,33.886917],
'土耳其':[35.243322,38.963745],
'坦桑尼亚联合共和国':[34.888822,-6.369028],
'乌干达':[32.290275,1.373333],
'乌克兰':[31.16558,48.379433],
'乌拉圭':[-55.765835,-32.522779],
'美国':[-95.712891,37.09024],
'乌兹别克斯坦':[64.585262,41.377491],
'委内瑞拉':[-66.58973,6.42375],
'越南':[108.277199,14.058324],
'瓦努阿图':[166.959158,-15.376706],
'西岸':[35.3027226,31.9465703],
'也门':[48.516388,15.552727],
'南非':[22.937506,-30.559482],
'赞比亚':[27.849332,-13.133897],
'津巴布韦':[29.154857,-19.015438]
},
markPoint : {
symbol:'emptyCircle',
symbolSize : function (v){
return 5 + v/5
},
effect : {
show: true,
shadowBlur : 1
},
itemStyle:{
normal:{
label:{show:true}
},
emphasis: {
label:{position:'bottom'}
}
},
data : [
{name:'阿根廷',value:25},
{name:'澳大利亚',value:90},
{name:'保加利亚',value:80},
{name:'巴西',value:70},
{name:'加拿大',value:60},
{name:'德国',value:50},
{name:'西班牙',value:40},
{name:'法国',value:30},
{name:'日本',value:20},
{name:'美国',value:75}
]
}
},
{
name: '按源 Top10',
type: 'map',
mapType: 'world',
data:[],
markLine : {
smooth:true,
effect : {
show: true,
scaleSize: 2,
period: 15,
color: 'rgba(255,255,255,0.7)',
shadowBlur: 5
},
itemStyle : {
normal: {
label:{
show:true,
color: '#333333',
formatter: ''
},
silent:true,
borderWidth:1,
lineStyle: {
type: 'solid',
shadowBlur: 3
}
}
},
data : [
[{name:'中国'}, {name:'阿根廷',value:25}],
[{name:'中国'}, {name:'澳大利亚',value:90}],
[{name:'中国'}, {name:'保加利亚',value:80}],
[{name:'中国'}, {name:'巴西',value:70}],
[{name:'中国'}, {name:'加拿大',value:60}],
[{name:'中国'}, {name:'德国',value:50}],
[{name:'中国'}, {name:'西班牙',value:40}],
[{name:'中国'}, {name:'法国',value:30}],
[{name:'中国'}, {name:'日本',value:20}],
[{name:'中国'}, {name:'美国',value:75}]
]
},
markPoint : {
symbol:'emptyCircle',
symbolSize : function (v){
return 0.1
},
effect : {
show: false,
shadowBlur : 0
},
itemStyle:{
normal:{
label:{show:true,
position:'top',
textStyle: {
fontSize: 14
}
}
},
emphasis: {
label:{show:true}
}
},
data : [
{name:'阿根廷',value:25},
{name:'澳大利亚',value:90},
{name:'保加利亚',value:80},
{name:'巴西',value:70},
{name:'加拿大',value:60},
{name:'德国',value:50},
{name:'西班牙',value:40},
{name:'法国',value:30},
{name:'日本',value:20},
{name:'美国',value:75}
]
}
}
]
});
window.addEventListener("resize",function(){
myChart2.resize();
})
});
}
