10 changed files with 143 additions and 28 deletions
After Width: | Height: | Size: 1.8 KiB |
@ -0,0 +1,108 @@ |
|||
<template> |
|||
<div> |
|||
<div class="white"> |
|||
<div :style="{ height: '500px' }" id="treeCharts"></div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'Organ', |
|||
data() { |
|||
return { |
|||
title: '关于我们-组织机构', |
|||
showPage: 12, |
|||
arr: [ |
|||
{ name: '关于我们', url: '/About/Introduce' }, |
|||
{ name: '组织机构', url: '' }, |
|||
], |
|||
treedata: [ |
|||
{ |
|||
//一定一定要注意这里有[] |
|||
name: '绿谷公司', |
|||
children: [ |
|||
{ name: '行政事业部' }, |
|||
{ |
|||
name: '创新事业部', |
|||
children: [ |
|||
{ |
|||
name: '协同创新中心', |
|||
collapsed: false, |
|||
children: [ |
|||
{ name: '科技资源开放共享服务平台' }, |
|||
{ name: '知识产权与技术转移转化服务平台' }, |
|||
{ name: '知识培训服务平台' }, |
|||
{ name: '科技创新人才服务平台' }, |
|||
], |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
name: '孵化事业部', |
|||
collapsed: false, |
|||
children: [ |
|||
{ name: '虚拟空间' }, |
|||
{ |
|||
name: '实体空间', |
|||
collapsed: false, |
|||
children: [{ name: '办公场所' }, { name: '公共实验室' }, { name: '中试基地' }], |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
name: '产业事业部', |
|||
children: [{ name: '产业技术创新联盟' }], |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
|
|||
mounted() { |
|||
this.showChart(); |
|||
}, |
|||
methods: { |
|||
showChart() { |
|||
// 基于准备好的dom,初始化echarts实例 |
|||
var myChart = this.$echarts.init(document.getElementById('treeCharts')); |
|||
// 指定图表的配置项和数据 |
|||
var option = { |
|||
tooltip: { |
|||
trigger: 'item', |
|||
triggerOn: 'mousemove', |
|||
}, |
|||
series: [ |
|||
{ |
|||
type: 'tree', |
|||
data: this.treedata, |
|||
top: '-5%', |
|||
left: '25%', |
|||
bottom: '0%', |
|||
right: '25%', |
|||
symbolSize: 7, |
|||
lineStyle: { width: 1 }, |
|||
itemStyle: { borderWidth: 3, borderColor: '#AACD06' }, |
|||
label: { position: 'top', verticalAlign: 'middle', align: 'center', fontSize: 16 }, |
|||
leaves: { |
|||
label: { |
|||
position: 'right', |
|||
verticalAlign: 'middle', |
|||
align: 'left', |
|||
}, |
|||
}, |
|||
expandAndCollapse: true, |
|||
animationDuration: 550, |
|||
animationDurationUpdate: 750, |
|||
}, |
|||
], |
|||
}; |
|||
// 使用刚指定的配置项和数据显示图表。 |
|||
myChart.setOption(option); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="stylus" scoped></style> |
Loading…
Reference in new issue