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

歆诺
7,811 阅读5分钟

项目地址

介绍

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

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

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

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

折线图分析

折线图绘图顺序

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

折线图绘图单元配置表

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

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

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

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

属性名称 含义 说明
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。

折线图实现效果

堆叠面积折线图分析

堆叠面积折线图绘图顺序

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

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

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

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

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

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

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

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

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

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

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

堆叠面积折线图示例代码分析

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

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

堆叠面积折线图实现效果

思考&练习

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