快好知 kuaihz

如何用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文件,就可以看到如下图所示的标准折线图了,点击顶部的折线标题可以隐藏或者显示折线

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:线图  线图词条  何用  何用词条  Echarts  Echarts词条  标准  标准词条  制作  制作词条  
技术

 AE如何制作下雨效果

After Effects是一款视频特效软件,很多电视的特效都来源于After Effects的制作,今天小编就来带领大家进入特效的世界吧。工具/材料Adobe...(展开)

技术

 Windows系统中如何安装Gi...

我们在Windows系统中进行软件编写时,经常会用到Git版本控制工具。那么如何在Windows系统中安装Git呢?下面小编给大家分享一下。工具/材料Git安装...(展开)