标签：
使用的时候出现了一个BUG, China地图的底色没有绘制出来，现在把一个小的DEMO给大家，以供参考，并附上参考文章（http://blog.csdn.net/danielinbiti/article/details/44851781），祝好。
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts</title> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="height:500px;width:500px;"></div> <!-- ECharts单文件引入 --> <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> <script type="text/javascript"> // 路径配置 require.config({ paths: { echarts: ‘http://echarts.baidu.com/build/dist‘ } }); // 使用 require( [ ‘echarts‘, ‘echarts/chart/map‘ // 使用柱状图就加载bar模块，按需加载 ], function (ec) { // 基于准备好的dom，初始化echarts图表 var myChart = ec.init(document.getElementById(‘main‘)); var effect = { show: true, scaleSize: require(‘zrender/tool/env‘).canvasSupported ? 1 : 2, period: 30, // 运动周期，无单位，值越大越慢 color: ‘#fff‘, shadowColor: ‘rgba(220,220,220,0.4)‘, shadowBlur : 5 }; function itemStyle(idx) { return { normal: { color:‘#fff‘, borderWidth:1, borderColor:[‘rgba(30,144,255,1)‘,‘lime‘][idx], lineStyle: { //shadowColor : [‘rgba(30,144,255,1)‘,‘lime‘][idx], //默认透明 //shadowBlur: 10, //shadowOffsetX: 0, //shadowOffsetY: 0, type: ‘solid‘ } } } }; var option = { backgroundColor: ‘#1b1b1b‘, color: [‘rgba(30,144,255,1)‘,‘lime‘], title : { text: ‘中国铁路运输主干线‘, subtext:‘数据来自维基百科‘, x:‘center‘, textStyle : { color: ‘#fff‘ } }, tooltip : { trigger: ‘item‘, formatter: ‘{b}‘ }, toolbox: { show : true, orient : ‘vertical‘, x: ‘right‘, y: ‘center‘, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, restore : {show: true}, saveAsImage : {show: true} } }, series : [ { name: ‘八横通道‘, type: ‘map‘, roam: true, hoverable: false, mapType: ‘china‘, itemStyle:{ normal:{ borderColor:‘rgba(100,149,237,1)‘, borderWidth:0.5, areaStyle:{ color: ‘#1b1b1b‘ } } }, data:[], }, { name: ‘八横通道‘, type: ‘map‘, roam: true, hoverable: false, mapType: ‘china‘, itedmStyle:{ normal:{ borderColor:‘rgba(100,149,237,1)‘, borderWidth:0.5, areaStyle:{ //color: ‘#1b1b1b‘ color: ‘red‘ } } }, data:[], markLine : { symbol: [‘circle‘, ‘circle‘], symbolSize : 1, effect : effect, itemStyle : itemStyle(1), smooth:true, data : [ [{name:‘北京‘}, {name:‘兰州‘}], [{name:‘兰州‘}, {name:‘拉萨‘}], [{name:‘大同‘}, {name:‘秦皇岛‘}], [{name:‘神木‘}, {name:‘黄骅‘}], [{name:‘太原‘}, {name:‘德州‘}], [{name:‘德州‘}, {name:‘龙口‘}], [{name:‘龙口‘}, {name:‘烟台‘}], [{name:‘太原‘}, {name:‘德州‘}], [{name:‘德州‘}, {name:‘济南‘}], [{name:‘济南‘}, {name:‘青岛‘}], [{name:‘长治‘}, {name:‘邯郸‘}], [{name:‘邯郸‘}, {name:‘济南‘}], [{name:‘济南‘}, {name:‘青岛‘}], [{name:‘瓦塘‘}, {name:‘临汾‘}], [{name:‘临汾‘}, {name:‘长治‘}], [{name:‘长治‘}, {name:‘汤阴‘}], [{name:‘汤阴‘}, {name:‘台前‘}], [{name:‘台前‘}, {name:‘兖州‘}], [{name:‘兖州‘}, {name:‘日照‘}], [{name:‘侯马‘}, {name:‘月山‘}], [{name:‘月山‘}, {name:‘新乡‘}], [{name:‘新乡‘}, {name:‘兖州‘}], [{name:‘兖州‘}, {name:‘日照‘}], [{name:‘连云港‘}, {name:‘郑州‘}], [{name:‘郑州‘}, {name:‘兰州‘}], [{name:‘兰州‘}, {name:‘乌鲁木齐‘}], [{name:‘乌鲁木齐‘}, {name:‘阿拉山口‘}], [{name:‘西安‘}, {name:‘南阳‘}], [{name:‘南阳‘}, {name:‘信阳‘}], [{name:‘信阳‘}, {name:‘合肥‘}], [{name:‘合肥‘}, {name:‘南京‘}], [{name:‘南京‘}, {name:‘启东‘}], [{name:‘重庆‘}, {name:‘武汉‘}], [{name:‘武汉‘}, {name:‘九江‘}], [{name:‘九江‘}, {name:‘铜陵‘}], [{name:‘铜陵‘}, {name:‘南京‘}], [{name:‘南京‘}, {name:‘上海‘}], [{name:‘上海‘}, {name:‘怀化‘}], [{name:‘怀化‘}, {name:‘重庆‘}], [{name:‘重庆‘}, {name:‘成都‘}], [{name:‘成都‘}, {name:‘贵阳‘}], [{name:‘贵阳‘}, {name:‘昆明‘}], [{name:‘昆明‘}, {name:‘南宁‘}], [{name:‘南宁‘}, {name:‘黎塘‘}], [{name:‘黎塘‘}, {name:‘湛江‘}] ] }, geoCoord: { ‘阿拉山口‘:[82.5757,45.1706], ‘包头‘:[109.8403,40.6574], ‘北京‘:[116.4075,39.9040], ‘成都‘:[104.0665,30.5723], ‘大连‘:[121.6147,38.9140], ‘大同‘:[113.3001,40.0768], ‘德州‘:[116.3575,37.4341], ‘福州‘:[119.2965,26.0745], ‘广州‘:[113.2644,23.1292], ‘贵阳‘:[106.6302,26.6477], ‘哈尔滨‘:[126.5363,45.8023], ‘邯郸‘:[114.5391,36.6256], ‘杭州‘:[120.1551,30.2741], ‘合肥‘:[117.2272,31.8206], ‘侯马‘:[111.3720,35.6191], ‘怀化‘:[109.9985,27.5550], ‘淮安‘:[119.0153,33.6104], ‘黄骅‘:[117.3300,38.3714], ‘济南‘:[117.1205,36.6510], ‘焦作‘:[113.2418,35.2159], ‘九江‘:[116.0019,29.7051], ‘九龙红磡‘:[114.1870,22.3076], ‘昆明‘:[102.8329,24.8801], ‘拉萨‘:[91.1409,29.6456], ‘兰州‘:[103.8343,36.0611], ‘黎塘‘:[109.1363,23.2066], ‘连云港‘:[119.2216,34.5967], ‘临汾‘:[111.5190,36.0880], ‘柳州‘:[109.4160,24.3255], ‘龙口‘:[120.4778,37.6461], ‘洛阳‘:[112.4540,34.6197], ‘满洲里‘:[117.3787,49.5978], ‘南昌‘:[115.8581,28.6832], ‘南京‘:[118.7969,32.0603], ‘南宁‘:[108.3661,22.8172], ‘南阳‘:[112.5283,32.9908], ‘宁波‘:[121.5440,29.8683], ‘启东‘:[121.6574,31.8082], ‘秦皇岛‘:[119.6005,39.9354], ‘青岛‘:[120.3826,36.0671], ‘日照‘:[119.5269,35.4164], ‘厦门‘:[118.0894,24.4798], ‘上海‘:[121.4737,31.2304], ‘深圳‘:[114.0579,22.5431], ‘神木‘:[110.4871,38.8610], ‘沈阳‘:[123.4315,41.8057], ‘台前‘:[115.8717,35.9701], ‘太原‘:[112.5489,37.8706], ‘汤阴‘:[114.3572,35.9218], ‘天津‘:[117.2010,39.0842], ‘铜陵‘:[117.8121,30.9454], ‘瓦塘‘:[109.7600,23.3161], ‘温州‘:[120.6994,27.9943], ‘乌鲁木齐‘:[87.6168,43.8256], ‘武汉‘:[114.3054,30.5931], ‘西安‘:[108.9402,34.3416], ‘新乡‘:[113.9268,35.3030], ‘信阳‘:[114.0913,32.1470], ‘烟台‘:[121.4479,37.4638], ‘兖州‘:[116.7838,35.5531], ‘月山‘:[113.0550,35.2104], ‘湛江‘:[110.3594,21.2707], ‘长治‘:[113.1163,36.1954], ‘郑州‘:[113.6254,34.7466], ‘重庆‘:[106.5516,29.5630] } } ] }; // 为echarts对象加载数据 myChart.setOption(option); } ); </script> </body>
注意： Series里面，一共写了两个data，这样才会显示China地图的底图，否则BUG出现了之后地图的底色是高亮的。
标签：
原文地址：http://www.cnblogs.com/BrowserSnake/p/4758633.html
