折线图的常见效果

常见效果

标记：

• markPoint：最大值、最小值
• markLine：平均值
• markArea：标注区间

markPoint：最大值、最小值

series:[
                {
                    type:'line',
                    data:yData,
                    markPoint:{
                        data:[
                            {
                                type:'max'
                            },
                            {
                                type:'min'
                            }
                        ]
                    }
                }
            ]

 

 

 markLine：平均值

 markLine:{
                        data:[
                            {
                                type:'average'
                            }
                        ]
                    }

 

 

 markArea：标注区间

 markArea:{
                        data:[
                            [
                                {xAxis:"1月"},
                                {xAxis:'2月'}
                            ],
                            [
                                {xAxis:'7月'},
                                {xAxis:'8月'}
                            ]
                        ]
                    }

 

 

 线条控制

平滑线条  smooth

 series:[
                {
                    type:'line',
                    data:yData,
                    markPoint:{
                        data:[
                            {
                                type:'max'
                            },
                            {
                                type:'min'
                            }
                        ]
                    },
                    markLine:{
                        data:[
                            {
                                type:'average'
                            }
                        ]
                    },
                    markArea:{
                        data:[
                            [
                                {xAxis:"1月"},
                                {xAxis:'2月'}
                            ],
                            [
                                {xAxis:'7月'},
                                {xAxis:'8月'}
                            ]
                        ]
                    },
                    smooth:true,
                }
            ]

 

 

 线条样式  lineStyle

series:[
               .......
             lineStyle:{
                 color:'red'
          }
                
   ]

 

 

 

 lineStyle:{
                        color:'red',
                        type:'dashed'
                    }

 

 

 

 lineStyle:{
                        color:'red',
                        type:'dotted'
                    }

 

 

 填充风格

填充风格  areaStyle

 areaStyle:{
                        color:'blue'
                    }

 

 

 

 紧挨边缘 boundaryGap

boundaryGap 是设置给 x 轴的, 让起点从 x 轴的0坐标开始

我们可以看见此时的起点并不是从x轴的0点开始的

 

 

 在xAxis中配置

xAxis:{
                type:'category',
                data:xData,
                boundaryGap:false
            },

 

 

 我们可以看到此时从x轴0点开始

缩放, 脱离0值比例

如果每一组数据之间相差较少, 且都比0大很多, 那么有可能会出现这种情况

此时如果我们的y轴数据为

 var yData = [3001, 3002, 3003, 3004, 3002, 3001, 3001, 3001, 3003, 3002, 3003,3001]

此时由于数据相差不是很大，在直线图中就会这样显示

 

 

 我们给yAxis设置属性

 yAxis:{
                type:'value',
                scale:true
            },

此时就会按照最小值开始

 

 

 堆叠图

stack属性

堆叠图指的是, 同个类目轴上系列配置相同的 stack 值后，后一个系列的值会在前一个系列的值上
相加
如果在一个图表中有两个或者多个折线图, 在没有使用堆叠配置的时候, 效果如下:

我们在添加一组数据此时会发现，两个折线图会交叉

series:[
                {
                    type:'line',
                    data:yData,
                   
                    markPoint:{
                        data:[
                            {
                                type:'max'
                            },
                            {
                                type:'min'
                            }
                        ]
                    },
                    markLine:{
                        data:[
                            {
                                type:'average'
                            }
                        ]
                    },   
                },
                {
                    type:'line',
                    data:yData2,
                    
                    markPoint:{
                        data:[
                            {
                                type:'max'
                            },
                            {
                                type:'min'
                            }
                        ]
                    },
                    markLine:{
                        data:[
                            {
                                type:'average'
                            }
                        ]
                     }
                }
            ]
        

 

 

 

 使用了堆叠图之后:

 series:[
                {
                    type:'line',
                    data:yData,
                    stack: 'all',  // series中的每一个对象配置相同的stack值, 这个all可以任意写
                    markPoint:{
                        data:[
                            {
                                type:'max'
                            },
                            {
                                type:'min'
                            }
                        ]
                    },
                    markLine:{
                        data:[
                            {
                                type:'average'
                            }
                        ]
                    },   
                },
                {
                    type:'line',
                    data:yData2,
                    stack: 'all',  // series中的每一个对象配置相同的stack值, 这个all可以任意写
                    markPoint:{
                        data:[
                            {
                                type:'max'
                            },
                            {
                                type:'min'
                            }
                        ]
                    },
                    markLine:{
                        data:[
                            {
                                type:'average'
                            }
                        ]
                     }
                }
            ]

 

 

 第二个图在第一图的基础上显示

此时我们在添加一个属性，会识堆叠的效果会更加明显

{
                    type:'line',
                    data:yData,
                    stack: 'all', // series中的每一个对象配置相同的stack值, 这个all可以任意写
                    areaStyle:{} ,
                    markPoint:{
                        data:[
                            {
                                type:'max'
                            },
                            {
                                type:'min'
                            }
                        ]
                    },
                    markLine:{
                        data:[
                            {
                                type:'average'
                            }
                        ]
                    },   
                },
                {
                    type:'line',
                    data:yData2,
                    stack: 'all',  // series中的每一个对象配置相同的stack值, 这个all可以任意写
                    areaStyle:{} ,
                    markPoint:{
                        data:[
                            {
                                type:'max'
                            },
                            {
                                type:'min'
                            }
                        ]
                    },
                    markLine:{
                        data:[
                            {
                                type:'average'
                            }
                        ]
                     }
                }