Мне почему-то кажется, что вы выбрали не тот инструмент для своих задач. Несмотря на богатые возможности Echarts, предназначены для визуализации данных, а не для работы с ними. Конечно, вы можете написать любую бизнес-логию c, и она будет работать, но вы потратите слишком много времени. Насколько я понимаю, вам нужно что-то среднее между блок-схемой и BPMN . Я рекомендую взглянуть на sigma js, cytoscape js или многие другие , и если вы ничего не выберете, попробуйте выполнить следующие шаги.
Чтобы создать что-то вроде контейнера, я бы попытался настроить три grids, кажется, самый простой способ позиционирования графика на холсте:
- Сделайте три сетки и равномерно распределить их по горизонтали.
grid: [
{ id: 'g01', show: false, x: '0%', y: 0, width: '33%', height: '100%' },
{ id: 'g02', show: false, x: '33%', y: 0, width: '33%', height: '100%' },
{ id: 'g03', show: false, x: '66%', y: 0, width: '33%', height: '100%' },
],
Теперь вам нужна система координат для каждой сетки, которая поможет вам вычислить положение точки не от нуля, а лучше установить ноль для каждого участка.
yAxis: [
{ gridIndex: 0, type: 'value', min: 0, max: 10, show: false, splitNumber: 10 },
{ gridIndex: 1, type: 'value', min: 0, max: 10, show: false, splitNumber: 10 },
{ gridIndex: 2, type: 'value', min: 0, max: 10, show: false, splitNumber: 10 },
],
xAxis: [
{ gridIndex: 0, type: 'value', min: 0, max: 10, show: false, splitNumber: 10 },
{ gridIndex: 1, type: 'value', min: 0, max: 10, show: false, splitNumber: 10 },
{ gridIndex: 2, type: 'value', min: 0, max: 10, show: false, splitNumber: 10 },
],
Хорошо, у вас есть почти шахматная доска, разделенная на секции (компоненты). Добавим данные для визуализации нашей работы. Здесь я привел только часть данных, остальные смотрите в примере ниже.
{
xAxisIndex: 0,
yAxisIndex: 0,
type: 'graph',
layout: 'none',
coordinateSystem: 'cartesian2d',
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [5, 10],
symbol: 'none',
data: [[1,6], [3,6], [5,6], [7,6], [9,6]],
links: [
{ source: 0, target: 1 },
{ source: 1, target: 2 },
{ source: 2, target: 3 },
{ source: 3, target: 4 },
{ source: 4, target: 5 }
]
}
ОК. У нас есть три компонента с собственными системами координат, и мы можем нарисовать что-то вроде графика внутри области 10x10 по простым координатам [x, y]. Что осталось делать? Нарисуйте компоненты как на картинке. Для этих целей Echarts использует компонент
graphi c, и мы можем попытаться нарисовать небольшой компонент в центре.
graphic: [{
type: 'group',
left: '33%',
top: 'bottom',
children: [{
type: 'rect',
z: 0,
bounding: 'raw',
shape: { width: 1024 / 100 * 33, height: document.querySelector('#main').clientHeight - (document.querySelector('#main').clientHeight / 6), r:5 },
style: {
fill: '#fff',
stroke: '#555',
lineWidth: 1,
}
},{ ... }
]
Вы получите что-то вроде этого:
var xAxisData = ['Cat01', 'Cat02', 'Cat03', 'Cat04', 'Cat05'];
var seriesData = [6, 6, 6, 6, 6];
var myChart = echarts.init(document.getElementById('main'));
var option = {
grid: [{
id: 'g01',
show: false,
x: '0%',
y: 0,
width: '33%',
height: '100%'
},
{
id: 'g02',
show: false,
x: '33%',
y: 0,
width: '33%',
height: '100%'
},
{
id: 'g03',
show: false,
x: '66%',
y: 0,
width: '33%',
height: '100%'
},
],
yAxis: [{
gridIndex: 0,
type: 'value',
min: 0,
max: 10,
show: false,
splitNumber: 10
},
{
gridIndex: 1,
type: 'value',
min: 0,
max: 10,
show: false,
splitNumber: 10
},
{
gridIndex: 2,
type: 'value',
min: 0,
max: 10,
show: false,
splitNumber: 10
},
],
xAxis: [{
gridIndex: 0,
type: 'value',
min: 0,
max: 10,
show: false,
splitNumber: 10
},
{
gridIndex: 1,
type: 'value',
min: 0,
max: 10,
show: false,
splitNumber: 10
},
{
gridIndex: 2,
type: 'value',
min: 0,
max: 10,
show: false,
splitNumber: 10
},
],
series: [{
xAxisIndex: 0,
yAxisIndex: 0,
type: 'graph',
layout: 'none',
coordinateSystem: 'cartesian2d',
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [5, 10],
symbol: 'none',
data: [
[1, 6],
[3, 6],
[5, 6],
[7, 6],
[9, 6]
],
links: [{
source: 0,
target: 1
},
{
source: 1,
target: 2
},
{
source: 2,
target: 3
},
{
source: 3,
target: 4
},
{
source: 4,
target: 5
}
]
}, {
xAxisIndex: 1,
yAxisIndex: 1,
type: 'graph',
layout: 'none',
coordinateSystem: 'cartesian2d',
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [10, 10],
symbol: 'none',
data: [
[1, 6],
[4, 6],
[6, 6],
[1, 3],
[6, 3]
],
links: [{
source: 0,
target: 1,
lineStyle: {
color: 'black'
}
},
{
source: 1,
target: 2,
lineStyle: {
color: 'black'
}
},
{
source: 2,
target: 3,
lineStyle: {
color: 'black'
}
},
{
source: 3,
target: 4,
lineStyle: {
color: 'black'
}
},
{
source: 4,
target: 5,
lineStyle: {
color: 'black'
}
},
],
}],
graphic: [{
type: 'group',
left: '33%',
top: 'bottom',
children: [{
type: 'rect',
z: 0,
bounding: 'raw',
shape: {
width: 1024 / 100 * 33,
height: document.querySelector('#main').clientHeight - (document.querySelector('#main').clientHeight / 6),
r: 5
},
style: {
fill: '#fff',
stroke: '#555',
lineWidth: 1,
}
},
{
type: 'line',
z: 2,
shape: {
x1: 0,
y1: 338 / 7,
x2: 338,
y2: 338 / 7,
},
style: {
stroke: '#555',
lineWidth: 1,
}
},
{
type: 'text',
z: 3,
position: [10, 15],
style: {
text: ['WalkSign'],
font: '18px Verdana'
}
}
]
}]
};
myChart.setOption(option);
console.log((1024 / 100 * 33))
<script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script>
<div id="main" style="width: 1024px;height:400px;"></div>