echarts 踩坑記

1. x軸類型。

當Y軸 type = value：

　　1.1  x 軸 type = category，series的data類型爲一維數組便可。

　　1.2  不設置 min/max，需再設置 scale: true，才能自動計算最小值保證座標軸刻度的均勻分佈。文檔沒有很明確提到這點，超級坑。scale：是否脫離0值比例。

　　1.3 設置min/max後，scale失效。

X軸 type = time: 

　　1. splitNumber 有效，但echarts仍然會自動計算。

 xAxis  : {
              splitLine: {
                show: true, //x軸網格
                lineStyle:{
                  color: '#f7f7f7',
                }
              },
            splitNumber: dyadicData.length -1,
}        

　　2. axisLabel.showMinLabel: true   顯示最小 tick 的 label， 默認自動斷定（即若是標籤重疊，不會顯示最小 tick 的 label）  showMaxLabel 同。

　　3. axisLable.formatter(value, index){ 刻度標籤的內容，也能夠將 X軸數據格式化成對應的字符串 }

　　4. x軸傳入毫秒數，不一樣瀏覽器格式化結果差別較大。可手動formatter：

type: 'time',
axisLabel  : {
                formatter: function (value, index) {
                  return new Date(value).toLocaleDateString()
                }
              },

 

2. 雙數值軸

　　2.1  series data 爲二維數組： [[x.value[0],  y.value[0]], [x.value[1], y.value[1]]] 。不然數據不展現。（詳見官網實例）

　　2.2 爲何 boundaryGap 失效？ 無論是time仍是value軸。但留給開發的時間很少了，只好曲線救國。給 data 數組首尾插入空字符串。

series : [{
              name     : "隨便什麼名反正會影響legend",
              type     : 'line',
              itemStyle: {color: '#71EAD3'},
              lineStyle: {
                type : 'solid',
                color: '#71EAD3'
              },
              data     : ['', ...dyadicData.slice(0,-1), '']
            },
]