關於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 : '--');
}