vue实现思维导图或者组织架构图效果

在Vue中实现思维导图或者组织架构图效果，可以使用第三方库，例如vue-orgchart。以下是一个简单的例子，展示如何使用vue-orgchart创建一个基本的思维导图。

首先，安装vue-orgchart：

npm install vue-orgchart --save

然后，在Vue组件中使用它：

<template>
  <div id="app">
    <org-chart :datasource="datasource" :node-template="nodeTemplate"></org-chart>
  </div>
</template>
 
<script>
import { OrgChart } from 'vue-orgchart';
import 'vue-orgchart/dist/vue-orgchart.css';
 
export default {
  components: {
    OrgChart
  },
  data() {
    return {
      datasource: {
        id: 1,
        name: 'CEO',
        children: [
          {
            id: 2,
            name: 'CTO',
            children: [
              {
                id: 4,
                name: '开发组长'
              },
              {
                id: 5,
                name: '开发者',
                children: [
                  {
                    id: 6,
                    name: 'junior dev'
                  }
                ]
              }
            ]
          },
          {
            id: 3,
            name: 'CFO',
            children: [
              {
                id: 7,
                name: '会计'
              }
            ]
          }
        ]
      },
      nodeTemplate: `
        <div :class="nodeClass" :style="nodeStyle">
          <img :src="data.image" style="width:50px;height:50px;" />
          <span>{{ data.name }}</span>
        </div>
      `
    };
  }
};
</script>
 
<style>
/* 在这里添加自定义样式 */
</style>

在这个例子中，datasource 是一个树状结构的对象，代表了组织架构图。nodeTemplate 是一个字符串，表示节点模板，可以自定义节点的HTML结构。

请注意，vue-orgchart 提供了更多的自定义选项和功能，你可以根据需要进行相应的配置。