如何用Echarts制作标准折线图

我们经常使用Echarts制作各种图表，那么如何运用Echarts制作标准折线图呢？下面小编给大家演示一下。

操作方法

  • 01

    首先打开Sublime Text软件，新建一个HTML文档，并在文档中添加如下图所示的HTML结构

  • 02

    接下来运用scripts标签在HTML中引入echarts的库文件，如下图所示

  • 03

    然后我们在body标签中创建一个div区域用来存放折线图，如下图所示，注意给div设置高度

  • 04

    接下来我们通过echarts的init方法对刚才创建的div区域进行初始化，如下图所示

  • 05

    然后我们设置折线图的参数，包括X，Y坐标轴数据，折线图标题等信息，如下图所示

  • 06

    接下来在series参数中设置折线图所需要的数据，如下图所示，一条折线配置一个大括号

  • 07

    参数和数据设置完毕以后我们调用echarts的setOption方法将内容都填充进折线图展示区域，如下图所示

  • 08

    最后我们运行HTML文件，就可以看到如下图所示的标准折线图了，点击顶部的折线标题可以隐藏或者显示折线

赞 (0)

相关推荐

  • 如何用wps制作累积折线图

    给大家分享一下如何用wps制作累积折线图.这是很多童鞋在作业中会遇到的问题,也是很多办公人员进行数据分析时需要用到的知识.本人是一名学生,觉得这个挺管用的,所以拿出来和大家分享分享哦!(主要是对要考试 ...

  • Excel怎么制作散点图折线图等横坐标纵坐标互换?

    Excel怎么制作散点图折线图等横坐标纵坐标互换? 1.原始坐标图 2.右键线或点,单击"选择数据" 3.选中要修改的数据,单击"编辑" 4.将X轴和Y轴对应的 ...

  • Excel2010怎么制作分层折线图? excel分层折线图的制作方法

    很多朋友在进行数据对比的时候喜欢采用折线图的方式,但是有的时候数据太多的话,就会出现线条杂乱的情况.因此,针对这种情况,小龙给大家一个小方法,利用EXCEL制作一个分层显示的折线图,既有利于对比数据, ...

  • excel根据时间制作不同颜色折线图的方法

    excel根据时间制作不同颜色折线图的方法

    excel是一款电子表格软件.直观的界面.出色的计算功能和图表工具,使它成为最流行的个人计算机数据处理软件.然而,仍然有不少用户对于一些操作不太熟悉,他们问道:怎样才能根据时间制作不同颜色折线图?小编 ...

  • 如何用PS制作GIF动图

    如何用PS制作GIF动图

    今天给大家介绍一下如何用PS制作GIF动图的具体操作步骤.1. 首先打开PS软件,选择工具栏里的铅笔工具,然后依次选择窗口--画笔,画笔笔尖预设中,设置如图效果.2. 接下来是画笔的设置,步骤同第一步 ...

  • 如何用PS制作彩铅图？

    如何用PS制作彩铅图？

    PS是一款功能非常强大的图片编辑软件,有时候在网上看到的彩铅图其实都是通过PS制作出来的,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步打开电脑中的[PS]软件, 并将图一导入. ...

  • 如何用电脑制作GIF动图

    如何用电脑制作GIF动图

    GIF是现在十分常用的图片格式之一,有些用户不知道如何用电脑制作GIF动图,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步根据下图箭头所指,打开电脑中的[迅捷GIF制作工具].2 ...

  • 如何用BarTender制作标准条形码

    BarTender是一款功能强大的软件,那么如何用BarTender制作标准条形码呢?下面小编带您了解一下,希望对您有所帮助. 操作方法 01 打开"BarTender"软件,然后 ...

  • Excel2010 如何制作分层折线图？

    很多朋友在进行数据对比的时候喜欢采用折线图的方式,但是有的时候数据太多的话,就会出现线条杂乱的情况.因此,针对这种情况,小龙给大家一个小方法,利用 EXCEL制作一个分层显示的折线图,既有利于对比数据 ...