如何用Echarts制作标准折线图

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

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

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

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

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

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

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

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

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

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

在使含明用echarts 折线图时,可能会遇到针对不同的数据显示不同的小圆点样式,经过查谈者告看echarts配置项,其中data中有一个value配置项选项,可以单独设置某嫌兆一个数据的显示样式,具体使用方式如下:

具体显示样式如下所示:


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/bake/8031700.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-12
下一篇 2023-04-12

发表评论

登录后才能评论

评论列表(0条)

保存