黄楼生活网免费搜集分享生活中实用的生活小常识,生活小窍门,生活小妙招等生活常识百科大全,帮助解决生活中的难题,为您提供多样化信息丰富您的生活.欢迎收藏!
淘宝特卖精选

如何用Echarts制作标准折线图

发布:黄楼生活网2020-12-01 22:29:11分类: 玩转数码

{导读}本文主要讲述关于如何用Echarts制作标准折线图的内容, 本文有359个文字,预计阅读时间2分钟。

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

操作方法

  • 01

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

  • 02

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

  • 03

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

  • 04

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

  • 05

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

  • 06

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

  • 07

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

  • 08

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

以上就是黄楼生活网小编为大家分享的如何用Echarts制作标准折线图「已解决」,希望对大家有所帮助,了解更多问题欢迎关注黄楼生活网!

  • 本文标题地址来源:如何用Echarts制作标准折线图https://www.huangloublog.com/wzsm/24289.html
  • 站长不易,多多少少是点心意

    微信二维码扫码支付支付宝二维码扫码支付
    温馨提示如有转载或引用以上内容之必要,敬请将本文链接作为出处标注,谢谢合作!
    郑重声明本文版权归原作者所有,如有信息标记有误,请第一时间联系我们修改或删除,多谢。
    扫描二维码

    欢迎使用手机扫描访问本站