Question

考虑工作流程的视觉表达时，有向图可能是想到的第一个解决方案之一。

我的应用程序已经利用了ECharts，所以我也想使用它为我的工作流程生成图形。

以下是嵌套定向工作流的基本示例：

ECharts中是否有任何可用作容器的组件？并与之链接（类似于上图中的red“容器”？

更新：created an issue在ECharts Github存储库上，以帮助推动这一发展。对于这个用例，两个ECharts系列之间的链接也应该有用。

Answer 1

由于某种原因，在我看来您为您的任务选择了错误的工具。尽管有很多可能性，Echarts还是设计了可视化数据，而不是使用它们。当然，您可以编写任何业务逻辑，它都会起作用，但是您会花费太多时间。据我了解，您希望介于flowchart和BPMN之间。我建议您看看sigmajs，cytoscapejs或many more，如果您什么都没选择，请尝试执行以下步骤。

要制作类似容器的东西，我将尝试配置三个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 }
  ]
}

ОК。我们有三个具有自己坐标系的组件，我们可以通过简单的坐标[x，y]在区域10x10内绘制类似图形的图形。还剩下什么呢？如图所示绘制组件。为此，Echarts使用组件graphic，我们可以尝试在中心绘制一个小的组件。

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>

ECharts嵌套（有向）图

1 个答案: