上一章簡單的介紹了一下分時圖的構成，其實就是折線圖跟柱狀圖的組成。本來這章打算是把分時圖做完，然后再寫一章來進行美化和總結，但是仔細觀察了一下，發現其實東西還是有點多的。分時圖的圖表做完后，還要去美化，調整分數圖的各種提示信息，比如鼠標放進去的時候會有一個十字，一個信息框，以及各個刻度的詳細刻度值，等等。所以這章我們要的是把分時圖圖表全部畫出來，美化、提示信息則放到接下來的章節。開始寫代碼。
一．使用echarts的grid屬性，把多個圖表整合成一個圖表。上一章末尾，我們用PS工具把兩個圖表放在一起，形成了一個初步的分時圖的樣子，這次我們用代碼來把多個圖表整合到一塊，這就要使用到echarts的grid屬性了。 echarts的grid屬性，官方文檔是這么寫的：直角坐標系內繪圖網格，單個 grid 內最多可以放置上下兩個 X 軸，左右兩個 Y 軸。可以在網格上繪制折線圖，柱狀圖，散點圖（氣泡圖）。也就是說我們可以把一個大的圖表拆成多個圖表來進行組合，每一個grid就是一個單獨圖表，而我們的分時圖恰好是多個圖表組成，所以非常適合使用grid來實現。
如圖，我們把分時圖拆成4個grid來實現，為什么是4個grid，后面會提到。（提示：grid可以根據個人習慣來放置）
二.我們先使用上一節的折線圖、柱狀圖例子，來生成4個grid，並且把它們組合到一起。grid屬性可以是一個對象，也可以是一個數組，因為我們有4個圖表，所以使用數組的方式來實現。
// echarts折線圖的配置項 var option = { // grid grid:[ // 第一個grid { top:10,// 圖表的外邊距 height:200,// 圖表的高度 width:'50%',//因為是左右各一個圖表，使用百分比的方式顯得更方便， }, // 第二個grid，第二個圖表是在第一個圖表的下方，所以要把它定位到底部 { top:210,//設置上方的外邊距是第一個圖表的高度再加10，使用top是方便我們調整下方grid的高度 width:'50%',// 寬度與第一個圖表一個大 height:100 } ], // 多個圖表則會存在對個x軸y軸，所以這里的配置我們也換成數組的方式 // x軸配置， xAxis:[ // 第一個grid的x軸屬性 { // 告訴echarts，這個第一個grid的x軸 gridIndex:0, type: 'category', // x軸顯示的數據 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, // 第二個grid的x軸屬性 { // 告訴echarts，這個第一個grid的x軸 gridIndex:1, type: 'category', // x軸顯示的數據 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] } ], // y軸配置 yAxis: [ // 第一個grid的y軸屬性 { gridIndex:0, type: 'value' }, // 第二個grid的y軸屬性 { gridIndex:1, type: 'value' } ], // 數據可以通過xAxisIndex，yAxisIndex屬性，來指定是哪個grid的數據 series: [{ xAxisIndex:0, yAxisIndex:0, data: [1, 5, 5, 8, 2, 9, 4], type: 'line' },{ xAxisIndex:1, yAxisIndex:1, data: [1, 5, 5, 8, 2, 9, 4], type: 'bar' }] };
這是效果圖
這個是2個grid的組成，同理我們復制一下grid，修改一下配置，就可以變成4個grid的組合。
// echarts折線圖的配置項 var option = { // grid grid:[ // 第一個grid { top:10,// 圖表的外邊距 height:200,// 圖表的高度 left:0, width:'50%',//因為是左右各一個圖表，使用百分比的方式顯得更方便， }, // 第二個grid，第二個圖表是在第一個圖表的下方，所以要把它定位到底部 { top:210,//設置上方的外邊距是第一個圖表的高度再加10，使用top是方便我們調整下方grid的高度 left:0, width:'50%',// 寬度與第一個圖表一個大 height:100 }, // 第三個grid，第三個圖表是在第一個圖表的右方，所以要把它定位到右方 { top:10,// 圖表的外邊距 left:'50%',//設置右邊圖表的左邊距是第一個圖表的大小，達到定位右邊的效果 width:'50%',// 寬度與第一個圖表一個大 height:200 }, // 第四個grid，第四個圖表是在第三個圖表的下方，所以要把它定位到底部 { top:210,//設置上方的外邊距是第三個圖表的高度再加10，使用top是方便我們調整下方grid的高度 left:'50%',//設置右邊圖表的左邊距是第三個圖表的大小，達到定位右邊的效果 width:'50%',// 寬度與第一個圖表一個大 height:100 } ], // 多個圖表則會存在對個x軸y軸，所以這里的配置我們也換成數組的方式 // x軸配置， xAxis:[ // 第一個grid的x軸屬性 { // 告訴echarts，這個第一個grid的x軸 gridIndex:0, type: 'category', // x軸顯示的數據 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, // 第二個grid的x軸屬性 { // 告訴echarts，這個第一個grid的x軸 gridIndex:1, type: 'category', // x軸顯示的數據 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, // 第三個grid的x軸屬性 { // 告訴echarts，這個第一個grid的x軸 gridIndex:2, type: 'category', // x軸顯示的數據 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, // 第三個grid的x軸屬性 { // 告訴echarts，這個第一個grid的x軸 gridIndex:3, type: 'category', // x軸顯示的數據 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] } ], // y軸配置 yAxis: [ // 第一個grid的y軸屬性 { gridIndex:0, type: 'value' }, // 第二個grid的y軸屬性 { gridIndex:1, type: 'value' }, // 第三個grid的y軸屬性 { gridIndex:2, type: 'value' }, // 第四個grid的y軸屬性 { gridIndex:3, type: 'value' } ], // 數據可以通過xAxisIndex，yAxisIndex屬性，來指定是哪個grid的數據 series: [{ xAxisIndex:0, yAxisIndex:0, data: [1, 5, 5, 8, 2, 9, 4], type: 'line' },{ xAxisIndex:1, yAxisIndex:1, data: [1, 5, 5, 8, 2, 9, 4], type: 'bar' },{ xAxisIndex:2, yAxisIndex:2, data: [1, 5, 5, 8, 2, 9, 4], type: 'line' },{ xAxisIndex:3, yAxisIndex:3, data: [1, 5, 5, 8, 2, 9, 4], type: 'bar' }] };
效果圖
到這一步，4個grid已經全部出來了，接下來就是要去調整圖表的樣式了。
三.現在我們看到左邊的刻度值是不見了的，圖形的第一個點和邊框是有一定的距離，右邊圖表的刻度值應該是要顯示在右邊的，而且上方的兩個折線圖圖表的x軸刻度是不應該顯示的，所以我們先調整一下。
調整這個樣式，主要是針對x軸y軸的屬性進行調整。
1.左邊的刻度不顯示，是因為我們把grid的left值設置成了0，沒有留給刻度值顯示的位置，所以把左邊圖表的left值設置得大一些。left值變大后，會發現右邊的圖表跟左邊的圖表重疊了，因為右邊的圖表的left值是第一個圖表的寬度，但是圖表的寬度不包括刻度值的寬度，這兩個是獨立的，所以右邊圖表的left值，應該是 第一個圖表的width+第一個圖表的left值，為了方便，我們把第一個圖表的left修改成10%，寬度是40%，這樣一來，右邊的圖表的left值就可以是50%了，但是寬度要修改成40%，（個人建議：使用圖表div的寬度，來計算各個圖表的left值,width值，而不是使用百分比）。
// grid grid:[ // 第一個grid { top:10,// 圖表的外邊距 height:200,// 圖表的高度 left:'10%', width:'40%',//因為是左右各一個圖表，使用百分比的方式顯得更方便， }, // 第二個grid，第二個圖表是在第一個圖表的下方，所以要把它定位到底部 { top:210,//設置上方的外邊距是第一個圖表的高度再加10，使用top是方便我們調整下方grid的高度 left:'10%', width:'40%',// 寬度與第一個圖表一個大 height:100 }, // 第三個grid，第三個圖表是在第一個圖表的右方，所以要把它定位到右方 { top:10,// 圖表的外邊距 left:'50%',//設置右邊圖表的左邊距是第一個圖表的大小，達到定位右邊的效果 width:'40%',// 寬度與第一個圖表一個大 height:200 }, // 第四個grid，第四個圖表是在第三個圖表的下方，所以要把它定位到底部 { top:210,//設置上方的外邊距是第三個圖表的高度再加10，使用top是方便我們調整下方grid的高度 left:'50%',//設置右邊圖表的左邊距是第三個圖表的大小，達到定位右邊的效果 width:'40%',// 寬度與第一個圖表一個大 height:100 } ],
效果圖
這樣左邊的刻度就出來了。接下來我們把右邊圖表的刻度，換到右邊來顯示，x軸y軸有一個postion屬性，x軸的postion屬性可以設置x軸顯示在下方還是上方，y軸的position屬性可以設置y軸顯示在左邊還是右邊；上方的折線圖的x軸刻度，是不需要顯示的，x軸的axisTick，axisLabel屬性是配置刻度的，把這兩個屬性show屬性設置成false即可，所以修改代碼。
// 多個圖表則會存在對個x軸y軸，所以這里的配置我們也換成數組的方式 // x軸配置， xAxis:[ // 第一個grid的x軸屬性 { // 告訴echarts，這個第一個grid的x軸 gridIndex:0, // x軸的刻度 axisTick:{show:false}, // x軸的刻度值 axisLabel:{show:false}, type: 'category', // x軸顯示的數據 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, // 第二個grid的x軸屬性 { // 告訴echarts，這個第一個grid的x軸 gridIndex:1, type: 'category', // x軸顯示的數據 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, // 第三個grid的x軸屬性 { // 告訴echarts，這個第一個grid的x軸 gridIndex:2, // x軸的刻度 axisTick:{show:false}, // x軸的刻度值 axisLabel:{show:false}, type: 'category', // x軸顯示的數據 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, // 第三個grid的x軸屬性 { // 告訴echarts，這個第一個grid的x軸 gridIndex:3, type: 'category', // x軸顯示的數據 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] } ], // y軸配置 yAxis: [ // 第一個grid的y軸屬性 { gridIndex:0, type: 'value' }, // 第二個grid的y軸屬性 { gridIndex:1, type: 'value' }, // 第三個grid的y軸屬性 { position:'right', gridIndex:2, type: 'value' }, // 第四個grid的y軸屬性 { position:'right', gridIndex:3, type: 'value' } ],
效果圖
接下來，我們把再進行一些美化，圖形的第一個圖形跟左邊邊框是有空隙的，要把這個空隙給取消掉，使用x軸的屬性boundaryGap來配置是否留有空隙；底部的柱狀圖也要往下移一移，將top值加大，使用barWidth屬性，設置柱狀圖的柱子也要變得苗條一些；折線圖的顏色要統一起來，把線條上的圓點去掉，而且線條看起來很僵硬，要設置得順滑一些。修改后的代碼如下：
// echarts折線圖的配置項 var option = { // grid grid:[ // 第一個grid { top:10,// 圖表的外邊距 height:200,// 圖表的高度 left:'10%', width:'40%',//因為是左右各一個圖表，使用百分比的方式顯得更方便， }, // 第二個grid，第二個圖表是在第一個圖表的下方，所以要把它定位到底部 { top:240,//設置上方的外邊距是第一個圖表的高度再加10，使用top是方便我們調整下方grid的高度 left:'10%', width:'40%',// 寬度與第一個圖表一個大 height:100 }, // 第三個grid，第三個圖表是在第一個圖表的右方，所以要把它定位到右方 { top:10,// 圖表的外邊距 left:'50%',//設置右邊圖表的左邊距是第一個圖表的大小，達到定位右邊的效果 width:'40%',// 寬度與第一個圖表一個大 height:200 }, // 第四個grid，第四個圖表是在第三個圖表的下方，所以要把它定位到底部 { top:240,//設置上方的外邊距是第三個圖表的高度再加10，使用top是方便我們調整下方grid的高度 left:'50%',//設置右邊圖表的左邊距是第三個圖表的大小，達到定位右邊的效果 width:'40%',// 寬度與第一個圖表一個大 height:100 } ], // 多個圖表則會存在對個x軸y軸，所以這里的配置我們也換成數組的方式 // x軸配置， xAxis:[ // 第一個grid的x軸屬性 { // 告訴echarts，這個第一個grid的x軸 gridIndex:0, // 坐標軸是否留白 boundaryGap:false, // x軸的刻度 axisTick:{show:false}, // x軸的刻度值 axisLabel:{show:false}, type: 'category', // x軸顯示的數據 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, // 第二個grid的x軸屬性 { // 告訴echarts，這個第一個grid的x軸 gridIndex:1, // 坐標軸是否留白 boundaryGap:false, type: 'category', // x軸顯示的數據 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, // 第三個grid的x軸屬性 { // 告訴echarts，這個第一個grid的x軸 gridIndex:2, // 坐標軸是否留白 boundaryGap:false, // x軸的刻度 axisTick:{show:false}, // x軸的刻度值 axisLabel:{show:false}, type: 'category', // x軸顯示的數據 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, // 第三個grid的x軸屬性 { // 告訴echarts，這個第一個grid的x軸 gridIndex:3, // 坐標軸是否留白 boundaryGap:false, type: 'category', // x軸顯示的數據 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] } ], // y軸配置 yAxis: [ // 第一個grid的y軸屬性 { gridIndex:0, type: 'value' }, // 第二個grid的y軸屬性 { gridIndex:1, type: 'value' }, // 第三個grid的y軸屬性 { position:'right', gridIndex:2, type: 'value' }, // 第四個grid的y軸屬性 { position:'right', gridIndex:3, type: 'value' } ], // 數據可以通過xAxisIndex，yAxisIndex屬性，來指定是哪個grid的數據 series: [ // 第一個圖表的數據 { // 平滑曲線 smooth:true, // 是否顯示折線上的圓點 symbol:'none', // 線條顏色 lineStyle:{ color:"#0983F8" }, xAxisIndex:0, yAxisIndex:0, data: [1, 5, 5, 8, 2, 9, 4], type: 'line' }, // 第二個圖表的數據 { xAxisIndex:1, yAxisIndex:1, // 柱狀圖柱子寬度 barWidth:5, data: [1, 5, 5, 8, 2, 9, 4], type: 'bar' }, // 第三個圖表的數據 { // 平滑曲線 smooth:true, // 是否顯示折線上的圓點 symbol:'none', // 線條顏色 lineStyle:{ color:"#0983F8" }, xAxisIndex:2, yAxisIndex:2, data: [4, 5, 5, 8, 2, 9, 4], type: 'line' }, // 第四個圖表的數據 { xAxisIndex:3, yAxisIndex:3, // 柱狀圖柱子寬度 barWidth:5, data: [1, 5, 5, 8, 2, 9, 4], type: 'bar' } ] };
效果圖
本章節先到這里吧，這次我們用grid屬性把4個grid組合成了一個大的圖表，分時圖已經基本成型，接下來的章節將對分時圖進行全面的美化，並使用網絡上的真實數據來展示我們的分時圖。