关于echart使用过程中遇见过的坑

对于一个以前在项目中从未使用过Echart的萌新来说，从一开始写就遇坑无数，接触各种Echart图表以来，遇坑填坑，下面可以听我细数一下这些，以记忆，如果能帮到你们的话，那就是再好不过了。

1.从获取数据开始，大家知道各种Echart都是自带他专属的格式的。万变不离其宗，其中都是要依赖于data ，通过ajax请求到数据后，转换成图表专属data格式就可以使用了。

2.其次就是loading界面，在数据获取前，预加载的一个动作，Echart是有一个方法可以调用的，但这里面有个小坑：loading代码不能放在hideLoading方法一块，否则loading是会失效的。我选择放在数据加载前（需要取到图表层的id哦）。

3.如果是返回数据有值的话，一切安好，如果返回数据没值的话，Echart3不支持noDataLoadingOption了！需要我们重新绘制canvas，或者更方便的方法，覆盖一个暂无数据层在上面，解决～

4.关于Echart地图，说是最为复杂的Echart图表应该也不冤枉，目前接触的也只是浅层的区域赋值和地图缩进（可以点击省份市级进去）。如果想给地图块增加动态返回的标志属性的话，可以在第一个data块增加上去，然后区域触发点击或hover时在param里面取出来。还有就是地图区域文字不居中的问题，查了蛮久的，因为我是用的中国及所有省份市级等的json地图，然后又是Echart3不匹配导致的...Echart3建议使用百度地图，而我的json地图是Echart2的，心塞塞，只能后续换底版地图了。



举的这个地图例子实现的功能有：地图缩进，文件夹式的地图链接，可通过链接实现地图切换。

//Echart地图 请求相关数据
areaData(1);
function areaData(areaName){
var data;
if(areaName == 1){
data = '';
}else{
data = {
areaPath:areaName
}
}
$.ajax({
type:"get",
url:"...",
data:data,
success:function(res){
$('.retPro').attr('data-id',res.data.level);
var mapUrl=res.data.jsonLink;
var name=res.data.region;
var max=Math.ceil(res.data.max+res.data.max*0.05);
var mapName=res.data.region;
var area,areaPath,parentNum,studentNum,teacherNum,areaCountList;
var areaP = new Array();
var areaS = new Array();
var areaT = new Array();
var areaM = new Array();

$('.areaList').empty();
for(var i=0;i<res.data.areaCountList.length;i++){
areaCountList=res.data.areaCountList[i];
var p = {};
var s = {};
var t = {};
var m = {};
area=areaCountList.name;
areaPath=areaCountList.areaPath;
areaPath0=res.data.areaCountList[0].areaPath;	//默认第一个
parentNum=areaCountList.parentNum;
studentNum=areaCountList.studentNum;
teacherNum=areaCountList.teacherNum;
p["name"] = area;
p["value"] = parentNum;
s["name"] = area;
s["value"] = studentNum;
t["name"] = area;
t["value"] = teacherNum;
m["name"] = area;
m["value"] = areaPath;
areaP[i]=p;
areaS[i]=s;
areaT[i]=t;
areaM[i]=m;
$('.areaList').append('<div data-info="'+areaPath+'" class="swiper-slide li">'+area+'</div>');
}
var swiper = new Swiper('#areaList', {
freeMode : false,
paginationClickable: false,
slidesPerView: 6,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev'
});
$('#direList').append('<li data-name="'+areaName+'"><a href="javascript:void(0);">'+name+'</a></li>');
mapEchart(mapUrl,mapName,areaP,areaS,areaT,areaM,max);
areaTotle(areaPath0,1);
$('.cenTitle').html(mapName+'教育信息动态');
$('.areaList .li:eq(0)').addClass('active');
},
error:function(res){
console.log(res.msg);
}
});
}
function mapEchart(mapUrl,mapName,areaP,areaS,areaT,areaM,maxNum){
var myChart = echarts.init(document.getElementById('mapChart'));
myChart.showLoading({
text : '数据获取中',
maskColor:'#000f30',
textColor:'#fff'
});
$.get(mapUrl, function(mapJson){
echarts.registerMap(mapName, mapJson);
var chart = echarts.init(document.getElementById('mapChart'));	//在id为mainMap的dom元素中显示地图
var option=({
tooltip: {
trigger: 'item',
padding: 10,
formatter:function(params){
var res = params.name+'<br/>';
var myseries = option.series;
for (var i = 1; i < myseries.length; i++){
for(var j=0;j<myseries[i].data.length;j++){
if(myseries[i].data[j].name==params.name){
res+=myseries[i].name +' : '+myseries[i].data[j].value+'</br>';
}
}
}
return res;
}
},
title:{
x:'center',
y:'top',
textAlign:'left',
textStyle:{
color:'#fff',
fontSize:24
}
},
visualMap: {
min: 0,
max: maxNum,
left: 'left',
top: 'bottom',
text: ['高','低'],
color:['#005efc','#629bfa'],
textStyle:{
color:'#fff'
},
calculable: true
},
series: [{
type: 'map',
name: '所属位置',
map: mapName,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data : areaM
},{
type: 'map',
name: '零食销售量',
map: mapName,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data:areaP
},{
type: 'map',
name: '化妆品销售量',
map: mapName,		//要和echarts.registerMap()中第一个参数一致
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data : areaS
},{
type: 'map',
name: '家具销售量',
map: mapName,
label: {
normal:
95dd
{
show: true
},
emphasis: {
show: true
}
},
data : areaT
/*  data: [
{name:'哈尔滨市',value:3},
{name:'齐齐哈尔市',value:31}
]  */
}]
})
chart.setOption(option);
chart.on('click', function (params) {	//点击链接到相应list
var id = $('.retPro').attr('data-id');
var value = params.value;
if(value > 0 && id < 2){
var city = params.data.value;
areaData(city);
}
});

});
}

下一步，准备用React和Echart结合开发适合手机端PC段的数据统计界面。如有错误，敬请指出～以后陆续会增加记录。