Preface
It is necessary to implement a function similar to mind maps and topology maps.
The main requirements are: data center distribution, a total of three layers of data (different styles), data can be clicked to jump, and nodes are connected using dotted lines.
Solution selection
- jsmind –pass: Mind map, the style is relatively simple and it is a relatively standard mind map.
You can refer to the article on using jsmind organization structure or mind map in vue , basic use. - d3v6 ( a practice Blog of vue+d3v6 ) –pass:
Because d3data is more flexible and requires writing more custom code, d3data is more suitable for scenarios with special and complex data visualization requirements. ——from chatgpt
- relation-group : A specialized relational graph library.
The above link is demo, github link.
Shortcomings: 1. Can't set the line to dotted line?
Advantages: 1. The implementation is relatively simple. There are visual configuration options .
Example: relationship-graph. Usage experience : A relatively complete mind map case. - echarts has more complete functions, mainly you can directly set the line type to dotted line,
the simplest relationship diagram demo & implement
the basic encapsulation vue-echart component : very detailed & complete code, 100 points! There are cases for vue2 and vue3.
Node click event
The key point of the echarts relationship diagram node click event
is to obtain the diagram and monitor it.
this.myChart = echarts.init(document.getElementById('main'));
this.myChart.on('click', function (param) {
if (param.dataType == 'node') {
console.log('点击了节点',param)
} else {
console.log('点击了边',param)
}
});
The echarts force-directed diagram distinguishes between mouse click events and drag events (angularjs). This distinguishes between click and drag events and is used for expansion. It is not currently used.
Root node usage picture
methods: {
setOption: function () {
let option = {
// ...
series: [
{
type: "graph",
// ...
categories: this.categories,
data: this.echartsData?.data.map((node) => {
if (node.category === 0) {
return {
...node,
// 设置根节点的图片属性
symbol: `image://${
node.book_cover}`,
symbolSize: [100, 100], // 设置图片大小为 100x100
label: {
show: false, // 不显示标签
},
};
} else {
return node;
}
}),
// ...
},
],
};
// ...
return option;
},
Reference: How to use echarts to introduce png images or icons in the vue project (both are symbol logos). The effect in this project is quite good. More detailed talk about the usage of image://