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), '']
            },
]