react里Echarts图表引入和调用后台接口渲染数据

Echarts图表网页链接:https://echarts.apache.org/zh/index.htmlhttps://echarts.apache.org/zh/index.html

先下包 npm install echarts            
在页面中导入import * as  echarts from 'echarts'
用useRef绑定dom元素（div盒子）
在useEffect里渲染图标
useEffect(()＝＞｛
const mychart＝echarts.init (useRef绑定的元素)
let option＝｛表格数据｝
mychart.setOption(option)
｝，［］)

以上就可以呈现出一个简单的Echarts图表了:

如果想要还原度高需要去改变图表的图例之类的东西在Echarts的配置项手册去找:

想要图表数据变成自己需要的 去调用后台接口 可以先建立一个文件api.js里写接口

主页面引入接口

并且在生命周期里面调用接口获取数据 并且启动服务查看后台是否打印出来数据

然后再根据原本Echarts里的option数据的内容去一一对应 替换成你所用接口里的数据

例如:

定义数据的状态 实时更新需要改变一下写法(改不改写法不影响最终呈现的数据效果)

dayjsX轴时间

下包 npm i dayjs
导入 import dayjs from 'dayjs'

先定义一个空数组 :  let xData＝［］
获取当前时间 :  let time＝+new Date
循环所需要数据的长度 例如:需要四个数据
for(let a＝0;a＜4;a++)｛
将循环的数添加在空数组arr中 : xData.unshift(dayjs(time).format('HH:mm:ss'))
每个数据加两分钟 :  time-＝2*60*1000
｝

代替X轴数据 : option.xAxis.data=xData