折线图加载数据库中的数据

最新推荐文章于 2022-09-25 08:14:35 发布

ヤ青春ゞ滋味

最新推荐文章于 2022-09-25 08:14:35 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_44548147/article/details/99697240

本文介绍了如何使用Echarts将数据库中的数据绘制到折线图上。首先，了解Echarts的基本配置项，创建HTML盒子，引入Echarts库。然后，通过echarts.init初始化实例并设置配置项和数据来显示图表。为了展示动态效果，从数据库获取数据，使用for循环处理数据并更新图表。最后，展示了数据成功加载到折线图上的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目中，我们会经常遇到的问题就是，我们将日常中的一些数据，需要用绘图来进行显示在图表上，方便我们进行查看数据。然而图表有很多种，下面我们来讲一下折线图：
首先，我们需要了解Echarts的一些基本的配置项信息，这样我们才能更快的进行配置折线图的信息，网址如下：https://echarts.baidu.com/option.html#title
接着我们需要为折线图弄一个具备着用宽和高的盒子，下面我们来看一下Html代码：

@* 折线图 *@
<div class="col-5">
     <div class="pr-0 ml-3 h-75" id="nav-line"></div>
</div>

这个时候我们需要引用一个ECharts 文件，代码如下：

<script src="~/Plugins/echarts/echarts.min.js"></script>

我们引用完之后，我们就可以通过echarts.init方法来初始化一个echarts实例出来，接下来我们就可以申请一个变量来接收我们指定图表配置和数据，然后我们使用刚指定的配置项和数据显示图表，也就是通过setOption来进行显示图表。代码如下：
在这里插入图片描述
然后静态的折线图就完成了，效果如下：

因为我们需要做的是把数据库中的数据给统计在折线图，那么接下来我们需要申请12个全局变量，接着让它们为0，然后再通过post请求方法来进行查询数据库中的数据，然后利用for循环，把所有的数据给返回到页面，然后这时侯，我们就可以通过计算把数据中的字段来进