动态鱼骨图组件，让数据可视化更生动

前端

2023-07-29 02:18:56

动态鱼骨图：数据可视化的利器

一、动态鱼骨图组件：数据可视化的利器

在数据可视化领域，鱼骨图是一种非常有效的工具，它可以帮助我们分析和解决问题，识别潜在原因并提出解决方案。鱼骨图的结构清晰，层次分明，非常适合用来展示复杂的信息。

二、Vue.js和纯CSS打造的动态鱼骨图组件

传统的鱼骨图通常是静态的，但是现在，借助Vue.js和纯CSS，我们可以轻松创建动态鱼骨图组件，让数据可视化更加生动和交互式。

三、组件特性

指定鱼骨根数和鱼翅数量： 您可以根据需要指定鱼骨根数和鱼翅数量，以满足不同的数据可视化需求。
CSS自定义外观和配色方案： 通过CSS，您可以自定义鱼骨图的外观和配色方案，以匹配您的品牌或项目风格。
交互式设计： 该组件支持交互式操作，您可以动态调整鱼骨图，以增强数据可视化的效果，让信息更加易于理解和吸收。

四、使用示例

<template>
  <div class="fishbone-diagram">
    <div class="fishbone-root">
      <div class="fishbone-root-label">问题</div>
    </div>
    <div class="fishbone-branches">
      <div class="fishbone-branch">
        <div class="fishbone-branch-label">原因1</div>
      </div>
      <div class="fishbone-branch">
        <div class="fishbone-branch-label">原因2</div>
      </div>
      <div class="fishbone-branch">
        <div class="fishbone-branch-label">原因3</div>
      </div>
      <div class="fishbone-branch">
        <div class="fishbone-branch-label">原因4</div>
      </div>
    </div>
    <div class="fishbone-sub-branches">
      <div class="fishbone-sub-branch">
        <div class="fishbone-sub-branch-label">子原因1</div>
      </div>
      <div class="fishbone-sub-branch">
        <div class="fishbone-sub-branch-label">子原因2</div>
      </div>
      <div class="fishbone-sub-branch">
        <div class="fishbone-sub-branch-label">子原因3</div>
      </div>
      <div class="fishbone-sub-branch">
        <div class="fishbone-sub-branch-label">子原因4</div>
      </div>
      <div class="fishbone-sub-branch">
        <div class="fishbone-sub-branch-label">子原因5</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FishboneDiagram',
  props: {
    rootLabel: {
      type: String,
      default: '问题'
    },
    branchLabels: {
      type: Array,
      default: ['原因1', '原因2', '原因3', '原因4']
    },
    subBranchLabels: {
      type: Array,
      default: ['子原因1', '子原因2', '子原因3', '子原因4', '子原因5']
    }
  }
}
</script>

<style>
.fishbone-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.fishbone-root {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  border-radius: 50%;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fishbone-root-label {
  font-size: 20px;
  font-weight: bold;
}

.fishbone-branches {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

.fishbone-branch {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  border-radius: 50%;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fishbone-branch-label {
  font-size: 16px;
  font-weight: bold;
}

.fishbone-sub-branches {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

.fishbone-sub-branch {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  border-radius: 50%;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fishbone-sub-branch-label {
  font-size: 12px;
  font-weight: bold;
}
</style>