vue3前端如何做鱼骨图

在Vue3中制作鱼骨图，通常可以利用图表库如ECharts、AntV G2等。以下是基本步骤：

1. **安装依赖**：
首先，在项目中通过npm或yarn安装所需的图表库，例如ECharts：

   npm install echarts @vue/echarts-core @vue/cli-plugin-echarts --save

2. **引入并配置**：
在`main.js`或其他合适的入口文件中引入并注册ECharts插件到Vue应用中：

   import { ECharts } from '@vue/echarts-core';
   Vue.use(ECharts);

3. **创建组件**：
创建一个新的Vue组件，比如`FishBoneChart.vue`，用于展示鱼骨图：

   <template>
     <div ref="chart" style="height: 400px;"></div>
   </template>

   <script>
   export default {
     data() {
       return {
         chart: null,
       };
     },
     mounted() {
       this.initChart();
     },
     methods: {
       initChart() {
         const option = {/* 鱼骨图配置 */};
         this.chart = this.$echarts.init(this.$refs.chart);
         this.chart.setOption(option);
       }
     },
   };
   </script>

4. **配置选项**：
根据ECharts文档，设置鱼骨图的具体数据、布局等选项。这里是一个简单的例子：

   // 鱼骨图配置示例
   const option = {
     type: 'tree',
     data: {
       name: '树状图',
       children: [
         {
           name: '一级分类',
           children: [
             { name: '二级分类1' },
             { name: '二级分类2' },
           ],
         },
       ],
     },
     structure: {
       type: 'radial', // 或者 'horizontal'
       levels: 2, // 层级数
     },
     // 其他如颜色、动画等配置...
   };

5. **动态数据**：
如果需要根据数据动态生成鱼骨图，可以在data或props中存储数据，并在适当的时候更新option。