react可视化大屏左下

时间：北京时间2024年6月24日 黄帝纪年第4721年 青龙年

今天来做左下角 echarts 图表已用红色框标注

大致解题思路：首先从 echarts 官网找到相对应的折线图，在更替里面的数据实现效果

一、打开 echarts 官网下载 echarts 包 npm i echarts 

Apache EChartsApache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。https://echarts.apache.org/zh/index.html下载完相应的 echarts 包后在我们当前页面上引入 echarts ：

如果说还怕记不住我们到 echarts 官网里面随便找一个案例 ，点击完整代码，第一行就是。

引入以后我们需要声明一个变量，然后把这个变量赋值给我们相对应的盒子。赋值给他后我们还需要在当前的标签上赋值给他 用 useRef 。

上面我们定义了那么我们就在下面给他赋值，赋值到我们相对应的盒子上

然后控制台打印我们赋值的这个变量看是否可以拿到相对应的盒子，如果能拿到那么说明我们写的没错，如果获取不到那就证明我们写的还是有问题，那么有问题我们就解决问题，写一行代码就保证我让他对一行代码，不要光顾着写最后一堆报错不好找。

接着我们把相对应的数据放到我们获取到的盒子当中

完成之后在  echarts 官网实例中找到和案例相对应差不多的案例

定义echarts需要的option 指定图表的配置项和数据

点击进去以后我们发现和我们要的数据差不多，只需要修改部分的数据就可以了。

接下来我们把该项的图表数据放到我们的案例中

完成之后我们需要重新配置 echarts 和设置 opiton

这样一个简单的 echarts 图表就出来了

如果说我们不小心写错了地方这里给大家实验一下，不要去模仿或者写错！！！

大家看这里我把初始化设置opiton写到了生命周期的外面大家请看效果：

会出现报错！！！

所以我们在写代码的时候一定要细心！一个简单的，可能都会让项目报错！！！

这里解释一下初始化 echarts 和 设置opiton为什么要写在我们模拟生命周期里打个比方

好比说我们有一个玩具，当我们赐予他生命的时候他才会去动才会去有各种状态，如果他没有生命迹象不会自己动那么他就像一个雕塑一样一动不动，代码也是一样，我们初始化了 echarts 设置了opiton那么我们应该在 我们模拟的生命周期里面去写赋给他生命从而让他动起来。

以上是我对这段代码的理解与解释，肯定是不太正确的只不过说我用我自己的方式和语言来让大家更好的去理解他知道他是什么意思就好了（不喜勿喷谢谢）。

接下来我们就需要去拿到后端数据，把数据渲染到我们的 echarts  图表中代替他原来的数据

解题思路：

那么我们拿取后端数据要拿什么？我们要渲染什么？怎么拿？怎么渲染？渲染到哪里？

在此声明一下！！！：后端数据包是同事分享我无权分享，更不能侵犯他人权利和劳动成果所以后端数据包我不能分享实属抱歉

我们需要渲染这些数据

那么我们开始一个一个写：

在渲染之前我们应该先拿到数据，调用数据的接口（同上方时间的地方同理）

还是在上方引入数据

在下方获取到数据

控制台打印后出现 “200” “ok” 说明我们的数据获取成功了，可以拿到数据

那么接下来我们开始调用后端拿到的数据渲染到我们的页面上

在渲染之前我们把不用的数据给删掉以免占位和后续写的时候混淆

我们的效果图上没有这些数据，所以这些我们可以删掉

删除完毕后我们先渲染头部的数据，我们应该知道头部的数据是哪个元素，根据元素名我们来从后端调取获取到此元素，把获取的元素来渲染到页面上

通过看文档我们得知头部数据为：

那么我们开始重新渲染头部的数据

控制台可以看到我们的数据了说明拿到后端legend数据了，说明我们写的没问题。

头部数据我们拿到了接下来我们开始再获取身体数据

在这个时候我们会有一个小的bug刷新页面后他的数据又变回来了:

我们可以看出，当我们把后端的数据渲染到页面上之后我们没有更新他，也可以说虽然我们渲染但是这些数据还不属于我们，所以我们再想办法在刷新页面，把我们渲染的数据赋值给我当前的 opiton 上，让他变成我们自己的数据，完成之后再设置一遍opiton从而让他永久的成为我们想要的数据，成为我们自己的数据

加完之后我们再看看是否可以数据持久化:

这个时候我们就可以看到无论现在我们怎么刷新页面他都会变成我们想要的数据

数据渲染之后我们在对  echarts  进行优化

先优化头部数据

我们去 echarts 官网查找一下相对应的属性

那么知道了属性后我们应该放到那里呢？放到相对应的头部数据当中

接下来再让头部图表样式变成圆形

同理还是添加到头部数据当中

成功了。

接下里更改中间线段①把线段变得更加圆润 ②中间线段圆圈去掉

添加的话我们添加到哪里？因为我们要更改中间线段，所以我们要加到中间数据当中

可以看到已经不再那么生硬了变得更加圆润了

接下来去掉中间线段的小圆点

同理还是中间的线段所以放到中间模拟数据的地方

这下我们的 图表算是基本完成了

还有底部的时间没有渲染

接下来开始渲染数据的左下角

解题思路：我们先获取到当前时间，根据我们的数据需要几个数据利用for循环模拟时间的数据，之后渲染在页面上

接下来我们去官网获取时间：

安装 | Day.js中文网Day.js是一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间。https://dayjs.fenxianglu.cn/category/#%E6%B5%8F%E8%A7%88%E5%99%A8还是先下载相对应的包：npm install dayjs

现在完后导入时间dayjs

先定义一个新的数组,然后获取到当前的时间戳:

我们要让他变成每隔两分钟的时间，在对时间进行计算和更改：

接下来把我们拿到的数据渲染到当前 echarts 上

最后我们的左下角就算是完成了。