ECharts常用图表折线图

黑马程序员官方

企业官方账号

2022-12-23 17:41:36

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

                }

        ]

}