导读：折线图是基础图，适合表示数据的变化趋势，常用于时间序列数据的显示。
作者：美丽的羊
资料来源：大数据dt(id:hzdashuju ) )。
在正式学习之前，请了解ECharts官网提供的便利功能。 此功能可以实时显示代码的效果。 使用方法说明如下。
首先，打开电子图表官网，从“实例”菜单中选择一个图，如图4-1所示。
3359 e charts.Apache.org/exampl-es/zh/editor.html？ c=area-stack
图4-1 ECharts示例
可以看到，左侧显示了选项(ECharts )的具体布局，右侧显示了相应的可视化图。 当我们改变左边的代码时，右边的可视化也实时改变。 如果左边的代码错误，右边不会显示可视化，如图4-2所示。
图4-2 ECharts代码错误时的接口
您可能已经注意到了，可视化设置的大部分参数都在选项中。 这样可以大大减少额外的工作，便于快速调试。 完成满意的可视化后，将option添加到框架中即可。 本论文展示的代码和可视化结果图都是基于这个在线工具实现的。
01基础折线图
要在ECharts中绘制折线图，必须将系列类型设置为line。 代码如下。
option={ xaxis : } type : ' category '，data:['Mon '，' Tue '，' Wed '，' Thu '，' Fri '，' Sat，' sun
图4-3基础折线图
将参数smooth: true添加到series中可获得更平滑的多段线(曲线)。 代码如下。
option={ xaxis : } type : ' category '，data:['Mon '，' Tue '，' Wed '，' Thu '，' Fri '，' Sat，' sun 可视化结果如图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 }]};通过观察可以发现，series中并列了三个字典结构，分别存放A~C产品的数据，我们加入了legend图例，目的是为了区分A～C产品的数据。需要注意的是，A～C产品数据的name字段内容需要和legend中的内容一一对应。
03 堆叠折线图
有时候，我们需要使用堆叠折线图来反映不同项的累加情况，此时可以通过在ECharts的series的每项数据中加入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。
为了方便辨识堆叠总量数据信息，可以在最上层的数据中加入label参数，同时加入tooltip方便查阅数据，修改后的代码如下：
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数据可视化：入门、实战与进阶》，经出版方授权发布。
延伸阅读《ECharts数据可视化》
长按上方二维码了解及购买
转载请联系微信：DoctorData
推荐语：ECharts官方推荐，系统全面、由浅入深、注重实操，带领读者快速从新人到跳跃的冥王星。
欢迎加入《ECharts数据可视化》读者群????
划重点????
干货直达????
什么是数字孪生？有哪些关键能力？
5G重要应用！三大运营商、华为、腾讯都在布局，现在了解还不晚
给2020划重点：最火的10个关键词和28个书单
官方出品！手把手教你在华为HMS平台开发App
更多精彩????
在公众号对话框输入以下关键词
查看更多优质内容！
PPT | 读书 | 书单 | 硬核 | 干货 | 讲明白 | 神操作
大数据 | 云计算 | 数据库 | Python | 可视化
AI | 人工智能 | 机器学习 | 深度学习 | NLP
5G | 中台 | 用户画像 | 1024 | 数学 | 算法 | 数字孪生
据统计，99%的大咖都完成了这个神操作
????