前端树形结构图组件 tree组件，可拖拽移动，点击展开收缩，无限添加子集
快速实现树形结构图组件 tree组件，可拖拽移动，点击展开收缩，无限添加子集;
阅读全文下载完整代码请关注微信公众号： 前端组件开发
效果图如下:
实现代码如下:
# 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>
```
