可视化数据大屏 流光插件FlowingLight

1、文档https://nrelaxedui.poggi.ink/extension/flowingLight/2、安装npm i nrelaxed-ui/flowinglight3、使用vue3 jsimport { RFlowingLight, RFlowingLightRenderer } from nrelaxed-ui/flowinglight; onMounted(async () { await nextTick(); if (!boxRef.value) return; // 确保DOM元素存在 // 初始化流光实例 flowingLightInstance new RFlowingLight(boxRef.value, flowingLightRenderer, options); // 启动流光动画 animate(); }) onUnmounted(() { flowingLightInstance?.dispose();//卸载流光动画 }) const flowingLightRenderer new RFlowingLightRenderer() const boxRef ref() let flowingLightInstance null const baseLineConfig { length: 200, speedDistance: 20, lineWidth: 2, shadowBlur: 3, interval: 1, color: #aaffff, shadowColor: #aaffff } const options [ { config: baseLineConfig, points: [ { x: 960, y: 92}, { x: 555, y: 70}, { x: 468, y: 28}, { x: 0, y: 10}, ] }, { config: baseLineConfig, points: [ { x: 960, y: 92}, { x: 1360, y: 70}, { x: 1455, y: 28}, { x: 1920, y: 10}, ] }, { config: baseLineConfig, points: [ { x: 960, y: 20}, { x: 745, y: 20}, { x: 710, y: 36}, { x: 465, y: 28}, { x: 0, y: 10}, ] }, { config: baseLineConfig, points: [ { x: 960, y: 20}, { x: 1172, y: 20}, { x: 1210, y: 36}, { x: 1455, y: 28}, { x: 1920, y: 10}, ] }, ]; //动画函数 const animate function() { requestAnimationFrame(animate.bind(this)); flowingLightRenderer.render(); }