diff --git a/src/views/About/Children/Organ.vue b/src/views/About/Children/Organ.vue index 570abcb..5d8159f 100644 --- a/src/views/About/Children/Organ.vue +++ b/src/views/About/Children/Organ.vue @@ -7,7 +7,8 @@
- + +
@@ -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); + }, + }, };