關於Echarts的填坑之旅

正如標題所說，這是Echarts的一遍填坑，若是你是一些echart的配置的話能夠閱讀
http://echarts.baidu.com/opti...的官網配置信息。今天我想給你們分享的是一些我前段時間從highchart改echart的時候所遇到的一些問題。但願能對你們有用。

一、echart 在使用的時候標籤必須明確的定義其高度，不能讓其自適應，不然會出現顯示不出來的狀況！

<div id="echart" style="width:100%;height:300px;"></div>

二、關於echart中Y座標不徹底等比例顯示問題

當你遇到Y軸不是等分顯示的時候，這時候你就應該看看你Y座標配置中是否配置了max這個選項，當配置max這一項的時候，Y座標的最大顯示數會以你配置的最大值做爲結束，也就可能出現Y座標不能徹底等分顯示的狀況

yAxis :{
    type: 'value',
    axisLine: {
        show: false
    },
    axisTick: {
        show: false,
    },
    scale: true,
    splitLine:{ 
        show:true,
    },
    splitNumber: 3,
    position:'left',
    //max:_self.value,
    axisLabel: {
        inside: false,
        interval: 0,
        formatter: function(value, index) {
            return value;
        }
    }
}

三、關於X軸type類型爲time時如何自定義時間軸
有時候在項目中咱們可能爲遇到將X軸設置爲時間軸的時候，可是又想自定義必定的規則來達到想要的效果。那麼怎麼辦。我想echart官網中關於time的動態數據案例說的也夠詳細（http://echarts.baidu.com/demo...），可是它們的並非我想要的格式，這時候怎麼辦，咱們能夠經過max和min和達到設置X座標的效果，經過interval來設置間距。

xAxis :{
    type:'time',
    axisTick: { //座標軸刻度相關設置
        alignWithLabel: true,
        lineStyle: {
            color: '#ccc'
        }
    },
    axisLine: { //座標軸軸線相關設置
        lineStyle: {
            color: '#ccc'
        }
    },
    axisLabel: {    //座標軸刻度標籤的相關設置
        textStyle: {
            color: "#666"
        }
    },
    splitLine: {
        show: false
    },
    minInterval: 24 * 3600 * 1000,
    interval: 24 * 3600 * 1000 * tickInterval,
    min:_self.order_chart_data.order_chart_xAxis[0],
    max:_self.order_chart_data.order_chart_xAxis[_self.order_chart_data.order_chart_xAxis.length-1]
},

效果：

時間選擇爲1天時，圖表並以小時爲單位更新數據：

時間選擇爲大於1天時，圖表並以天爲單位更新數據：

當設置X軸type類型爲time的時候還有幾點要注意的時：

(1)、x軸配置中不用配置data屬性
(2)、series中的數據類型data屬性要嚴格按照下面這種格式書寫數據格式（不然數據會加載不出來）

    series : {
        name: 'echarts',
        yAxisIndex: 0,
        type:'line',
        data : {
            name:_self.order_chart_data.order_chart_xAxis[i],
            value: [_self.order_chart_data.order_chart_xAxis[i],yAxis_one[i]]
        },
        showSymbol: false,
        itemStyle: {
            normal: {
                color: '#5AAAEA',
                lineStyle: {
                    color: '#5AAAEA'
                }
            }
        }
    }

要說的就這麼多，總的來講echart相對來講仍是比較簡單的，官網的案例基本能夠知足所有須要。但願以上問題對你們能有幫助！！！