组织机构修改

src/views/About/Children/Organ.vue

@@ -7,7 +7,8 @@
     <banner :show-page="showPage" />
     <div class="inner">
       <div class="white pa-5 my-5">
-        <rich-text :title="title" />
+        <!-- <rich-text :title="title" /> -->
+        <div :style="{ height: '500px' }" id="treeChart"></div>
       </div>
     </div>
   </div>
@@ -17,11 +18,11 @@
 import Banner from 'components/Banner/Banner.vue';
 import HNav from './../components/HNav.vue';
 import BreadCrumb from 'components/BreadCrumb/BreadCrumb.vue';
-import RichText from 'components/Introduce/RichText.vue';
+// import RichText from 'components/Introduce/RichText.vue';
 
 export default {
   name: 'Introduce',
-  components: { Banner, HNav, BreadCrumb, RichText },
+  components: { Banner, HNav, BreadCrumb },
   data() {
     return {
       title: '关于我们-组织机构',
@@ -30,10 +31,63 @@ export default {
         { name: '关于我们', url: '/About/Introduce' },
         { name: '组织机构', url: '' },
       ],
+      treedata: [
+        {
+          //一定一定要注意这里有[]
+          name: '理事会',
+          children: [
+            {
+              name: '总经理',
+              children: [{ name: '行政事业部' }, { name: '创新事业部' }, { name: '孵化事业部' }, { name: '产业事业部' }],
+            },
+          ],
+        },
+      ],
     };
   },
 
-  methods: {},
+  mounted() {
+    this.showChart();
+  },
+  methods: {
+    showChart() {
+      // 基于准备好的dom，初始化echarts实例
+      var myChart = this.$echarts.init(document.getElementById('treeChart'));
+      // 指定图表的配置项和数据
+      var option = {
+        tooltip: {
+          trigger: 'item',
+          triggerOn: 'mousemove',
+        },
+        series: [
+          {
+            type: 'tree',
+            data: this.treedata,
+            top: '2%',
+            left: '12%',
+            bottom: '1%',
+            right: '20%',
+            symbolSize: 7,
+            lineStyle: { width: 4 },
+            itemStyle: { borderWidth: 3, borderColor: '#AACD06' },
+            label: { position: 'left', verticalAlign: 'middle', align: 'right', fontSize: 16 },
+            leaves: {
+              label: {
+                position: 'right',
+                verticalAlign: 'middle',
+                align: 'left',
+              },
+            },
+            expandAndCollapse: true,
+            animationDuration: 550,
+            animationDurationUpdate: 750,
+          },
+        ],
+      };
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
+    },
+  },
 };
 </script>