Echarts中線狀圖的X軸坐標標簽傾斜樣式

在echarts中應用線狀圖時可以展現很多的數據，而當數據量過多的時候，X軸的坐標就會顯示不全，因為整個圖形的寬度是一定的，X軸的全長是一定的

http://www.cnblogs.com/phpgcs

比如下面的例子中 X軸是常用的日期格式 20140508 這樣子

而經過簡單的配置，可以達到一個理想的效果，如下

其中相關的需要配置的option參數為：

formatDate:function(datestring){
    if(datestring.length!=8) return;
    return datestring.substring(2,4)+'/'+datestring.substring(4,6)+'/'+datestring.substring(6,8);
},

xAxis : [
    {
        axisLabel: {
            rotate: 60,
        },
        data : function(){
            var list = [];
            for (var x in data) {
                if (x != '')
                list.push(App.formatDate(x));
            }
            return list;
        }()
    }
],
grid: {
    x: 40,
    x2: 20,
    y2: 100,
},

其中

axisLabel rotate: 60度角是傾斜的控制所在

grid: y2:100 可以控制 X軸跟Zoom控件之間的間隔，避免以為傾斜后造成 label重疊到zoom上

list.push(App.formatDate(x));是處理 20140508 -> 140508