大家好,我是大帅子,今天给大家讲一下vue2中实现组织架构,类似以下的效果
以下是我们所需的插件,echarts ,下面我们直接看代码
1. 对echarts进行2次封装
这里是对框架对echarts的2次封装,拿去直接用就行
<template>
<div v-if="!isDispose" :id="echartsComponents" class="chartsComponentClass" />
</template>
<script>
export default {
name: "EchartsComponents",
props: {
// 接收父组件传递过来的信息
chartDataOptions: {
type: Object, // 此处可以为Array或者Object或者其它，根据需求来。
default: () => {
"";
}
},
echartsType: {
type: String, // 图表类型。
default: "pie1"
}
},
data() {
return {
myEcharts: null,
isDispose: false,
dynamicId: null
};
},
computed: {
echartsComponents() {
const timestamp = new Date().getTime();
return `echarts${timestamp}${Math.random() * 100000}`;
}
},
watch: {
chartDataOptions: {
handler() {
this.refreshEcharts();
},
deep: true
}
},
mounted() {
setTimeout(() => {
this.initEcharts();
// const that = this
this.$nextTick(() => {
this.refreshEcharts();
});
// if (false) {
// that.myEcharts.showLoading({
// text: '数据载入中',
// color: '#c23531',
// textColor: '#f30909',
// maskColor: 'rgba(255, 255, 255, 0.6)',
// zlevel: 100,
// })
// } else {
this.myEcharts.hideLoading();
// }
if (this.dynamicId) {
clearInterval(this.dynamicId);
}
// 判断是否为动态图表
if (this.chartDataOptions.dynamic) {
this.dynamicId = setInterval(() => {
this.myEcharts.setOption(this.chartDataOptions, true, false, false);
}, 100);
}
}, 100);
},
beforeDestroy() {
// console.log('-----------------------------jintu销毁echarts----------------------------------',this.myEcharts)
if (this.myEcharts) {
this.myEcharts.off("click");
this.myEcharts.clear();
this.myEcharts.dispose();
this.isDispose = true;
}
if (this.dynamicId) {
clearInterval(this.dynamicId);
}
},
methods: {
initEcharts() {
// console.log('----------echarts创建---------------------------')
// const that = this
this.isDispose = false;
const $echartsDOM = document.getElementById(this.echartsComponents);
this.myEcharts = this.$echarts.init($echartsDOM);
// this.refreshEcharts();
},
refresh() {
if (this.myEcharts) this.myEcharts.resize();
},
// 图表刷新
refreshEcharts() {
// 在渲染点击事件之前先清除点击事件
if (this.myEcharts) {
this.myEcharts.off("click");
this.myEcharts.off("legendSelectChanged");
// 渲染数据
const option = this.chartDataOptions;
this.myEcharts.clear();
this.myEcharts.setOption(option, true, false, false);
this.myEcharts.on("click", params => {
this.$emit("get-params", params, this.chartDataOptions);
});
// 点击图例事件暴露
this.myEcharts.on("legendSelectChanged", params => {
// eslint-disable-next-line no-restricted-globals
event.stopPropagation();
this.$emit("legend-select-changed", params);
});
}
},
getDataURL() {
return this.myEcharts.getDataURL();
}
}
};
</script>
<style scoped>
.chartsComponentClass {
width: 100%;
height: 100%;
}
</style>
2. 使用echarts
<template>
<div>
<charts-components
ref="chartsRef"
:chart-data-options="xychartOption"
style="height: calc(100vh - 140px)"
echarts-type="bar1"
/>
</div>
</template>
export default {
data() {
return {
xychartOption: {
tooltip: {
trigger: "item",
triggerOn: "mousemove",
},
series: [
{
type: "tree",
id: 0,
name: "tree1",
data: [],
top: "10%",
left: "10%",
bottom: "20%",
right: "10%",
avoidLabelOverlap: true, //防止标签重叠
roam: true, //移动+缩放 'scale' 或 'zoom'：只能够缩放。 'move' 或 'pan'：只能够平移。
scaleLimit: {
//缩放比例
min: 0.7, //最小的缩放值
max: 4, //最大的缩放值
},
layout: "orthogonal", //树图布局，orthogonal水平垂直方向，radial径向布局 是指以根节点为圆心，每一层节点为环，一层层向外
orient: "TB", //树形方向 TB为上下结构 LR为左右结构
// nodePadding: 100,//结点间距 （发现没用）
//layerPadding: 30,//连接线长度 （发现没用）
symbol: "circle", //图形形状 rect方形 roundRect圆角 emptyCircle圆形 circle实心圆
symbolSize: 14, //状态大小
edgeShape: "polyline", //线条类型 curve曲线
initialTreeDepth: 10, //初始展开的层级
expandAndCollapse: true, //子树折叠和展开的交互，默认打开
lineStyle: {
//结构线条样式
width: 0.7,
color: "#1E9FFF",
type: "broken",
},
label: {
//节点文本样式
normal: {
backgroundColor: "#81c5f7",
position: "bottom",
verticalAlign: "middle", //文字垂直对齐方式
align: "center",
borderColor: "#1E9FFF",
color: "#fff",
borderWidth: 1,
borderRadius: 5,
padding: 5,
height: 40,
width: 120,
offset: [0, 30], //节点文字与圆圈之间的距离
fontSize: 15,
// 节点文本阴影
shadowBlur: 10,
shadowColor: "rgba(0,0,0,0.25)",
shadowOffsetX: 0,
shadowOffsetY: 2,
},
},
leaves: {
//叶子节点文本样式
label: {
//backgroundColor: '#81c5f7',
backgroundColor: "#fff",
color: "#333",
position: "bottom",
rotate: 0, //标签旋转。
verticalAlign: "middle",
align: "center",
//文本框内文字超过6个字折行
// formatter: function (val) {
// let strs = val.name.split(""); //字符串数组
// let str = "";
// for (let i = 0, s; (s = strs[i++]); ) {
// //遍历字符串数组
// str += s;
// if (!(i % 6)) str += "\n"; //按需要求余，目前是一个字换一行
// }
// return str;
// },
//或者
overflow: "break", //break为文字折行， truncate为文字超出部分省略号显示
lineOverflow: "truncate", //文字超出高度后 直接截取
},
},
expandAndCollapse: true, //默认展开树形结构
animationDuration: 550,
animationDurationUpdate: 750,
},
],
},
};
},
created() {
this.getList();
},
methods: {
getList() {
let data = [
{
id: 0,
parentId: 0,
name: "岗检领导小组",
type: 0,
children: [],
},
];
listTeam().then((response) => {
data[0].children = this.getTeamUserByTeamId(response.rows);
this.xychartOption.series[0].data = data;
});
},
}
}
这里面的返回数据格式也给大家奉上
{
"createBy": "admin",
"createTime": "2024-01-13 12:15:39",
"updateBy": "admin",
"updateTime": "2024-01-13 12:15:39",
"delFlag": 0,
"remark": null,
"id": 23173147779074,
"name": "岗检联合办公室",
"parentId": 0,
"status": 1,
"createUserId": 1,
"type": 1,
"teamType": 2,
"children": [
{
"createBy": "admin",
"createTime": "2024-01-13 12:16:23",
"updateBy": "admin",
"updateTime": "2024-01-13 12:16:23",
"delFlag": 0,
"remark": null,
"id": 23360196960257,
"name": "综合岗检工作组",
"parentId": 23173147779074,
"status": 1,
"createUserId": 1,
"type": 2,
"teamType": 2,
"children": [
{
"createBy": "admin",
"createTime": "2024-01-13 12:17:39",
"updateBy": "admin",
"updateTime": "2024-01-13 12:17:39",
"delFlag": 0,
"remark": null,
"id": 23678318141442,
"name": "综合工作组一组",
"parentId": 23360196960257,
"status": 1,
"createUserId": 1,
"type": 3,
"teamType": 1,
"children": []
},
{
"createBy": "admin",
"createTime": "2024-01-13 12:18:01",
"updateBy": "admin",
"updateTime": "2024-01-13 12:18:01",
"delFlag": 0,
"remark": null,
"id": 23770995482625,
"name": "综合工作组二组",
"parentId": 23360196960257,
"status": 1,
"createUserId": 1,
"type": 3,
"teamType": 2,
"children": []
}
]
},
{
"createBy": "admin",
"createTime": "2024-01-13 12:16:36",
"updateBy": "admin",
"updateTime": "2024-01-13 12:16:36",
"delFlag": 0,
"remark": null,
"id": 23414303481858,
"name": "生产岗检工作组",
"parentId": 23173147779074,
"status": 1,
"createUserId": 1,
"type": 2,
"teamType": 2,
"children": [
{
"createBy": "admin",
"createTime": "2024-01-13 12:17:52",
"updateBy": "admin",
"updateTime": "2024-01-13 12:17:52",
"delFlag": 0,
"remark": null,
"id": 23731120234498,
"name": "生产工作组一组",
"parentId": 23414303481858,
"status": 1,
"createUserId": 1,
"type": 3,
"teamType": 1,
"children": []
},
{
"createBy": "admin",
"createTime": "2024-01-13 12:18:10",
"updateBy": "admin",
"updateTime": "2024-01-13 12:18:10",
"delFlag": 0,
"remark": null,
"id": 23807355904002,
"name": "生产工作组二组",
"parentId": 23414303481858,
"status": 1,
"createUserId": 1,
"type": 3,
"teamType": 2,
"children": []
}
]
}
]
}
]
好了,这边已经给大家介绍到这里,以上是我自己的理解,希望可以帮到大家, 欢迎留言我这边一定会第一时间给大家解答,喜欢的可以点赞收藏
🐣---->🦅 还需努力!大家一起进步!!!
