echarts折线图讲解-教你如何用ECharts绘制折线图

在学习之前，我们先了解一下ECharts官网提供的一个非常实用的功能。 该功能可以实时显示代码的疗效，使用方法解释如下。

首先打开ECharts官网，在“实例”菜单中选择任意图表，如图4-1所示。

▲图4-1 ECharts示例

可以看到，左侧显示的是选项，即ECharts的具体配置，右侧显示的是对应的可视化。 当我们更改一侧的代码时，右侧的可视化也会实时更改。 当一侧代码错误时，右侧的可视化将不会显示echarts折线图讲解，如图4-2所示。

▲图4-2 ECharts代码错误时的界面

大家应该已经注意到，可视化设置的大部分参数都在选项中，这可以节省我们很多额外的工作，也方便快速调试。 当我们调试出满意的可视化效果时，只需将选项添加到框架中即可。 本文演示的代码和可视化结果图均基于此在线工具。

01 基本折线图

在ECharts中，要绘制折线图，​​需要将系列中的类型设置为折线，代码如下：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [450, 232, 301, 734, 1090, 830, 500],
        type: 'line'
    }]
};

其中，系列中数据值序列的宽度必须与x轴中数据值序列的宽度一致，x轴和y轴分别是类别（周）和值。 疗效可视化如图4-3所示。

▲图4-3 基本折线图

当我们给级数添加参数 smooth: true 时，我们可以获得更平滑的折线（曲线）。 代码如下所示：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [450, 232, 301, 734, 1090, 830, 500],
        type: 'line',
        smooth: true
    }]
};

可视化结果如图4-4所示。

▲图4-4 基本折线图（曲线）

02 多折线图

到目前为止我们已经学会了如何绘制单个折线图，当然我们还会遇到绘制多个折线图的情况，如图4-5所示。

▲图4-5 多折线图

此时，我们可以对里面的单折线图的代码做一个小小的改动。 具体代码如下：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    legend: {
        data: ['A产品销量', 'B产品销量','C产品销量'],
        left: 'right'
},
    series: [{
        name:'A产品销量',
        data: [550, 232, 311, 764, 1090, 830, 500],
        type: 'line',
        smooth: true
    },
    {
        name:'B产品销量',
        data: [420, 162, 121, 474, 720, 640, 230],
        type: 'line',
        smooth: true
    },
    {
        name:'C产品销量',
        data: [850, 432, 501, 934, 1190, 930, 600],
        type: 'line',
        smooth: true
    }]
};

通过观察，我们可以发现该系列并列了三个字典结构，分别存储A~C产品的数据。 我们添加了legend图例来区分A~C产品的数据。 需要注意的是，A~C产品数据的名称数组的内容需要与图例中的内容一一对应。

03 堆积折线图

有时，我们需要使用堆积折线图来反映不同项目的累积情况。 这时echarts折线图讲解，我们可以为ECharts系列的每个数据项添加stack和areaStyle参数。 可视化结果如图4-6所示。

▲图4-6 堆积折线图

具体实现代码如下：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    legend: {
        data: ['A产品销量', 'B产品销量','C产品销量'],
        left: 'right'
    },
    series: [{
        name:'A产品销量',
        data: [550, 232, 311, 764, 1090, 830, 500],
        type: 'line',
        smooth: true,
        stack: '总量',
        areaStyle: {}
    },
    {
        name:'B产品销量',
        data: [420, 162, 121, 474, 720, 640, 230],
        type: 'line',
        smooth: true,
        stack: '总量',
        areaStyle: {}
    },
    {
        name:'C产品销量',
        data: [850, 432, 501, 934, 1190, 930, 600],
        type: 'line',
        smooth: true,
        stack: '总量',
        areaStyle: {}
    }]
};

其中areaStyle用于对区域进行颜色填充。 如果没有该参数，则该区域不会有填充颜色。 有兴趣的读者可以删除这个参数看看效果。 入栈的顺序是从上到下，与数据的顺序相反。 例如，代码数据中的顺序是ABC，可视化中从上到下的顺序是CBA。

为了方便识别堆叠的数据信息总数，您可以在最上面的数据上添加标签参数，并添加工具提示以方便查看数据。 修改后的代码如下：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    legend: {
        data: ['A产品销量', 'B产品销量','C产品销量'],
        left: 'right'
},
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    series: [{
        name:'A产品销量',
        data: [550, 232, 311, 764, 1090, 830, 500],
        type: 'line',
        smooth: true,
        stack: '总量',
        areaStyle: {}
    },
    {
        name:'B产品销量',
        data: [420, 162, 121, 474, 720, 640, 230],
        type: 'line',
        smooth: true,
        stack: '总量',
        areaStyle: {}
    },
    {
        name:'C产品销量',
        data: [850, 432, 501, 934, 1190, 930, 600],
        type: 'line',
        smooth: true,
        stack: '总量',
        label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },
        areaStyle: {}
    }]
};

可视化结果如图4-7所示。

▲图4-7 堆叠直方图的优化版本

作者简介：王大伟，毕业于华东理工大学，硕士，目前就职于平安金融壹账通，从事数据挖掘算法，擅长ECharts、Python、自然语言处理、数据分析以及采矿和机器学习。 获得微软最有价值专家（MVP）荣誉称号。

本文摘自《ECharts数据可视化：入门、实用、进阶》，经出版社授权发布。