问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

流程图大屏实现方案？

头像
dayDayUp
    1541054

    背景：
    项目技术栈：vue3 + vite

    需要实现一个流程图+大屏的效果，视觉效果如下：

    其中各流程之间需要有动态流向的效果。
    有没有可满足效果的实现方案？

    前端javascriptechartsvue.js
    阅读 1.6k
    3 个回答
    得票最新
    头像
    有情有义的黄花菜
      4717
      广西钦州市
      ✓ 已被采纳

      我觉得稍微熟悉一下 path 的写法，写SVG也比较简单吧，而且可以：
      · 自由控制线条走向/圆角大小/颜色/粗细/虚线步长...；
      · 自由控制动画快慢；
      · 结合需求显示/隐藏SVG，实现流程运行/停止状态；

      贴一段我随意写的SVG代码，你参考看看：

      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animated SVG Curve</title>
  <style>
    @keyframes dash {
      to {
        stroke-dashoffset: -100%;
      }
    }

    .path {
      stroke: rgb(247, 24, 8);
      stroke-width: 4;
      fill: none;
      stroke-dasharray: 8;
      animation: dash 10s linear infinite;
    }
  </style>
</head>
<body>
  <svg width="600" height="400" viewBox="0 0 600 400">
    <!-- <path class="path" d="M50,200 C150,100 350,300 550,200" /> -->
    <path class="path" d="M50,150 C150,100 350,500 1550,200" />
  </svg>
</body>
</html>
      头像头饰
      扬帆启航
        4.2k2721
        头像
        冰冰一号
          821

          回答：你这种大屏可视化流程图，要么就自己封装echarts，或者用现成的BI商业组件；如果你要实现动态炫酷的流程走向，商业组件应该支持定制化，就是成本比较高，帆软它们就有这种解决方案，或者你去网上找找别的博主封装好的大屏可视化；不过我看它们都是报表类型的，流程类型的很少，或许你得自己动手封装一套库了。

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题
          宣传栏