From 8ac36434ed286ce76e2554cece209e471a5d1af0 Mon Sep 17 00:00:00 2001 From: lucky Date: Tue, 19 Jan 2021 19:02:21 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BB=84=E7=BB=87=E6=9C=BA=E6=9E=84=E4=BF=AE?= =?UTF-8?q?=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/About/Children/Organ.vue | 62 ++++++++++++++++++++++++++++-- 1 file changed, 58 insertions(+), 4 deletions(-) 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); + }, + }, };