手把手教你用ECharts画折线图

最新推荐文章于 2025-03-19 10:47:06 发布

大数据v

最新推荐文章于 2025-03-19 10:47:06 发布

阅读量7.1k

点赞数 4

文章标签：可视化数据可视化编程语言人工智能数据分析

本文链接：https://blog.csdn.net/zw0Pi8G5C1x/article/details/112342756

版权

本文手把手教你使用ECharts绘制基础折线图、多条折线图和堆叠折线图，详细解析配置代码，并提供实时编辑查看效果的工具。适合初学者快速上手数据可视化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

导读：折线图是一种基础图表，适合表示数据的变化趋势，常用于时间序列数据的表示。

作者：王大伟

来源：大数据DT（ID：hzdashuju）

在正式学习之前，先来了解一个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所示。