You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
98 lines
2.5 KiB
98 lines
2.5 KiB
<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: '总经理',
|
|
children: [{ name: '行政事业部' }, { name: '创新事业部' }, { name: '孵化事业部' }, { 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>
|
|
|