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

李文楊發表於2017-06-08
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 : '--');
}

 

相關文章