Apache ECharts Basic Example

echarts-basic-example-template

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Apache ECharts Basic Example</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="chart-container">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js">
    </script>
  </body>

</html>

CSS

* {
  margin: 0;
  padding: 0;
}

#chart-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

JavaScript

// var chart = echarts.init(chartDom);
const chart = echarts.init(document.getElementById("chart-container"));
var option;

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
      }
    }
  ]
};

option && chart.setOption(option);


window.addEventListner('resize', chart.resize);