前端uni-app树形组件 tree组件，可拖拽移动，点击展开收缩，无限添加子集

 

随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。通过组件化开发，可以有效实现单独开发，单独维护，而且他们之间可以随意的进行组合。大大提升开发效率低，降低维护成本。

组件化对于任何一个业务场景复杂的前端应用以及经过多次迭代之后的产品来说都是必经之路。组件化要做的不仅仅是表面上看到的模块拆分解耦，其背后还有很多工作来支撑组件化的进行，例如结合业务特性的模块拆分策略、模块间的交互方式和构建系统等等 。

本文给大家介绍的一款组件是：前端vue uni-app树形结构图，可拖拽移动，点击展开收缩，无限添加子集;

效果图如下:

实现代码如下:

# treeShapeStruct 树形结构图，可拖拽移动，点击展开收缩，无限添加子集使用方法

#### HTML代码部分

```html

<template>

<view class="content">

<view class="titleIos"></view>

<div class="mui-content" style="margin-top: 16px;">

<div id="container" style="height: 86vh; margin-top: 0px;"></div>

</div>

</view>

</template>

```

#### JS代码 （引入组件 填充数据）

```javascript

<script>

import echarts from '../../static/h5/echarts.min.js'

export default {

data() {

return {

}

},

onReady() {

},

onLoad: function(e) {

console.log(e);

},

onShow() {

},

mounted() {

this.treeData()

},

methods: {

treeData() {

var dom = document.getElementById("container");

var myChart = echarts.init(dom);

//  颜色设定 不同颜色寓意不同权重

var fatherColor = 'green';

var midColor = 'rgb(193, 92, 31)';

var smallColor = 'rgb(247, 203, 174)';

var option;

// 新能源汽车

let swyyQ = {

"name": "新能源汽车",

itemStyle: {

color: midColor

},

"children": [{

"name": "大型企业",

itemStyle: {

color: fatherColor

},

},

{

"name": "中型企业",

itemStyle: {

color: midColor

},

},

{

"name": "小型企业",

itemStyle: {

color: smallColor

},

},

{

"name": "其他规模企业",

itemStyle: {

color: fatherColor

},

}

]

};

// 新材料行业

let xclkQ = {

"name": "生物与新医药",

itemStyle: {

color: fatherColor

},

"children": [{

"name": "大型企业",

itemStyle: {

color: fatherColor

},

},

{

"name": "中型企业",

itemStyle: {

color: midColor

},

},

{

"name": "小型企业",

itemStyle: {

color: smallColor

},

},

{

"name": "其他规模企业",

itemStyle: {

color: fatherColor

},

}

]

};;

let data = {

"name": "行业分类",

itemStyle: {

color: fatherColor

},

"children": [swyyQ, xclkQ]

}

// 获取网页宽度 设置树形条目实体宽高度

let width = document.body.scrollWidth;

let widthSize = 0.039 * width;

if (widthSize > 36) {

widthSize = 36;

}

let heightSize = widthSize * 2.2;

myChart.setOption(

(option = {

tooltip: {

trigger: 'item',

triggerOn: 'mousemove'

},

series: [{

type: 'tree',

data: [data],

left: '2%',

right: '2%',

top: '8%',

bottom: '20%',

symbol: 'square',

symbolSize: [widthSize, heightSize],

orient: 'vertical',

expandAndCollapse: true,

initialTreeDepth: 2,

label: {

position: 'top',

rotate: 0,

verticalAlign: 'middle',

align: 'center',

fontSize: 12

},

leaves: {

label: {

position: 'bottom',

rotate: -90,

verticalAlign: 'middle',

align: 'left'

}

},

animationDurationUpdate: 150

}]

})

);

if (option && typeof option === 'object') {

myChart.setOption(option);

}

},

}

}

</script>

```

#### CSS

```CSS

<style>

.content {

display: flex;

flex-direction: column;

}

</style>

```

阅读全文下载完整代码请关注微信公众号： 前端组件开发

  欢迎加入我们的前端组件学习交流群，可添加群主微信，审核通过后入群。