如何用Echarts制作标准折线图
我们经常使用Echarts制作各种图表,那么如何使用Echarts制作标准折线图呢?下面小编给大家展示一下。
操作方法 01
首先打开Sublime Text软件,新建一个HTML文档,将下图所示的HTML结构添加到文档中。
02
接下来,使用scripts标签将echarts的库文件引入HTML,如下图所示。
03
然后我们在body标签中创建一个div区域来存储折线图,如下图所示。注意设置div的高度。
04
接下来,我们通过echarts的init方法初始化刚刚创建的div区域,如下图所示。
05
然后我们设置折线图的参数,包括X,Y坐标轴数据,折线图标题等信息,如下图所示。
06
接下来在series参数中设置折线图需要的数据,如下图所示,一条折线配置一个花括号。
07
设置好参数和数据后,我们调用echarts的setOption方法将内容填充到折线图显示区,如下图所示。
08
最后,当我们运行HTML文件时,我们可以看到如下图所示的标准折线图。单击顶行标题隐藏或显示该行。