使用百度echarts仿雪球分时图（二）
上一章简单的介绍了一下分时图的构成，其实就是折线图跟柱状图的组成。本来这章打算是把分时图做完，然后再写一章来进行美化和总结，但是仔细观察了一下，发现其实东西还是有点多的。分时图的图表做完后，还要去美化，调整分数图的各种提示信息，比如鼠标放进去的时候会有一个十字，一个信息框，以及各个刻度的详细刻度值，等等。所以这章我们要的是把分时图图表全部画出来，美化、提示信息则放到接下来的章节。开始写代码。
一．使用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组合成了一个大的图表，分时图已经基本成型，接下来的章节将对分时图进行全面的美化，并使用网络上的真实数据来展示我们的分时图。
