Vue uses echarts to draw an organizational chart
|
Yesterday, I wrote a blog about the circular progress bar (please go to: Vue circular progress bar), which was already annoying enough. Today, I encountered a functional requirement to display an organizational chart similar to that of a company. I have to take risks! ! ! This kind of requirement can be achieved by using div+css, but there is no animation effect, and my css3 is very poor. In addition, the project has already used charts such as line charts, pie charts, and bar charts, and they are still using Baidu's echarts, so the requirement of this organizational chart is also implemented using Baidu's echarts. I used to use echarts to write line charts, bar charts, and pie charts. I am quite familiar with its API, but it is very difficult to draw tree charts such as organizational structures. I have never used it before. Moreover, the display effect of the tree chart designed by echarts is far from that of the tree chart of echarts. My child, I have to do another time-consuming and laborious research. The design diagram is as follows:
As shown in the figure, a tree node may have two different background colors and two different text colors, and each node is still displayed as a rounded rectangle. A classmate said that echarts has an API for setting rounded corners, so why not just set it directly? What I want to say is that it does provide such an API, but it cannot be implemented according to the normal routine. From the figure, we can also see an effect that is almost impossible to achieve, that is, the corners of the lines connecting each node are right angles instead of smooth, and echarts does not provide an API to set the corners to be right angles, but only provides a curveness (the API description is the curvature of the tree graph edge). After using this thing, it still cannot be achieved. I checked the information online and some people said that you can modify the source code of echarts. I don't recommend this solution because in vue or react projects, echarts needs to be installed in package.json. If multiple people are developing in parallel, the echarts installed by others is not the echarts you modified. This is the problem. Finally, the effect of drawing with echarts is still very good. The only thing that has not been realized is that the corners of the lines connecting each node are not right angles. If there is a good solution, I hope you can enlighten me. Thank you! Show the final result:
Having said so much, let's go to the code. This code is based on Vue. If you want to use it in React, just modify it slightly. Component tree.vue:
<template>
<div :class="className" :style="{height:height,width:width}" />
</template>
<script>
import echarts from "echarts";
require("echarts/theme/macarons");
import { debounce } from "@/utils";
export default {
props: {
className: {
type: String,
default: "chart"
},
width: {
type: String,
default: "100%"
},
height:
type: String,
default: "500px"
},
chartData: {
type: Object,
required: true
}
},
data() {
return {
chart: null,
};
},
watch:
chartData: {
deep: true,
handler(val) {
this.setOptions(val);
}
}
},
mounted() {
this.initChart();
//Does it need to be self-adaptive? - Add anti-shake function this.__resizeHandler = debounce(() => {
if (this.chart) {
this.chart.resize();
}
}, 100);
window.addEventListener("resize", this.__resizeHandler);
// Listen to changes in the sidebar to achieve adaptive scaling const sidebarElm = document.getElementsByClassName("sidebar-container")[0];
sidebarElm.addEventListener("transitionend", this.sidebarResizeHandler);
},
beforeDestroy() {
if (!this.chart) {
return;
}
window.removeEventListener("resize", this.__resizeHandler);
this.chart.dispose();
this.chart = null;
const sidebarElm = document.getElementsByClassName("sidebar-container")[0];
sidebarElm.removeEventListener("transitionend", this.sidebarResizeHandler);
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, "macarons");
this.setOptions(this.chartData);
const nodes = this.chart._chartsViews[0]._data._graphicEls;
let allNode = 0;
for(let index = 0; index < nodes.length; index++) {
const node = nodes[index];
if (node === undefined) {
continue
}
allNode++;
}
const height = window.innerHeight;
const width = window.innerWidth - 1000;
const currentHeight = 85 * allNode;
const currentWidth = 220 * allNode;
const newHeight = Math.max(currentHeight, height);
const newWidth = Math.max(currentWidth, width);
const tree_ele = this.$el;
// tree_ele.style.height = newHeight + 'px'; //Set height to adapt tree_ele.style.width = newWidth + 'px'; //Set width to adapt this.chart.resize();
this.chart.on('click', this.chartData.clickCallback); //Node click event},
setOptions(data) {
this.chart.setOption({
//Provide tools for data viewing, restoration, and downloading// toolbox: {
// show : true,
// feature : {
// mark : {show: true},
// dataView : {show: true, readOnly: false},
// restore : {show: true},
// saveAsImage : {show: true}
// }
// },
series: [
{
name: "Unified Credit View",
type: "tree",
orient: "TB", //vertical or horizontal TB stands for vertical LR stands for horizontal top: '10%',
initialTreeDepth: 10, //The initial expansion level (depth) of the tree graph
expandAndCollapse: false, //Do not collapse child nodes when clicking a node, default: true
symbolSize: [135, 65],
itemStyle: {
color: 'transparent',
borderWidth: 0,
},
lineStyle:
color: '#D5D5D5',
width: 1,
curveness: 1,
},
data: [data]
}
]
});
},
sidebarResizeHandler(e) {
if (e.propertyName === "width") {
this.__resizeHandler();
}
}
}
};
</script>Using tree.vue method:
<template>
<tree :chartData="treeData" />
</template>
<script>
import tree from './tree';
export default {
data() {
return {
treeData: {
label: {
backgroundColor: '#F4F4F4',
borderRadius: [0, 0, 5, 5],
formatter: [
'{first|comprehensive credit limit}',
'{second|(CR20190912000013)\nApproved amount: 100\nCurrency: RMB}',
].join('\n'),
rich:
first: {
backgroundColor: '#078E34',
color: '#fff',
align: 'center',
width: 135,
height: 30,
borderRadius: [5, 5, 0, 0],
},
second: {
color: '#888',
align: 'center',
lineHeight: 17,
},
}
},
children: [
{
label: {
formatter: [
'{first|channel quota}',
].join('\n'),
rich:
first: {
backgroundColor: '#3AC082',
color: '#fff',
align: 'center',
width: 135,
height: 65,
borderRadius: 5,
},
}
},
children: [{
label: {
formatter: [
'{first|factoring amount}',
].join('\n'),
rich:
first: {
backgroundColor: '#3AC082',
color: '#fff',
align: 'center',
width: 135,
height: 65,
borderRadius: 5,
},
}
},
children: [{
label: {
backgroundColor: '#F4F4F4',
borderRadius: [0, 0, 5, 5],
formatter: [
'{first|reverse factoring}',
'{second|(CR20190912000013)\nApproved amount: 100\nCurrency: RMB}',
].join('\n'),
rich:
first: {
backgroundColor: '#078E34',
color: '#fff',
align: 'center',
width: 135,
height: 30,
borderRadius: [5, 5, 0, 0],
},
second: {
color: '#888',
align: 'center',
lineHeight: 17,
},
}
},
}]
}]
},
{
label: {
formatter: [
'{first|Guarantee/(Le) Group/Other Amounts}',
].join('\n'),
rich:
first: {
backgroundColor: '#3AC082',
color: '#fff',
align: 'center',
width: 135,
height: 65,
borderRadius: 5,
},
}
},
children: [{
label: {
formatter: [
'{first|factoring amount}',
].join('\n'),
rich:
first: {
backgroundColor: '#3AC082',
color: '#fff',
align: 'center',
width: 135,
height: 65,
borderRadius: 5,
},
}
},
children: [{
label: {
backgroundColor: '#F4F4F4',
borderRadius: [0, 0, 5, 5],
formatter: [
'{first|forward factoring}',
'{second|(CR20190912000013)\nApproved amount: 100\nCurrency: RMB}',
].join('\n'),
rich:
first: {
backgroundColor: '#B8D87E',
color: '#fff',
align: 'center',
width: 135,
height: 30,
borderRadius: [5, 5, 0, 0],
},
second: {
color: '#888',
align: 'center',
lineHeight: 17,
},
}
},
}]
},
{
label: {
formatter: [
'{first|lease amount}',
].join('\n'),
rich:
first: {
backgroundColor: '#3AC082',
color: '#fff',
align: 'center',
width: 135,
height: 65,
borderRadius: 5,
},
}
},
children: [
{
label: {
backgroundColor: '#F4F4F4',
borderRadius: [0, 0, 5, 5],
formatter: [
'{first|vehicle rental}',
'{second|(CR20190912000013)\nApproved amount: 100\nCurrency: RMB}',
].join('\n'),
rich:
first: {
backgroundColor: '#FF6C6A',
color: '#fff',
align: 'center',
width: 135,
height: 30,
borderRadius: [5, 5, 0, 0],
},
second: {
color: '#888',
align: 'center',
lineHeight: 17,
},
}
},
},
]
}]
}
]
}
}
},
components:
tree,
}
};
</script>It doesn't look like much code, but to implement it, I have to check the echarts API and online information. In addition, because the text at a node in the rendering may wrap, the text color is different, and some nodes have two background colors, and the style and text displayed at each node are not fixed, we may still face the tedious problem of transforming the data returned by the interface into the data we want, just like the format of treeData passed to the tree node, it is quite troublesome. If the style of each node is the same, it will be much easier, such as an example of a tree diagram on the official website: https://www.echartsjs.com/examples/zh/editor.html?c=tree-vertical Starting from the v4.7.0 version of echarts, an API is added to the configuration item series: edgeShape:'polyline', which can realize that the corners of the lines connecting each node in the tree chart are right angles. The above is the details of vue using echarts to draw an organizational chart. For more information about vue drawing organizational charts, please pay attention to other related articles on 123WORDPRESS.COM! You may also be interested in:
|
<<: Detailed explanation of how to install centos7 using win10's built-in virtual machine hyper-v
>>: How to query json in the database in mysql5.6 and below
Recommend
html opens a new window with a hyperlink and can control window properties
1. The window size opened by the HTML hyperlink C...
How to deploy Tencent Cloud Server from scratch
Since this is my first post, if there are any mis...
Practical skills that must be mastered in calling UNI-APP components in the easycom mode
This article is intended to be a starting point f...
Problems and solutions when installing and using VMware
The virtual machine is in use or cannot be connec...
Do you know how to use the flash wmode attribute in web pages?
When doing web development, you may encounter the...
How to solve the problem that Docker container has no vim command
Find the problem Today, when I tried to modify th...
Detailed explanation of querying JSON format fields in MySQL
During the work development process, a requiremen...
How to batch generate MySQL non-duplicate mobile phone number table example code
Preface In many MySQL test scenarios, some test d...
Add a floating prompt for the header icon in the ElementUI table
This article mainly introduces how to add floatin...
Detailed explanation of Javascript event capture and bubbling methods
Table of contents 1. Event Processing Model 1. Ev...
Detailed steps for completely uninstalling and reinstalling MySQL under Windows 10
I believe that everyone needs to reinstall MySQL ...
Detailed explanation of the use of Vue card-style click-to-switch image component
This article shares the vue card-style click-to-s...
Linux touch command usage examples
Detailed explanation of linux touch command: 1. C...
How to install binary MySQL on Linux and crack MySQL password
1. Make sure the system has the required libaio s...
Summary of various postures of MySQL privilege escalation
Table of contents 1. Write Webshell into outfile ...