关于Echarts地图的一些问题整理
地图渐变色：
代码片段中x，y，x2，y2表示的是渐变的方式（片段中是上下渐变）
代码片段中emphasis为纹理填充色
itemStyle: { normal: { areaColor: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#fefed8' }, { offset: 1, color: '#fe5e2a' }], }, }, emphasis: { areaColor: '#fe9333' }, }
地图插入图标：
代码片段中symbol为图标，symbolSize为图标大小，data中为展示图标的经纬度（一般为后端返回）
{ type: "scatter", coordinateSystem: 'geo', markPoint: { symbol: `image://data:image/png;base64,......`, symbolSize: [0.1rem, 0.1rem], data: this.axuiliary, } }
点击地图或图标事件：
myEchart.setOption（option） myEchart.on('click', 'series', function (params) { if("map" === params.componentsubType) { consloe.log('点击的地图') } else if('markPoint' === params.componentsubType) { console.log('点击的图标') } })
地图放大缩小功能：
两个需要一起用，否则不生效
var option = { layoutSize: '80%', layoutCenter: ['70', '50%'] }
echarts使用中的常见的问题
- 1.给折线图画一条水准线
- 2.图表自适应容器
- 3.x轴文字过长显示不全的问题
- 4.echarts的点击事件
- 5.数据中如果有空值时 如何实现连接空值或者显示断开
- 6.关于echarts地图js文件制作问题
- 7.echarts引入地图文件 绘制地图
- 8.使用echarts绘制x轴可以自由伸缩的图表
1.给折线图画一条水准线
通常用echarts 我们会绘制折线图 需要一条水准线来明显区分数据echarts有一个属性 markLine
加水准线 我们只需要在series下 的 对象加入下面代码 具体设置样式 可以上echarts.baidu.com 查看配置项手册
markLine:{ lineStyle:{ //color:'#fdfd30', color:'#ff0a0a', width:1, type:'dashed', opacity:1 }, itemStyle: { normal: { label:{ color:'#00deff' } } }, data:[{name:'基准线',yAxis: baseLineNum}] }
这里的baseLineNum就是基准线 相对y轴的数值 lineStyle可以设置基准线的类型（-type）宽度 透明度
2.echarts图表自适应容器
在图标对像设置完配置项后 监听 window resize事件 然后调用echarts自带的resize()函数即可
mychartObj.setOption(option); window.addEventListener("resize",function(){ mychartObj.resize(); });
3.x轴文字过长显示不全的问题
这个问题应该比较常见 当我们遇到那种 x轴是日期 又特别多的时候 就可以用这个方法 把x轴的文本 label 倾斜一下就好啦
就像这样的 这里的角度范围是 （90–90度 支持number类型）
设置xAxis 下面的axisLabel 的rotate属性
例如
axisLabel: { interval:0, rotate:45 }
然后你会看到 倾斜了是可以看全了 但是图表右边超出了 这个时候我们可以设置grid属性 的left值大一点 或者 让旋转角度大一点如 这里 我们把角度设置为-90 即可
4.echarts点击事件
其实跟我们平常写的点击时间一样 echarts的点击事件
echartsObj.on("click",function(para){ //事件执行代码 })
.数据中如果有空值时 如何实现连接空值或者显示断开
这个应该不常用到 但是一旦用到的话 很少有人 我也是 一次一个同事问我 这个 中间又一个值为空 怎么让她不断开显示 废了一些功夫 查到了 connectNulls这个属性 echarts2 好像还没有
connectNulls：true;
如果不给这个属性的话 默认是断开的
不设置如图
设置如图
6.关于echarts地图js文件制作问题
我们使用echarts绘制地图的时候 是需要引入 相应的地图js文件的 这些js文件也就是地图的经纬度数据 之前我们是直接可以在echarts官网下载这些js或者json文件的 但是现在却找不到了
而我之前的一个项目刚好需要 苦寻无果 于是问了问前辈 说可以自己制作这个js文件的 然后把方法分享给大家
其实很简单 我们找一个地图js文件案例 分析一下 然后 通过百度地图 或者高德地图把行政区域的轮廓的经纬度获取到 然后放到相应的位置即可
https://github.com/kidddfu/echarts-map/tree/master/js
这个网址里面是有map.js 以及各个省份的js 如果需要省份一下的地图js就需要我们自己获取经纬度然后制作了
以zhengzhou.js为例
(function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. define(['exports', 'echarts'], factory); } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') { // CommonJS factory(exports, require('echarts')); } else { // Browser globals factory({}, root.echarts); } }(this, function (exports, echarts) { var log = function (msg) { if (typeof console !== 'undefined') { console && console.error && console.error(msg); } } if (!echarts) { log('ECharts is not Loaded'); return; } if (!echarts.registerMap) { log('ECharts Map is not loaded') return; } echarts.registerMap("郑州",{"type":"FeatureCollection","features":[{"type":"Feature","id":"410104","properties":{"name":"登封","cp":[113.059786,34.462527],"childNum":1},"geometry":{"type":"Polygon","coordinates":[[[113.131517,34.27554],[113.10865,34.270651],[113.080607,34.270929],[113.073644,34.288455],[113.039421,34.288675],[113.018418,34.305066],[113.002076,34.307643],[112.915391,34.298253],[112.877387,34.307088],[112.853339,34.305535],[112.846404,34.307695],[112.852497,34.336934],[112.848606,34.345242],[112.781896,34.342587],[112.761764,34.351625],[112.758424,34.363723],[112.749576,34.364103],[112.739049,34.359291],[112.730667,34.368515],[112.729777,34.388908],[112.749081,34.459863],[112.749568,34.485987],[112.74649,34.497201],[112.779361,34.507719],[112.795381,34.503377],[112.808408,34.49106],[112.825368,34.482194],[112.891901,34.485075],[112.915356,34.481772],[112.921165,34.486397],[112.927537,34.501075],[112.931675,34.5352],[112.944777,34.538519],[112.976924,34.538317],[112.973238,34.543248],[112.993109,34.541558],[113.000867,34.528116],[113.01223,34.526027],[113.020268,34.531456],[113.048945,34.567536],[113.057871,34.568181],[113.072399,34.563633],[113.093953,34.574758],[113.137181,34.575432],[113.145739,34.578765],[113.161273,34.597906],[113.168486,34.602015],[113.174583,34.600133],[113.189026,34.58844],[113.192049,34.580358],[113.187502,34.557529],[113.194131,34.540203],[113.185158,34.507393],[113.186248,34.49867],[113.191798,34.492372],[113.199857,34.48991],[113.211852,34.500448],[113.230159,34.503958],[113.271507,34.487915],[113.284823,34.487075],[113.293141,34.480628],[113.297523,34.464317],[113.312188,34.440022],[113.328856,34.425744],[113.334668,34.414437],[113.324303,34.407029],[113.320262,34.367483],[113.316888,34.362277],[113.30712,34.358563],[113.288467,34.358084],[113.271804,34.341983],[113.24443,34.341376],[113.232367,34.337923],[113.189551,34.30226],[113.178128,34.285049],[113.166498,34.276224],[113.131517,34.27554]]]}},{"type":"Feature","id":"410108","properties":{"name":"巩义","cp":[113.044838,34.75559],"childNum":1},"geometry":{"type":"Polygon","coordinates":[[[113.154573,34.589612],[113.145739,34.578765],[113.137181,34.575432],[113.093953,34.574758],[113.072399,34.563633],[113.057871,34.568181],[113.048945,34.567536],[113.020268,34.531456],[113.01223,34.526027],[113.000867,34.528116],[112.993109,34.541558],[112.973238,34.543248],[112.978891,34.550226],[112.953726,34.548241],[112.925001,34.550785],[112.894823,34.563041],[112.882448,34.576124],[112.868059,34.586341],[112.855787,34.590772],[112.844679,34.612312],[112.846895,34.637087],[112.834521,34.663058],[112.836738,34.685582],[112.832781,34.70374],[112.83732,34.708753],[112.847253,34.712068],[112.877315,34.713388],[112.886206,34.703594],[112.899763,34.70215],[112.918364,34.716714],[112.9391,34.719469],[112.945696,34.729135],[112.915516,34.743261],[112.90919,34.75134],[112.910783,34.771122],[112.903571,34.787746],[112.894167,34.789645],[112.822947,34.781714],[112.812622,34.794428],[112.812349,34.810652],[112.841216,34.814582],[112.867876,34.829805],[112.887983,34.835992],[112.922172,34.836127],[112.932495,34.840676],[112.987341,34.84763],[113.023384,34.840631],[113.092655,34.845598],[113.121403,34.852407],[113.139758,34.86559],[113.163585,34.845033],[113.173791,34.822428],[113.173163,34.803866],[113.16088,34.788788],[113.16696,34.777776],[113.176415,34.775862],[113.18503,34.763811],[113.229345,34.75831],[113.250136,34.762365],[113.267313,34.769719],[113.278681,34.766844],[113.282272,34.759753],[113.274537,34.740046],[113.269066,34.710168],[113.271729,34.691183],[113.266162,34.68079],[113.264692,34.659911],[113.260791,34.653209],[113.245558,34.644054],[113.221721,34.638033],[113.209757,34.63819],[113.204455,34.635079],[113.202496,34.627104],[113.205424,34.619701],[113.161273,34.597906],[113.154573,34.589612]]]}},{"type":"Feature","id":"410105","properties":{"name":"文化","cp":[113.639588,34.875792],"childNum":1},"geometry":{"type":"Polygon","coordinates":[[[113.532151,34.968564],[113.529492,34.955784],[113.529743,34.9525],[113.535924,34.942381],[113.54099,34.934125],[113.548033,34.920038],[113.55177,34.912402],[113.560501,34.899584],[113.57067,34.88478],[113.597979,34.857059],[113.613645,34.833004],[113.632042,34.805266],[113.655758,34.769454],[113.659063,34.770344],[113.675988,34.770344],[113.680767,34.770136],[113.688708,34.769602],[113.688528,34.782678],[113.688384,34.792313],[113.688456,34.806985],[113.688025,34.821507],[113.6886,34.831404],[113.684971,34.842633],[113.685761,34.852676],[113.686695,34.863131],[113.686731,34.865708],[113.684,34.872964],[113.680731,34.880219],[113.678251,34.886112],[113.675772,34.894328],[113.678072,34.911617],[113.668801,34.919787],[113.665208,34.920911],[113.658812,34.920852],[113.635384,34.932927],[113.615981,34.93849],[113.599164,34.946065],[113.57933,34.954823],[113.569269,34.956834],[113.554896,34.959438],[113.548428,34.964881],[113.533193,34.968549]]]}},{"type":"Feature","id":"410103","properties":{"name":"未来","cp":[113.769232,34.752506],"childNum":1},"geometry":{"type":"Polygon","coordinates":[[[113.65892,34.770062],[113.663771,34.770181],[113.673544,34.770181],[113.688887,34.769499],[113.700745,34.768876],[113.711021,34.768609],[113.721442,34.768075],[113.724766,34.768001],[113.72976,34.768179],[113.737504,34.76726],[113.74239,34.766504],[113.751212,34.768846],[113.761524,34.771545],[113.784413,34.776719],[113.806727,34.780158],[113.81898,34.781818],[113.841689,34.781966],[113.860122,34.780514],[113.858721,34.757177],[113.858739,34.757088],[113.865027,34.748013],[113.864111,34.726091],[113.855128,34.704074],[113.832418,34.687276],[113.832059,34.687335],[113.827639,34.681042],[113.827819,34.680656],[113.824334,34.66124],[113.801732,34.65548],[113.79981,34.644582],[113.803583,34.638226],[113.785114,34.630326],[113.75608,34.657351],[113.726041,34.684782],[113.695427,34.712324],[113.679186,34.726091],[113.670131,34.743415],[113.665388,34.754804],[113.658201,34.765599]]]}},{"type":"Feature","id":"410102","properties":{"name":"东区","cp":[113.776706,34.860155],"childNum":1},"geometry":{"type":"Polygon","coordinates":[[[113.87119,34.895279],[113.872269,34.879376],[113.869424,34.871803],[113.856298,34.858416],[113.849208,34.840027],[113.84844,34.795552],[113.860095,34.780596],[113.84354,34.7821],[113.819537,34.7821],[113.787629,34.777593],[113.761398,34.771604],[113.750978,34.768876],[113.742426,34.766563],[113.736821,34.767452],[113.729742,34.768223],[113.724927,34.768046],[113.710698,34.768728],[113.697798,34.769083],[113.688797,34.769602],[113.688761,34.769602],[113.688708,34.773375],[113.688672,34.775851],[113.6886,34.781114],[113.688474,34.788163],[113.688429,34.791008],[113.688429,34.794514],[113.688456,34.79796],[113.688465,34.801428],[113.688348,34.81275],[113.688115,34.821033],[113.688052,34.821514],[113.688285,34.825367],[113.688438,34.827804],[113.688627,34.830997],[113.688618,34.831397],[113.687692,34.834323],[113.686067,34.839315],[113.685016,34.842603],[113.685249,34.845455],[113.685438,34.848047],[113.685671,34.851172],[113.685932,34.854038],[113.686749,34.862961],[113.686785,34.865671],[113.684072,34.873016],[113.678377,34.886016],[113.675934,34.894158],[113.67791,34.909345],[113.678269,34.911506],[113.685025,34.910322],[113.699613,34.91121],[113.710824,34.914111],[113.727568,34.914466],[113.731736,34.915117],[113.744313,34.919557],[113.751427,34.919853],[113.765513,34.919794],[113.77349,34.916656],[113.782042,34.912335],[113.794402,34.888414],[113.817974,34.881071],[113.839533,34.881545],[113.855631,34.888177]]]}},{"type":"Feature","id":"410122","properties":{"name":"新密","cp":[113.454178,34.542968],"childNum":1},"geometry":{"type":"Polygon","coordinates":[[[113.506466,34.349209],[113.468697,34.339481],[113.419416,34.358215],[113.413359,34.367222],[113.416474,34.383221],[113.411502,34.386021],[113.388788,34.382301],[113.347166,34.410919],[113.334668,34.414437],[113.328856,34.425744],[113.312188,34.440022],[113.297523,34.464317],[113.293141,34.480628],[113.284823,34.487075],[113.271507,34.487915],[113.230159,34.503958],[113.211852,34.500448],[113.199857,34.48991],[113.191798,34.492372],[113.186248,34.49867],[113.185158,34.507393],[113.193168,34.528562],[113.194131,34.540203],[113.187502,34.557529],[113.192049,34.580358],[113.183744,34.593582],[113.168486,34.602015],[113.205424,34.619701],[113.217507,34.617458],[113.256319,34.627875],[113.287058,34.63234],[113.311605,34.632182],[113.329378,34.637893],[113.342376,34.63496],[113.361285,34.620633],[113.36755,34.620612],[113.385275,34.632474],[113.389292,34.632088],[113.399701,34.620135],[113.410306,34.614387],[113.435566,34.616539],[113.450325,34.620462],[113.477239,34.655656],[113.510704,34.672204],[113.518675,34.669014],[113.523873,34.661208],[113.523236,34.648837],[113.538647,34.631706],[113.547534,34.630605],[113.566799,34.637701],[113.574311,34.637318],[113.583051,34.614292],[113.592059,34.606215],[113.603589,34.584043],[113.614292,34.575221],[113.62501,34.569853],[113.665773,34.561456],[113.673833,34.556938],[113.679366,34.51832],[113.685418,34.505596],[113.68238,34.498361],[113.661745,34.479511],[113.656833,34.459648],[113.649846,34.455138],[113.62596,34.452062],[113.596808,34.425867],[113.578533,34.421178],[113.574609,34.416199],[113.573085,34.397212],[113.568044,34.38933],[113.524665,34.36541],[113.516837,34.348707],[113.506466,34.349209]]]}},{"type":"Feature","id":"410183","properties":{"name":"新郑","cp":[113.733587,34.449192],"childNum":1},"geometry":{"type":"Polygon","coordinates":[[[113.881409,34.335066],[113.863357,34.333497],[113.840355,34.339288],[113.810812,34.34095],[113.792709,34.33544],[113.774541,34.323904],[113.749966,34.325808],[113.740298,34.323421],[113.705216,34.292025],[113.679803,34.280273],[113.671726,34.279989],[113.654527,34.286928],[113.644366,34.299596],[113.626531,34.312569],[113.602956,34.323985],[113.583637,34.324217],[113.558663,34.3201],[113.537351,34.324707],[113.528544,34.330556],[113.516837,34.348707],[113.524665,34.36541],[113.568044,34.38933],[113.573085,34.397212],[113.574609,34.416199],[113.578533,34.421178],[113.596808,34.425867],[113.62596,34.452062],[113.649846,34.455138],[113.656833,34.459648],[113.661745,34.479511],[113.68238,34.498361],[113.685418,34.505596],[113.679366,34.51832],[113.673833,34.556938],[113.665773,34.561456],[113.62501,34.569853],[113.603589,34.584043],[113.620025,34.581365],[113.63986,34.579225],[113.662569,34.580652],[113.689015,34.581127],[113.726672,34.584931],[113.753406,34.588973],[113.761454,34.594203],[113.75973,34.61108],[113.751681,34.616547],[113.739033,34.61821],[113.730122,34.626052],[113.739042,34.633639],[113.756514,34.625435],[113.775529,34.623355],[113.803524,34.637605],[113.810338,34.626776],[113.811201,34.630816],[113.820112,34.620835],[113.827586,34.613468],[113.835059,34.607763],[113.831897,34.572935],[113.826148,34.558191],[113.819249,34.537735],[113.811775,34.521081],[113.81235,34.50252],[113.81465,34.47586],[113.81465,34.454908],[113.824424,34.442048],[113.866392,34.463004],[113.888704,34.482875],[113.894641,34.468817],[113.908372,34.454783],[113.90223,34.452631],[113.883336,34.426313],[113.882914,34.413025],[113.889881,34.391433],[113.883331,34.372482],[113.893968,34.335022],[113.881409,34.335066]]]}},{"type":"Feature","id":"410184","properties":{"name":"中牟","cp":[114.003222,34.788563],"childNum":1},"geometry":{"type":"Polygon","coordinates":[[[114.100897,34.506079],[114.099139,34.495103],[114.090468,34.490603],[114.071476,34.496102],[114.044526,34.510748],[114.034551,34.508593],[114.022712,34.496064],[114.018099,34.484514],[114.019861,34.4579],[114.012367,34.44525],[113.987568,34.443302],[113.934277,34.454172],[113.908372,34.454783],[113.894641,34.468817],[113.888704,34.482875],[113.900887,34.489191],[113.91526,34.498236],[113.923884,34.505851],[113.924459,34.533928],[113.912386,34.547725],[113.889964,34.560569],[113.888239,34.576739],[113.88134,34.593382],[113.854319,34.622855],[113.836497,34.624756],[113.827873,34.615725],[113.8158,34.629034],[113.808326,34.636162],[113.809574,34.629443],[113.79997,34.64457],[113.801743,34.655523],[113.824427,34.661189],[113.827876,34.680719],[113.832106,34.687344],[113.855211,34.70394],[113.864269,34.72602],[113.865047,34.74802],[113.85879,34.757135],[113.860095,34.780596],[113.84844,34.795552],[113.849208,34.840027],[113.856298,34.858416],[113.869424,34.871803],[113.872269,34.879376],[113.87119,34.895279],[113.933784,34.898305],[113.955286,34.90368],[114.017234,34.957159],[114.051405,34.976447],[114.085961,34.982469],[114.12249,34.978448],[114.15798,34.94596],[114.173814,34.93862],[114.205809,34.936159],[114.210131,34.922073],[114.213112,34.88061],[114.204835,34.838269],[114.196619,34.837042],[114.15423,34.84607],[114.141721,34.839018],[114.143464,34.817908],[114.167809,34.776367],[114.163431,34.768042],[114.147368,34.753163],[114.1439,34.742691],[114.167579,34.709411],[114.156237,34.681863],[114.162354,34.672781],[114.153416,34.665834],[114.154796,34.649725],[114.168385,34.623812],[114.146975,34.621253],[114.136685,34.613351],[114.132727,34.590784],[114.106907,34.550763],[114.100897,34.506079]]]}},{"type":"Feature","id":"410182","properties":{"name":"龙湖","cp":[113.656548,34.624281],"childNum":1},"geometry":{"type":"Polygon","coordinates":[[[113.52288,34.662918],[113.523994,34.661166],[113.523383,34.648843],[113.536427,34.634321],[113.538726,34.631736],[113.547386,34.630667],[113.56679,34.637736],[113.574371,34.63735],[113.583246,34.61427],[113.59223,34.606248],[113.603728,34.584199],[113.639516,34.579266],[113.663016,34.580752],[113.689247,34.581108],[113.727478,34.585031],[113.753206,34.588835],[113.761111,34.594006],[113.759458,34.610942],[113.75184,34.61629],[113.738905,34.618013],[113.730209,34.625796],[113.720651,34.637023],[113.661435,34.64035],[113.639013,34.639993],[113.600781,34.646824],[113.568299,34.652763],[113.525252,34.663096]]]}},{"type":"Feature","id":"410185","properties":{"name":"港区","cp":[113.865817,34.546774],"childNum":1},"geometry":{"type":"Polygon","coordinates":[[[113.827945,34.615681],[113.836569,34.624652],[113.854319,34.622751],[113.881089,34.593486],[113.887988,34.576724],[113.889712,34.560613],[113.912206,34.547532],[113.924135,34.533735],[113.923561,34.505777],[113.888778,34.483047],[113.8665,34.463525],[113.824675,34.442331],[113.815045,34.454774],[113.814902,34.475964],[113.812458,34.502088],[113.811883,34.520887],[113.819573,34.538136],[113.832221,34.572682],[113.835239,34.607808],[113.826975,34.614285]]]}},{"type":"Feature","id":"410181","properties":{"name":"建设","cp":[113.547889,34.825078],"childNum":1},"geometry":{"type":"Polygon","coordinates":[[[113.513951,34.969673],[113.517526,34.919283],[113.51034,34.878309],[113.511921,34.856215],[113.507825,34.847625],[113.498842,34.843063],[113.46485,34.837552],[113.460682,34.83376],[113.45752,34.819892],[113.4637,34.801695],[113.494961,34.7896],[113.492805,34.78379],[113.479007,34.777267],[113.481163,34.76339],[113.488637,34.754849],[113.533337,34.754078],[113.577677,34.753307],[113.655362,34.753425],[113.664813,34.754968],[113.64293,34.788592],[113.62367,34.817403],[113.597512,34.856985],[113.570634,34.884409],[113.551662,34.912357],[113.540882,34.93414],[113.5296,34.952485],[113.529384,34.955858],[113.532115,34.968638]]]}},{"type":"Feature","id":"410181","properties":{"name":"中原","cp":[113.594457,34.728776],"childNum":1},"geometry":{"type":"Polygon","coordinates":[[[113.488457,34.754345],[113.490901,34.746277],[113.488026,34.737201],[113.49047,34.732336],[113.519,34.727945],[113.520868,34.719934],[113.509514,34.700587],[113.511023,34.672211],[113.518856,34.669182],[113.525108,34.663304],[113.571676,34.652139],[113.638798,34.640261],[113.661507,34.640617],[113.720579,34.637172],[113.729059,34.628618],[113.739552,34.634796],[113.758811,34.626717],[113.774909,34.624934],[113.785257,34.630162],[113.760105,34.653208],[113.731215,34.679929],[113.695714,34.711745],[113.678754,34.725987],[113.670706,34.741294],[113.665172,34.754641],[113.664597,34.75479],[113.655758,34.753277],[113.638474,34.753307],[113.567544,34.752921],[113.532187,34.753752],[113.494099,34.754345]]]}},{"type":"Feature","id":"410181","properties":{"name":"荥阳","cp":[113.377714,34.814647],"childNum":1},"geometry":{"type":"Polygon","coordinates":[[[113.280392,34.763597],[113.278681,34.766844],[113.267313,34.769719],[113.250136,34.762365],[113.229345,34.75831],[113.18503,34.763811],[113.176415,34.775862],[113.16696,34.777776],[113.16088,34.788788],[113.173163,34.803866],[113.173791,34.822428],[113.163585,34.845033],[113.139758,34.86559],[113.164933,34.876023],[113.209849,34.885388],[113.246206,34.912568],[113.288488,34.936797],[113.335449,34.95452],[113.361481,34.970877],[113.391983,34.98234],[113.411729,34.983573],[113.439827,34.970946],[113.459709,34.966104],[113.48793,34.963878],[113.5138,34.969702],[113.51705,34.919052],[113.509867,34.878543],[113.511669,34.856247],[113.507469,34.847739],[113.498585,34.843354],[113.464551,34.837662],[113.460357,34.833808],[113.4572,34.819868],[113.463466,34.801684],[113.494639,34.789624],[113.492118,34.783866],[113.478292,34.777485],[113.480682,34.763379],[113.48809,34.755183],[113.490516,34.746044],[113.487718,34.73731],[113.490171,34.732292],[113.518822,34.727922],[113.520713,34.719899],[113.509255,34.700619],[113.510704,34.672204],[113.477239,34.655656],[113.450325,34.620462],[113.410306,34.614387],[113.399701,34.620135],[113.389292,34.632088],[113.385275,34.632474],[113.36755,34.620612],[113.361285,34.620633],[113.342376,34.63496],[113.329378,34.637893],[113.311605,34.632182],[113.287058,34.63234],[113.256319,34.627875],[113.217507,34.617458],[113.205424,34.619701],[113.202496,34.627104],[113.204455,34.635079],[113.209757,34.63819],[113.221721,34.638033],[113.245558,34.644054],[113.260791,34.653209],[113.264692,34.659911],[113.264601,34.674202],[113.271729,34.691183],[113.269066,34.710168],[113.274537,34.740046],[113.282386,34.759742]]]}}]}); }));
我们需要注意的就是echarts.registerMap(“郑州”，{“type”:”FeatureCollection”,”features”:[{“type”:”Feature”,”id”:”410104”,”properties”:{}]})这个函数
我们需要注意的就是红色标出来的
这里的zhegnzhou 就是我们要使用地图的时候要要配置的名字 这两者要保持一致
name 是这个区的名字 你这里写的什么地图上就会显示什么
cp是这个区的中心点经纬度 通常 我们会在地图上的某个区放一个气泡 或者数据显示的框框什么的就是这个来控制位置的
coordinates这个里面放的是这个区的经纬度信息 下面会给出怎么获取
怎么获取区 县的经纬度信息呢
1.通过百度地图的Boundary()函数 可以获取到行政区域的经纬度信息 然后用正则转为我们需要的格式即可
这是我写的一个demo 其实也很简单 需要的同学可以用
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>百度离线版DEMO</title> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=V6RjjChFXrifV2z41z0sYQEO"></script> </head> <body> <div style="width:800px;height:620px;border:1px solid gray" id="container"></div> </body> </html> <script type="text/javascript"> var container=document.getElementById('container') var map = new BMap.Map("container",{minZoom:5,maxZoom:18}); var point = new BMap.Point(113.682327,34.753759); // 创建点坐标 map.centerAndZoom(point,11); // 初始化地图,设置中心点坐标和地图级别。 map.addControl(new BMap.NavigationControl()); map.enableScrollWheelZoom(); // 启用滚轮放大缩小。 map.enableKeyboard(); // 启用键盘操作。 var marker = new BMap.Marker(point); map.addOverlay(marker); marker.enableDragging(); marker.addEventListener("dragend", function(e){ console.log('lng:'+e.point.lng+','+'lat:'+e.point.lat) }) var a='中原区 二七区 管城回族区 金水区 上街区 惠济区 中牟县 巩义市 荥阳市 新密市 新郑市 登封市'; var lyCity=a.split(" "); for(var i=0;i<lyCity.length;i++){ getBoundary(lyCity[i]); } function getBoundary(name){ var bdary = new BMap.Boundary(); bdary.get(name, function(rs){ //获取行政区域 var count = rs.boundaries.length; //行政区域的点有多少个 var pointArray = []; for (var i = 0; i < count; i++) { //console.log(name,'{"lng":'+rs.boundaries[i].replace(/,/g,',"lat":').replace(/;/g,'},{"lng":')+"}"); console.log(name,'['+rs.boundaries[i].replace(/;/g,'],[')+']'); var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000",fillColor:'transparent'}); //建立多边形覆盖物 map.addOverlay(ply); //添加覆盖物 pointArray = pointArray.concat(ply.getPath()); } map.setViewport(pointArray); }); } 这里打印出来的就是我们需要的信息 然后在js文件的"features"数组里复制一个对象 </script>
2.同理高德地图也有一个 getBoundry() 你传入一个 城市或者区县名字 他就可以把轮廓画出来 并可以给出经纬度信息 与方法1 原理是一样的 也很简单
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>高德地图demo</title> <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.3&key=fb000f0d2955080016e651b876b14181"></script> </head> <body> <div style="width:800px;height:620px;border:1px solid gray" id="container"></div> </body> <script type="text/javascript"> //初始化地图对象，加载地图 var district, map = new AMap.Map("container", { resizeEnable: true, center: [116.397428, 39.90923],//地图中心点 zoom: 10 //地图显示的缩放级别 }); addBeiJing(); function addBeiJing() { //加载行政区划插件 AMap.service('AMap.DistrictSearch', function() { var opts = { subdistrict: 1, //返回下一级行政区 extensions: 'all', //返回行政区边界坐标组等具体信息 //level: 'country' //查询行政级别为 市 }; //实例化DistrictSearch district = new AMap.DistrictSearch(opts); district.setLevel('country'); var a='老城区 西工区 瀍河回族区 涧西区 吉利区 洛龙区 孟津县 新安县 栾川县 嵩县 汝阳县 宜阳县 洛宁县 伊川县 偃师市'; var lyCity=a.split(" "); for(var i=0;i<lyCity.length;i++){ getBoundary(lyCity[i]); } function getBoundary(name){ //行政区查询 district.search(name, function(status, result) { // for(var i=0;i<result.length;i++){ // // } var bounds = result.districtList[0].boundaries; var polygons = []; if (bounds) { for (var i = 0, l = bounds.length; i < l; i++) { //生成行政区划polygon var polygon = new AMap.Polygon({ map: map, strokeWeight: 1, path: bounds[i], fillOpacity: 0.7, fillColor: '#CCF3FF', strokeColor: '#CC66CC' }); //console.log(name,bounds[i]); //console.log(name,"{lng:"+bounds[i].lng+",lat:"+bounds[i].lat+"}"); var str=""; for(var j=0;j<bounds[i].length;j++){ str+='['+bounds[i][j].lng+',lat:'+bounds[i][j].lat+'],' } console.log(name,str); polygons.push(polygon); } map.setFitView();//地图自适应 } }); } }); } </script> </html> 这个打印出来末尾会多一个逗号 也可以通过字符串截取去掉
7.echarts引入地图文件 绘制地图
完成我们上一部的制作后 比如我们要绘制郑州各个区域的echarts地图 怎么做呢
1.引入echarts.js
2.引入地图js文件
具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery.min.js"></script>
<script src="echarts.js"></script>
<script src="zhengzhou.js"></script>
</head>
<body>
<div id="map" style="width:70%;height:500px;"></div>
<script>
var chart = echarts.init(document.getElementById("map"));
var option={
title : {
text : ''
},
tooltip : {
trigger: 'item'
},
legend:{
show:false,
},
series: [
{
type: 'map',
name:"退服占比",
map: '郑州',
roam: true,
zoom: 1.1,//设置缩放比例
scaleLimit: {
min: 1,
max: 3
},//滚轮放大缩小的极限
//center:[114.026063,34.022956],//地图中心点
itemStyle: {
//normal 是图形在默认状态下的样式；
normal: {
show: true,
areaColor:"#CECECE",
borderColor:"#03001a",
borderWidth:1
},
//emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
emphasis: {
show: true
}
},
showLegendSymbol:false,
label: {
normal: {
show: true,
textStyle:{
color:'#000',
fontSize:12,
fontWeight:'bold'
}
},
emphasis: {
show: true,
textStyle:{
color: "#fff"
}
}
},
data:[]
}
]
};
chart.setOption(option);
</script>
</body>
</html>
8.使用echarts绘制x轴可以自由伸缩的图表（通过滚轮或者手势触发）
效果如下
这里其关键作用的就是dataZoom属性
