關於echarts使用的常見問題總結

關於echarts使用的問題總結
1.legend圖例不顯示的問題:
在legend中的data為一個數組項,數組項通常為一個字符串，每一項需要對應一個系列的 name,如果數組項的值與name不相符則圖例不會顯示;
2.圖表位置無法緊貼畫布邊緣的問題:
在grid繪圖網格里,containLabel(grid 區域是否包含坐標軸的刻度標簽,默認不包含)為true的情況下,無法使圖表緊貼着畫布顯示,但可以防止標簽標簽長度動態變化時溢出容器或者覆蓋其他組件,將containLabel設置為false即可解決;

grid:{
containLabel:false
}

3.反向坐標軸:
在echarts3中xAis和

yAis:{
  inverse:true  
}

新添加了inverse屬性,在inverse為true的情況下執行反向坐標軸;

4.動態替換地圖圖表的方法:
在echarts3中由於地圖精度的提高,不在內置地圖數據可以在地圖下載頁面http://echarts.baidu.com/download-map.html 下載對應文件,按需求引用;
地圖的geojson文件只包含了兩層數據(國>省,省>市,市>區),如需全國所有省市地區的json文件請聯系我;
eCharts 中提供了兩種格式的地圖數據，一種是可以直接 script 標簽引入的 js 文件，引入后會自動注冊地圖名字和數據。還有一種是 JSON 文件，需要通過 AJAX 異步加載后手動注冊,我一般使用后者;
方法如下:

function mapCharts(name,id){
$.get('json路徑/'+name+'.json', function (geoJson) {
echarts.registerMap(name, geoJson);
var chart = echarts.init(document.getElementById(id));
chart.setOption({
series: [{
type: 'map',
map: name
}]
});
});
};

5.柱狀圖的寬度問題:
如設計圖給出柱狀圖指定寬度,直接指定series.barWidth柱狀圖的寬度(默認barWidth為自適應),自適應功能會失效,在小尺寸狀態下柱狀圖寬度不會發生改變;

如不指定寬度,使用默認自適應會導致多條數據與單條數據寬度顯示不一致,所以在設計圖明確寬度的情況下,使用series.barMaxWidth(最大寬度)屬性,來解決這一問題;

自適應多條數據的效果

自適應單條數據的效果

使用了最大高度的效果

6.部分情況下初始化圖表失敗的問題
在使用類似Bootstrap輪播圖等使用display:none屬性隱藏其他圖片的插件時,這種情況下會導致echarts初始化時獲取不到畫布寬高,導致繪制圖表失敗;
如果不考慮ie9以下可考慮swiper3等使用overfllow:hidden屬性隱藏多余圖片的插件,如需兼容ie9以下可考慮swiper2(高度無法自適應),或者自己手寫輪播圖;

7.echarts圖表響應式的問題
echarts提供了圖表的resize方法,使用時可在setoption后添加如下代碼:

$(window).on('resize',function(){
myChart.resize();
});

8.圖表判斷返回顏色
echarts的color屬性提供了function方法

color: function(params) {
//顏色數組
var colorList = [
‘#C1232B‘,‘#B5C334‘,‘#FCCE10‘,‘#E87C25‘,‘#27727B‘,
‘#FE8463‘,‘#9BCA63‘,‘#FAD860‘,‘#F3A43B‘,‘#60C0DD‘,
‘#D7504B‘,‘#C6E579‘,‘#F4E001‘,‘#F0805A‘,‘#26C0C0‘
];
//判斷的代碼

//根據條件返回相應顏色
return colorList[params.dataIndex]
}

9.使用formatter方法格式化文本(用於在label標簽,tolltip等顯示信息需要自定義時)
legend圖例下的使用
使用字符串模板，模板變量為圖例名稱 {name}

formatter: 'Legend {name}'
使用回調函數
formatter: function (name) {
return 'Legend ' + name;
};

label下的使用
主要是對params(一個對象包含data數據)參數的返回

formatter: function (params) {
return params.xxx;
};

10.tolltip里添加小標識(圓點之類的)的方法
在formatter里返回時拼接html元素;

formatter: function(params) {
if(params.data.value) {
if(params.data.value.length > 0) {
var str = '';
for(var i = 0; i < params.data.value.length; i++) {
if(str !== '') {
str += '</br>' + '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color[i] + '"></span>';
}
str += params.data.value[i] + '人';
}
return params.name + '</br>' + '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color[0] + '"></span>' + str;
}
}
return params.data.name + ':' + (params.data.value ? params.data.value : '--');
}