vue实现鱼骨图

Vue 实现鱼骨图（因果图/Ishikawa）的方法

鱼骨图常用于问题分析，展示潜在原因与结果之间的关系。以下是基于 Vue 的实现方案：

使用 SVG 绘制基础结构

通过 SVG 的 <line> 和 <text> 元素构建鱼骨图主干和分支：

<template>
  <svg width="800" height="600" class="fishbone-diagram">
    <!-- 主干 -->
    <line x1="100" y1="300" x2="700" y2="300" stroke="#333" stroke-width="3"/>

    <!-- 分支示例 -->
    <line x1="300" y1="300" x2="250" y1="200" stroke="#666" stroke-width="2"/>
    <text x="240" y="190" font-size="12">人员因素</text>
  </svg>
</template>

动态数据绑定

将分支数据存储在 Vue 的 data 或 props 中实现动态渲染：

export default {
  data() {
    return {
      branches: [
        { category: "人员", items: ["培训不足", "经验缺乏"] },
        { category: "设备", items: ["老化", "维护不及时"] }
      ]
    }
  }
}

使用组件化结构

创建可复用的分支组件：

<FishboneBranch 
  v-for="(branch, index) in branches" 
  :key="index"
  :startX="calcX(index)"
  :startY="300"
  :items="branch.items"
  :category="branch.category"
/>

添加交互功能

通过 Vue 的事件处理实现节点交互：

methods: {
  handleClick(item) {
    this.$emit('cause-selected', item)
  }
}

使用第三方库（可选）

考虑基于现有图表库二次开发：

npm install d3-fishbone  # 专用于鱼骨图的D3扩展

响应式设计

结合 CSS 变量实现自适应布局：

.fishbone-diagram {
  width: 100%;
  height: auto;
  max-width: 1000px;
}

实现要点

• 计算分支位置时建议使用动态坐标公式
• 复杂场景可结合 Vue 的 <transition> 实现动画效果
• 移动端需额外处理触摸事件
• 打印场景需注意 SVG 的尺寸适配

实际开发中可根据需求选择纯手工实现或结合图表库的方案。对于企业级应用，建议优先考虑基于 ECharts 或 D3.js 的封装方案。