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){
    //事件执行代码
})

5.数据中如果有空值时 如何实现连接空值或者显示断开

这个应该不常用到 但是一旦用到的话 很少有人 我也是 一次一个同事问我 这个 中间又一个值为空 怎么让她不断开显示 废了一些功夫 查到了 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属性

demo示例echarts官网上也有 这里就不放我的代码了
官网demo传送门：http://www.echartsjs.com/gallery/editor.html?c=doc-example/scatter-dataZoom-all

这篇文章主要是讲我前一个项目用到的 以及当时出现的比较常用而又不好找的属性设置 放出来 也是对前一个项目的总结
希望能帮到大家 ，当然项目中遇到的问题 远不止这些 以后会有慢慢补充 。