Echarts数据可视化：图表篇（2）—— 折线图、堆叠面积折线图-白红宇

介绍

折线图是用折线将各个数据点连接起来的图表，一般用于展示数据变化的趋势。

区域图则是在折线图的基础上，将指定的区域填充上颜色

通过实现折线图、堆叠区域折线图的两个图表。我们会学习到以下内容

折线图
- 标题设置(title)
- 图表自定义组件(toolbox、dataZoom、visualMap)

堆叠面积折线图
- 坐标轴两边留白策略(boundaryGap)
- 区域面积设置(areaStyle)

折线图分析

折线图绘图顺序

设置X、Y轴及其对应的维度、度量数据

设置标题

设置工具栏组件

设置区域缩放组件

设置视觉映射组件

折线图绘图单元配置表

X、Y轴已经在柱状图中学习过，在本示例中设置步骤一致，不做赘述

绘图单元	配置项
标题
工具栏
数据缩放
视觉映射

折线图绘图单元配置表分析

标题组件包含主标题与副标题，用于描述图表的基本信息。对应常用属性及说明如下：

属性名称	含义	说明
text	主标题文本	支持用\n换行
textStyle	主标题样式	无

工具栏组件内置了一些对图表的操作，分别为导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。对应常用属性及说明如下：

属性名称	含义	说明
top、right、bottom、left	工具栏距离容器各方向距离	无
feature	各工具配置项	设置工具的具体配置，还可以自定义工具

区域缩放组件，可以关注指定范围的数据。扩展了图表的可视范围。对应常用属性及说明如下：

属性名称	含义	说明
type	区域缩放组件类型	inside:可以直接操作图表缩放；slider：只能滑动组件调整缩放
startValue	数据窗口范围的起始数值	如果设置start，则startValue失效

视觉映射组件，用于将数据映射到视觉元素（图元图形类别、颜色、大小...）。对应常用属性及说明如下：

属性名称	含义	说明
type	类型	continuous:连续型;piecewise:分段型
pieces	分段型的每一段的范围	min:最小;max：最大;lt:小于;gt:大于;lte:小于等于;gte:大于等于
outOfRange	范围外的视觉元素	可选：类型、大小、颜色、透明度、色调...

折线图示例代码分析

let chart = echarts.init(this.$refs.chart);let option = {    title: {        text: 'Beijing AQI'    },    tooltip: {        trigger: 'axis'    },    xAxis: {        data: lineData.map(function (item) {            return item[0];        })    },    yAxis: {        splitLine: {            show: false        }    },    toolbox: {        left: 'center',        feature: {            restore: {},            saveAsImage: {}        }    },    dataZoom: [{        startValue: '2014-06-01'    }, {        type: 'inside'    }],    visualMap: {        pieces: [{            gt: 0,            lte: 50,            color: '#096'        }, {            gt: 50,            lte: 100,            color: '#ffde33'        }, {            gt: 100,            lte: 150,            color: '#ff9933'        }, {            gt: 150,            lte: 200,            color: '#cc0033'        }, {            gt: 200,            lte: 300,            color: '#660099'        }, {            gt: 300,            color: '#7e0023'        }],        outOfRange: {            color: '#999'        }    },    series: {        name: 'Beijing AQI',        type: 'line',        data: lineData.map(function (item) {            return item[1];        })    }}chart.setOption(option);复制代码

标题：title.text设置的内容为Beijing AQI，并未设置标题位置等样式信息。默认显示在左上角

提示：tooltip.trigger设置为axis，当鼠标悬浮到坐标轴区域时，会显示默认的提示信息

X、Y轴与之前的图表一致，不做额外分析

工具栏：toolbox.left设置为center，表示工具栏显示位置为水平方向的居中位置。toolbox.feature中包含restore与saveAsImage选项，提供了重置图表、保存为图片的功能

区域缩放：dataZoom[0].startValue设置为2014-06-01，设置了图表范围的起始值。dataZoom[1].type设置为inside意味着图表可以使用鼠标/触摸板直接缩放图表

视觉映射：visualMap.pieces设置了pieces数组。说明当前映射组件类型为分段式，数组的每一项分别设置了每一段的范围。gt、lte分别代表大于和小于等于,当前示例分别设置了5个范围。visualMap.outOfRange设置了不在范围内的视觉颜色为#999。

折线图实现效果

堆叠面积折线图分析

堆叠面积折线图绘图顺序

设置标题(title)

设置提示(tooltip)

设置图例(legend)

设置工具栏(toolbox)

设置网格(grid)

设置X、Y轴维度及度量

设置区域填充(areaStyle)

设置折线平滑(smooth)

设置坐标轴留白(boundaryGap)

堆叠面积折线图绘图单元配置表

1-6分别在柱状图和折线图中已经学习过，不做赘述。主要学习7-9

绘图单元	配置项
区域填充
平滑曲线
坐标轴留白

堆叠面积折线图单元配置表分析

区域填充作为折线图的样式补充，可以将折线图设置为填充色。说明如下：

属性名称	含义	说明
color	填充颜色	支持rgb、16进制
origin	图形区域的起始位置	auto:坐标轴线到数据间、start坐标轴底部到数据间、end坐标轴顶部到数据间

平滑曲线是折线图中的特有属性，可以将折线乖点调整为平滑曲线。说明如下：

属性名称	含义	说明
smooth	折线是否平滑	如果是boolean类型，表示是否开启。如果是number型，表示平滑程度，越小表示越接近折线

坐标轴留白代表坐标轴两端的留白策略。维度轴和度量轴的表现方式有所区别。说明如下：

属性名称	含义	说明
boundaryGap	坐标轴两边留白策略	维度轴：坐标轴为boolean指定是否有留白；度量轴：为两个值的数组，分别表示最小值和最大值范围

xAixs中boundaryGap属性设置为ture，并且type为category。说明坐标留白策略的设置对象为维度轴，则体现为X轴两端存在空白区域

series[i]中存在areaStyle对象，表示折线图设置成区域填充图。smooth设置为true则代表折线表现形式为光滑曲线

堆叠面积折线图实现效果

思考&练习

如何自定义工具栏

视觉映射组件切换为连续型

区域缩放设置为内置型

度量轴范围留白策略如何设置