当前位置:常识集 > 数码游戏 > IT技术 > 如何用Echarts制作标准折线图
手机版

如何用Echarts制作标准折线图

来源:常识集 阅读:2.85W 次

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

操作方法

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

如何用Echarts制作标准折线图

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

如何用Echarts制作标准折线图 第2张

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

如何用Echarts制作标准折线图 第3张

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

如何用Echarts制作标准折线图 第4张

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

如何用Echarts制作标准折线图 第5张

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

如何用Echarts制作标准折线图 第6张

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

如何用Echarts制作标准折线图 第7张

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

如何用Echarts制作标准折线图 第8张
本文链接:https://www.changshiji.com/smyx/itjishu/qqrgk.html

Copyright © 2024. 常识集 All right reserved. 浙ICP备20202586号-2

文字美图素材,版权属于原作者。部分文章内容由网友提供推送时因种种原因未能与原作者联系上,若涉及版权问题,敬请原作者联系我们,立即处理。