check-work/src/views/About/Children/Organ.vue

<template>
  <div>
    <h-nav />
    <div class="inner my-1">
      <bread-crumb :arr="arr" />
    </div>
    <banner :show-page="showPage" />
    <div class="inner">
      <div class="white pa-5 my-5">
        <!-- <rich-text :title="title" /> -->
        <div :style="{ height: '500px' }" id="treeChart"></div>
      </div>
    </div>
  </div>
</template>

<script>
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';

export default {
  name: 'Introduce',
  components: { Banner, HNav, BreadCrumb },
  data() {
    return {
      title: '关于我们-组织机构',
      showPage: 12,
      arr: [
        { name: '关于我们', url: '/About/Introduce' },
        { name: '组织机构', url: '' },
      ],
      treedata: [
        {
          //一定一定要注意这里有[]
          name: '绿谷公司',
          children: [
            { name: '行政事业部' },
            {
              name: '创新事业部',
              children: [
                {
                  name: '协同创新中心',
                  children: [
                    { name: '科技资源开放共享服务平台' },
                    { name: '知识产权与技术转移转化服务平台' },
                    { name: '知识培训服务平台' },
                    { name: '科技创新人才服务平台' },
                  ],
                },
              ],
            },
            {
              name: '孵化事业部',
              children: [
                { name: '虚拟空间' },
                {
                  name: '实体空间',
                  children: [{ name: '办公场所' }, { name: '公共实验室' }, { name: '中试基地' }],
                },
              ],
            },
            {
              name: '产业事业部',
              children: [{ name: '产业技术创新联盟' }],
            },
          ],
        },
      ],
    };
  },

  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>

<style lang="stylus" scoped>
.inner {
  margin: 40px auto;
}
</style>