Search code examples
echartsxstate

ECharts Nested (directed) Graph

When thinking on the visual expression for a workflow, a directed-graph may be one of the first solutions that comes to mind.

My app already leverage ECharts so I'd like to use it as well to generate a graph for my workflow.

Following is a basic example of a nested-directed-workflow: State machine example with nested child machines

Is there any component in ECharts that can be used as a container? and be linked to/from (similar to the red "container" in the above image?

UPDATE: created an issue on ECharts Github repo to help drive this forward. Linking between two ECharts Series should be useful for this use-case as well.

Solution

  • For some reason it seems to me you have chosen the wrong tool for your tasks. Despite the rich possibilities Echarts designed to visualize the data, rather than working with them. Of course you can write any business logic and it will work but you will spend too much time. As I understand you want something in between flowchart and BPMN. I recommend taking a look at sigmajs, cytoscapejs or many more and if you choose nothing, then try follow the next steps.

    For make something like container I would be try to configure three grids, it seems the easiest way to positioning graph on canvas:

    1. Make the three grids and distribute them on horizontal evenly.
    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%' },
],
    1. Now you need the coordinate system for the each grid that help you calculate the point position not from base zero but better set zero for each section.
    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 },
],
    1. OK, you have almost a chessboard divided into sections (components). Let's add data to visualize our work. Here I gave only part of the data, see the rest in the example below.
    {
  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 }
  ]
}
    1. ОК. We have three components with own coordinate systems and we can draw something like graph inside area 10x10 by the simple coordinates [x,y]. What's left to do? Draw components as on the picture. For these purposes Echarts uses component graphic and we can try to draw a small component in the center.
    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,
      }
    },{ ... }
  ]

    You will get something like this:

    enter image description here

    Source:

    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/[email protected]/dist/echarts.min.js"></script>
<div id="main" style="width: 1024px;height:400px;"></div>