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

迷南。 2022-10-01 05:56 1561阅读 0赞

## [项目地址][Link 1] ##

### 介绍 ###

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

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

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

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

### 折线图分析 ###

#### 折线图绘图顺序 ####

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

#### 折线图绘图单元配置表 ####

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

<table> 
 <thead> 
  <tr> 
   <th style="text-align:center;">绘图单元</th> 
   <th style="text-align:center;">配置项</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="text-align:center;">标题</td> 
   <td style="text-align:center;"><a href="https://link.juejin.im?target=https%3A%2F%2Fecharts.baidu.com%2Foption.html%23title" rel="nofollow">title</a></td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">工具栏</td> 
   <td style="text-align:center;"><a href="https://link.juejin.im?target=https%3A%2F%2Fecharts.baidu.com%2Foption.html%23toolbox" rel="nofollow">toolbox</a></td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">数据缩放</td> 
   <td style="text-align:center;"><a href="https://link.juejin.im?target=https%3A%2F%2Fecharts.baidu.com%2Foption.html%23dataZoom-inside" rel="nofollow">dataZoom</a></td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">视觉映射</td> 
   <td style="text-align:center;"><a href="https://link.juejin.im?target=https%3A%2F%2Fecharts.baidu.com%2Foption.html%23visualMap" rel="nofollow">visualMap</a></td> 
  </tr> 
 </tbody> 
</table>

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

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

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

<table> 
 <thead> 
  <tr> 
   <th style="text-align:center;">属性名称</th> 
   <th style="text-align:center;">含义</th> 
   <th style="text-align:center;">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="text-align:center;">top、right、bottom、left</td> 
   <td style="text-align:center;">工具栏距离容器各方向距离</td> 
   <td style="text-align:center;">无</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">feature</td> 
   <td style="text-align:center;">各工具配置项</td> 
   <td style="text-align:center;">设置工具的具体配置，还可以自定义工具</td> 
  </tr> 
 </tbody> 
</table>

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

<table> 
 <thead> 
  <tr> 
   <th style="text-align:center;">属性名称</th> 
   <th style="text-align:center;">含义</th> 
   <th style="text-align:center;">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="text-align:center;">type</td> 
   <td style="text-align:center;">区域缩放组件类型</td> 
   <td style="text-align:center;">inside:可以直接操作图表缩放；slider：只能滑动组件调整缩放</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">startValue</td> 
   <td style="text-align:center;">数据窗口范围的起始数值</td> 
   <td style="text-align:center;">如果设置start，则startValue失效</td> 
  </tr> 
 </tbody> 
</table>

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

<table> 
 <thead> 
  <tr> 
   <th style="text-align:center;">属性名称</th> 
   <th style="text-align:center;">含义</th> 
   <th style="text-align:center;">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="text-align:center;">type</td> 
   <td style="text-align:center;">类型</td> 
   <td style="text-align:center;">continuous:连续型;piecewise:分段型</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">pieces</td> 
   <td style="text-align:center;">分段型的每一段的范围</td> 
   <td style="text-align:center;">min:最小;max：最大;lt:小于;gt:大于;lte:小于等于;gte:大于等于</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">outOfRange</td> 
   <td style="text-align:center;">范围外的视觉元素</td> 
   <td style="text-align:center;">可选：类型、大小、颜色、透明度、色调...</td> 
  </tr> 
 </tbody> 
</table>

#### 折线图示例代码分析 ####

标题：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。

#### 折线图实现效果 ####

### 堆叠面积折线图分析 ###

#### 堆叠面积折线图绘图顺序 ####

1.  设置标题(title)
2.  设置提示(tooltip)
3.  设置图例(legend)
4.  设置工具栏(toolbox)
5.  设置网格(grid)
6.  设置X、Y轴维度及度量
7.  设置区域填充(areaStyle)
8.  设置折线平滑(smooth)
9.  设置坐标轴留白(boundaryGap)

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

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

<table> 
 <thead> 
  <tr> 
   <th style="text-align:center;">绘图单元</th> 
   <th style="text-align:center;">配置项</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="text-align:center;">区域填充</td> 
   <td style="text-align:center;"><a href="https://link.juejin.im?target=https%3A%2F%2Fwww.echartsjs.com%2Foption.html%23series-line.areaStyle" rel="nofollow">areaStyle</a></td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">平滑曲线</td> 
   <td style="text-align:center;"><a href="https://link.juejin.im?target=https%3A%2F%2Fwww.echartsjs.com%2Foption.html%23series-line.smooth" rel="nofollow">smooth</a></td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">坐标轴留白</td> 
   <td style="text-align:center;"><a href="https://link.juejin.im?target=https%3A%2F%2Fwww.echartsjs.com%2Foption.html%23xAxis.boundaryGap" rel="nofollow">boundaryGap</a></td> 
  </tr> 
 </tbody> 
</table>

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

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

<table> 
 <thead> 
  <tr> 
   <th style="text-align:center;">属性名称</th> 
   <th style="text-align:center;">含义</th> 
   <th style="text-align:center;">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="text-align:center;">color</td> 
   <td style="text-align:center;">填充颜色</td> 
   <td style="text-align:center;">支持rgb、16进制</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">origin</td> 
   <td style="text-align:center;">图形区域的起始位置</td> 
   <td style="text-align:center;">auto:坐标轴线到数据间、start坐标轴底部到数据间、end坐标轴顶部到数据间</td> 
  </tr> 
 </tbody> 
</table>

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

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

#### [堆叠面积折线图示例代码分析][Link 2] ####

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

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

#### 堆叠面积折线图实现效果 ####

### 思考&练习 ###

1.  如何自定义工具栏
2.  视觉映射组件切换为连续型
3.  区域缩放设置为内置型
4.  度量轴范围留白策略如何设置

转载于:https://juejin.im/post/5cc5be8a518825253f4a5aa6

[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fa244784740%2Fecharts-study
[Link 2]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fa244784740%2Fecharts-study%2Fblob%2Fmaster%2Fsrc%2Fcomponents%2FstackLine.vue