The implementation is as follows, it can be arranged horizontally or vertically
1. First write a div as a canvas
The ref value is optional, but it needs to be written
<div style="height: 400px;" ref="echartdom"></div>2. Download echarts
What I downloaded here is "echarts": "^4.9.0", the latest version should also be able to achieve this
npm install echarts3. The main code is as follows
1. The id is the only value, and the source and target lines under links point to the target. If the name is 1, 2, or 3, you can delete the id value, so that you can also connect by point name
2.name is the name of the point
3.type is used to determine which picture to use
4.data=[[],[],[]], this is the level, the first [] is the first layer
5.link, as the name suggests, is used to connect
6. In terms of image import, I wrote three import methods, according to my own project, image://fixed, do not delete
import echarts from 'echarts';
export default {
data() {
return {
};
},
mounted() {
this.echarsquery();
},
methods: {
echarsquery() {
const echart = echarts.init(this.$refs.echartdom);
let data = [
[{ id: '分析指标',name:"点位1", type: '0' }],
[{ id: '1', name:"点位1",type: '0' }],
[
{ id: '2', name:"点位2", type: '0' },
{ id: '3', name:"点位3", type: '0' },
{ id: '4', name:"点位4", type: '0' },
{ id: '5', name:"点位5", type: '0' }
],
[
{ id: '6', name:"点位6", type: '0' },
{ id: '7', name:"点位7", type: '0' },
{ id: '8', name:"点位8", type: '0' },
{ id: '9', name:"点位9", type: '1' }
],
[{ name: '10', type: '0' }]
];
let l = 5;
let series = [];
data.forEach((item, i) => {
const s = item.length; // segment 段数
const base = Math.round((l * 100) / (s + 1));//值越小画布越宽，线越长
item.forEach((item1, j) => {
item1.x = base * (j + 1);//水平还是垂直排列只需要把xy的顺序切换就行
item1.y = 100 + 150 * i;
if (i == 0) {
item1.symbolSize = 160;
}
series.push(item1);
});
});
console.log(series, '段数');
let option = {
backgroundColor: '#000',//画布背景颜色
grid: {
top:20,
containLabel: true
},
series: [
{
type: 'graph',
layout: 'none',
symbolSize: 40,
symbol: (v, params) => {
// 根据type判断图片
if (params.data.type == 1) {
return `image://${require('@/assets/img/img.jpg')}`;
}
if (params.dataIndex) {
return "image://https://ts1.cn.mm.bing.net/th/id/R-C.8d3bd79b3c79c29c28b77d95dc949a20?rik=CItp4J1WJ6zj%2fA&riu=http%3a%2f%2fb157.photo.store.qq.com%2fpsb%3f%2f0cfe0398-1051-44f5-ba2e-d27742b52ab5%2fRKDHie6uwkitUT7FIf2QzqPjG9Bper2nreXpvaMZwiU!%2fb%2fdA2To12oGQAA%26bo%3dWAKQAe0!%26su%3d0267982465%26rf%3d2-9&ehk=tuB%2bS5A0mAkWrAMiP6tavVwtLw2s0bCNvNmxGcwVqUM%3d&risl=&pid=ImgRaw&r=0";
} else {
return `image://${this.first}`;//base64编码png图片，太长了就不展示了
}
},
roam: false,
lineStyle: {
color: '#ffeb00',
type: 'dashed', //虚线
dashOffset: 5
},
label: {
normal: {
show: true,
position: 'top', //'inside',
textStyle: {
fontSize: 10,
color: '#d3ecf3'
// padding:[-20, 0, 20, 0]
}
}
},
focusNodeAdjacency: true,
edgeSymbol: ['', 'arrow'],
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [2, 10], //箭头的大小
data: series,
links: [
{
source: '1', //点位
target: '分析指标' //箭头指向目标
},
{
source: '1', //点位
target: '2' //目标
},
{
source: '1', //点位
target: '3' //目标
},
{
source: '1', //点位
target: '4' //目标
},
{
source: '1', //点位
target: '5' //目标
},
{
source: '2', //点位
target: '6' //目标
},
{
source: '3', //点位
target: '7' //目标
},
{
source: '4', //点位
target: '8' //目标
},
{
source: '5', //点位
target: '9' //目标
},
{
source: '6', //点位
target: '10' //目标
},
{
source: '7', //点位
target: '10' //目标
},
{
source: '8', //点位
target: '10' //目标
},
{
source: '9', //点位
target: '10' //目标
},
]
}
]
};
echart.setOption(option);
}
}}This is the end of the article, I hope it will be helpful to you~