How to add a eCharts DataZoom to a graph

Question

I have implemented an eCharts graph. See this fiddle:

https://jsfiddle.net/qgf4c2jy/3/

    option = {
        title: {
            text: 'Basic Graph'
        },
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [
            {
                type: 'graph',
                layout: 'none',
                symbolSize: 50,
                roam: true,
                label: {
                    show: true
                },
                edgeSymbol: ['circle', 'arrow'],
                edgeSymbolSize: [4, 10],
                edgeLabel: {
                    fontSize: 20
                },
                data: [
                    {
                        name: 'A',
                        x: 300,
                        y: 300
                    },
                    {
                        name: 'B',
                        x: 800,
                        y: 300
                    },
                    {
                        name: 'C',
                        x: 550,
                        y: 100
                    },
                    {
                        name: 'D',
                        x: 550,
                        y: 500
                    },
                    {
                        name: 'E',
                        x: 1000,
                        y: 300
                    },
                    {
                        name: 'F',
                        x: 1200,
                        y: 300
                    }
                ],
                // links: [],
                links: [
                    {
                        source: 'A',
                        target: 'C'
                    },
                    {
                        source: 'B',
                        target: 'C'
                    },
                    {
                        source: 'B',
                        target: 'D'
                    },
                    {
                        source: 'A',
                        target: 'D'
                    },
                    {
                        source: 'B',
                        target: 'E'
                    },
                    {
                        source: 'E',
                        target: 'F'
                    }
                ],
                lineStyle: {
                    opacity: 0.9,
                    width: 2,
                    curveness: 0
                }
            }
        ]
    };

The resulting graph basically looks like this:

The x position of each node corresponds to the time axis. Thus, in this example graph, "E" happens before "F" and after "B".

How can I extend this graph with a DataZoom on the xAxis like in this example? https://echarts.apache.org/examples/en/editor.html?c=custom-error-scatter

Answer 1

Encoding the X/Y data as an array under the property value in the data object seems to work for coordinateSystem cartesian2d.

Example:

const data = [
  { name: 'A', value: [300, 300] },
  { name: 'B', value: [800, 300] },
  { name: 'C', value: [550, 100] },
  { name: 'D', value: [550, 500] },
  { name: 'E', value: [1000, 300] },
  { name: 'F', value: [1200, 300] }
];

const links = [
  { source: 'A', target: 'C' },
  { source: 'B', target: 'C' },
  { source: 'B', target: 'D' },
  { source: 'A', target: 'D' },
  { source: 'B', target: 'E' },
  { source: 'E', target: 'F' }
];

option = {
  title: {
    text: 'Basic Graph'
  },
  tooltip: {},
  xAxis: {max: 1400},
  yAxis: {max: 600},
  dataZoom: {type: 'slider'},
  series: [
    {
      type: 'graph',
      coordinateSystem: 'cartesian2d',
      layout: 'none',
      symbolSize: 50,
      roam: true,
      label: {
        show: true
      },
      edgeSymbol: ['circle', 'arrow'],
      edgeSymbolSize: [4, 10],
      edgeLabel: {
        fontSize: 20
      },
      data: data,
      links: links,
      lineStyle: {
        opacity: 0.9,
        width: 2,
        curveness: 0
      }
    }
  ]
};