使用百度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组合成了一个大的图表，分时图已经基本成型，接下来的章节将对分时图进行全面的美化，并使用网络上的真实数据来展示我们的分时图。