项目地址

介绍

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

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

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

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

折线图分析

折线图绘图顺序

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

折线图绘图单元配置表

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。

折线图实现效果

堆叠面积折线图分析

堆叠面积折线图绘图顺序

设置标题(title)
设置提示(tooltip)
设置图例(legend)
设置工具栏(toolbox)
设置网格(grid)
设置X、Y轴维度及度量
设置区域填充(areaStyle)
设置折线平滑(smooth)
设置坐标轴留白(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则代表折线表现形式为光滑曲线

堆叠面积折线图实现效果

思考&练习

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