echarts之簡單的入門——【一】做個帶時間軸的柱狀統計圖

百度Echarts

　　官網首頁  http://echarts.baidu.com/

　　配置項手冊 http://echarts.baidu.com/option.html#title

　　GL配置項手冊 http://echarts.baidu.com/option-gl.html#globe

　　EchartsAPI手冊  http://echarts.baidu.com/api.html#echarts

　　官方實例    http://echarts.baidu.com/examples/

　　五分鍾上手echarts 

　　http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

選擇實例

　　我一般直接從官方實例中選擇相符自己需要的直接改動,畢竟不是前端,好吧,主要是自己懶~

　　不是說做柱狀圖,一定要從柱狀圖中選擇的,可以從任意實例中選擇基本符合自己的然后修改即可

　　

 

修改實例

時間軸

dataZoom: [{
            startValue: '2014-06-01'
        }, {
            type: 'inside'
        }],

 

 

  改為柱狀圖

　　修改type類型然后運行即可看到對應效果

series: {
            name: 'Beijing AQI',
            type: 'line', //line為折線圖 bar為柱狀圖
            data: data.map(function (item) {
                return item[1];
            }),

 

數據格式

　　上面基本改完,圖表滿足了我們的需求,但是數據不是我們的啊,我們要看下他的數據格式是怎樣的~

　　在編輯區域我們可以很明顯的看到數據為json類型,接下來我們需要查看的是json是數據還是對象

　　

　　

最好新開一個窗口,因為在修改的窗口刷新過之后我們更改的樣式就會被還原~

　　鼠標右擊--->檢查--->network--->XHR

　　

 看到我們需要的數據,可以雙擊新窗口打開也可以直接單擊然后查看Response(原本的)或者Preview(格式化的)

 

 

得到json的數據格式如下

[["2000-06-05",116],["2000-06-06",129],["2000-06-07",135]

 

 只要我們把我們的數據格式化它需要的即可

 比如我想知道每天注冊的人數

 只要獲取到每天開始和結束的時間戳,然后統計在這個時間戳范圍內注冊的人數即可

獲取每天時間戳,每周時間戳,每月時間戳和每年時間戳　

效果如下