關於Echarts的一些事兒

ECharts 是一個使用 JavaScript 實現的開源可視化庫，涵蓋各行業圖表,你們在平時項目裏面確定會常常用到。

下面來講說echarts在項目裏面的坑吧（-^-）

1.統計圖echarts裏面 x軸數據不徹底展現問題（x軸標籤文字過多致使顯示不全）

設置 X軸

1 XAxis:{ 2  data: ..., //數據 3  axisLabel: { //座標軸刻度標籤的相關設置 4  interval: 0, //座標軸刻度標籤的顯示間隔 設置爲0強制顯示全部標籤 5               rotate: 0 //能夠設置傾斜角度 }
}

x軸數據溢出的問題---> boundaryGap : true,  設爲true

文字豎直顯示: 使用axisLabel屬性

1 axisLabel: { 2  interval: 0, 3  formatter:function(value){ 4  return value.split("").join("\n");} 5}

2.echarts柱狀圖數據太多展現問題------ dataZoom屬性

 

 1 // type的slider和inside能夠同時保留，既能夠保留滾動條，也能夠在內部拖動  2 dataZoom : [  3  //1.橫向使用滾動條  4  {  5  type: 'slider',//有單獨的滑動條，用戶在滑動條上進行縮放或漫遊。inside是直接能夠是在內部拖動顯示  6  show: true,//是否顯示 組件。若是設置爲 false，不會顯示，可是數據過濾的功能還存在。  7  start: 0,//數據窗口範圍的起始百分比0-100  8  end: 50,//數據窗口範圍的結束百分比0-100  9  xAxisIndex: [0],// 此處表示控制第一個xAxis，設置 dataZoom-slider 組件控制的 x軸 但是已數組[0,2]表示控制第一，三個；xAxisIndex: 2 ，表示控制第二個。yAxisIndex屬性同理 10  bottom:-10 //距離底部的距離 11  }, 12  //2.在內部能夠橫向拖動 13  { 14  type: 'inside',// 內置於座標系中 15  start: 0, 16  end: 30, 17  xAxisIndex: [0] 18  }, 19  //3.縱向使用滾動條 20  { 21  type: 'slider', 22  show: true, 23  yAxisIndex: [0],//設置組件控制的y軸 24  left: '93%',//距離左側的距離 可使百分比，也能夠是像素 left: '30'（30像素） 25  start: 29, 26  end: 36 27  }, 28  //4.在內部能夠縱向拖動 29  { 30  type: 'inside', 31  yAxisIndex: [0], 32  start: 29, 33  end: 36 34  } 35         ]

3.echarts地圖省市區縣名稱顯示位置調整

        1. 1.先百度到須要定位到地方的經緯度

1. 2.找到該json文件

1. 3.修改json地圖上顯示名稱的位置座標的"cp"參數，沒有就添加:

eg:{"type":"Feature","properties":{"cp":[117.97,28.45],"name":"上饒市"}

而後省市區縣名字天然就到座標位置去了。

4.ios和安卓適配問題

好比：oppo手機，圖例頂部一小部分被超出隱藏：

思路：

準備一個isUa變量，用於判斷是不是ios仍是安卓環境，

而後設置：

legend的 padding: isUa.ios()?0:5,