教你如何用ECharts画折线图
发布时间：2021-06-04 12:46:58 所属栏目：大数据 来源：互联网
导读：在正式学习之前，先来了解一个ECharts官网提供的很好用的功能。该功能可以实时显示代码的效果，使用方法说明如下。 首先，打开ECharts官网，在实例菜单中选择任意一个图，如图4-1所示。 https://echarts.apache.org/exampl-es/zh/editor.html?c=area-stack
|
在正式学习之前，先来了解一个ECharts官网提供的很好用的功能。该功能可以实时显示代码的效果，使用方法说明如下。
首先，打开ECharts官网，在“实例”菜单中选择任意一个图，如图4-1所示。
https://echarts.apache.org/exampl-es/zh/editor.html?c=area-stack
▲图4-1 ECharts实例
可以看到，左边显示的是option，也就是ECharts的具体配置，右边是对应的可视化图。当我们改变左边的代码时，右边的可视化也会实时改变。当左边的代码有误时，右边则不会显示可视化，如图4-2所示。
▲图4-2 ECharts代码有误时的界面
大家应该已经发现了，可视化设置的大部分参数都在option中，这样可以帮我们省去很多额外的工作，方便快速调试。当我们调试出满意的可视化时，将option加入框架中即可。本文演示的代码和可视化结果图都是基于这个在线工具实现的。
01 基础折线图
在ECharts中，绘制折线图需要将series中的type设置为line，代码如下所示：
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'
}]
};
其中，series中的data值序列长度需要和xAxis中的data值序列长度一致，x轴和y轴分别为类别（星期）和数值，可视化效果如图4-3所示。
 （编辑：衡阳站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
