ECharts常用图表折线图

黑马程序员官方

已于 2022-12-12 14:44:55 修改

阅读量1.2w

点赞数 6

分类专栏： 2023年前端—入门到精通文章标签： echarts 前端 javascript

于 2022-12-02 16:40:40 首次发布

本文链接：https://blog.csdn.net/itcast_cn/article/details/128149575

版权

2023年前端—入门到精通专栏收录该内容

323 篇文章 241 订阅

订阅专栏

1.图表2 折线图

1.1.折线图的实现步骤

步骤1 ECharts 最基本的代码结构

此时 option 是一个空空如也的对象

步骤2 准备 x 轴的数据

var xDataArr = [ '1 月 ' , '2 月 ' , '3 月 ' , '4 月 ' , '5 月 ' , '6 月 ' , '7 月 ' , '8 月 ' , '9 月 ' , '10 月 ' , '11 月 ' , '12 月 ' ]

步骤3 准备 y 轴的数据

var yDataArr = [ 3000 , 2800 , 900 , 1000 , 800 , 700 , 1400 , 1300 , 900 , 1000 , 800 , 600 ]

步骤4 准备 option , 将 series 中的 type 的值设置为: line

最终的效果如下:

1.2.折线图的常见效果

标记

最大值\最小值 markPoint

var option = {

        series : [

                {

                        ......

                        markPoint : {

                                data : [

                                        {

                                                type : 'max' ,

                                                name : ' 最大值 '

                                        }, {

                                                type : 'min' ,

                                                name : ' 最小值 '

                                        }

                                ]

                        }

                }

        ]

}

平均值 markLine

标注区间 markArea

线条控制

平滑线条 smooth

线条样式 lineStyle

填充风格 areaStyle

紧挨边缘 boundaryGap

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

缩放, 脱离0值比例

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

var yDataArr = [ 3005 , 3003 , 3001 , 3002 , 3009 , 3007 , 3003 , 3001 , 3005 ,

3004 , 3001 , 3009 ] // 此时 y 轴的数据都在 3000 附近 , 每个数之间相差不多

var option = {

        xAxis : {

                type : 'category' ,

                data : xDataArr

        },

        yAxis : {

                type : 'value'

        },

        series : [

                {

                        type : 'line' ,

                        data : yDataArr

                }

        ]

}