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

项目地址

介绍

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

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

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

• 折线图
  • 标题设置(title)
  • 图表自定义组件(toolbox、dataZoom、visualMap)
• 堆叠面积折线图
  • 坐标轴两边留白策略(boundaryGap)
  • 区域面积设置(areaStyle)

折线图分析

折线图绘图顺序

1. 设置X、Y轴及其对应的维度、度量数据
2. 设置标题
3. 设置工具栏组件
4. 设置区域缩放组件
5. 设置视觉映射组件

折线图绘图单元配置表

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

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

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

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

属性名称	含义	说明
text	主标题文本