First, introduce ECharts

  1. Choose the version you need to download from the official website. We provide different packages of downloads according to the needs of developers in terms of functions and volume. If you do not have requirements in terms of volume, you can directly download the full version. The development environment recommends downloading the source code version, which contains common error prompts and warnings.
  2. Download the latest ECharts release from GitHub, and you can find the latest ECharts library in the dist folder.
  3. NPM install echarts –save, see “Using echarts in Webpack”
  4. CDN introduction, you can find the latest version of ECharts on CDNJS, NPMCDN or domestic booTCDN.
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <! ECharts --> <script SRC ="echarts.min.js"></script>
</head>
</html>
Copy the code

I NPM echarts directly in the React project, so I load the Graph on demand in the entry file

// Import ECharts from'echarts/lib/echarts'; // Import a mind map'echarts/lib/chart/graph';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
Copy the code

Set up the base canvas

1. Prepare a DOM element for the canvas to set the width and height

<body> <! Prepare a DOM with size (width and height) for ECharts --> <div id="main" style="width: 600px; height:400px;"></div>
</body>
Copy the code

2. Get the DOM element in JS and initialize the canvas

 var myChart = echarts.init(document.getElementById('main'));
Copy the code

Then fill in the data via Echarts’ setOpton.

3. Data analysis

The data to be dumped consists of two parts:

  • Node Node data
  • Link Path data

The link value from the back end is introduced in the following format:

links: [{
            source: Nodes' 1 ',
            target: '3'
        }, {
            source: Nodes' 2 ',
            target: '3'
        }, {
            source: Nodes' 2 ',
            target: 'node 4'
        }, {
            source: Nodes' 1 ',
            target: 'node 4'
        }]
Copy the code

Push back-end data into a link set:

let links = [];
for(var i in data.relation){
  links.push({
    source : data.relation[i].source,
    target : data.relation[i].target
  });
}
Copy the code

Node data needs to give the coordinates of nodes to form the final canvas, and this coordinate needs to be calculated according to our actual data level and the number of each level.

4. Compute node coordinates

First of all, the canvas size is fixed. In this case I used 600px wide and 400px high. The origin of the canvas is the upper Angle. Assume that the data level is 5, and the number from level 1 to level 5 is 2,3,4,1,1. The calculation process is as follows:

  • First, calculate the width of each level, i.e. 600/ level. In this case, 600px/5 = 120px
  • The abscissa of the node is obtained by multiplying the unit by 120px. The abscissa of level1 to 5 is 120,240,360,480,600
  • Secondly, the ordinate basic cell of each level is calculated. For example, the level of level 3 has four nodes, so the ordinate basic cell N is 400/(4 * 2) = 50
  • If only one node is used in this hierarchy, the ordinate of the node is N; otherwise, the ordinate calculation formula of the node is N * (2 * J-1), where N is the basic cell of the ordinate and j is the index index of the node in the array with level 3
  • After obtaining the x-coordinate array and y-coordinate array of nodes, push into the node set
data2.push({
    name : data.tasks[i].alias,
    value : data.tasks[i].task_name,
    y: 0,
    x: 600-(120 * data.tasks[i].level),
    itemStyle:{
      normal:{color: color}
    }
  })
}
Copy the code

5. Draw ICONS

Draw an icon using echarts’ setOption method:

myChart.setOption({
    title: {
        text: ' '
    },
    tooltip: {},
    nodeScaleRatio: 0,
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    series : [
        {
            type: 'graph',
            layout: 'none',
            symbolSize: 30,
            roam: false,
            label: {
                normal: {
                    show: true
                }
            },
            edgeSymbol: ['circle'.'arrow'], edgeSymbolSize: [4, 10], edgeLabel: { normal: { textStyle: { fontSize: 20 } } }, data: data2, // links: [], links: Opacity: 0, width: 1, curveness: 0}}}]});Copy the code

You can also add events to the node. Click events to display node details. The code is as follows:

myChart.on("click".function (param){ 
  if(param.dataType == "node"){
    _this.setState({visible: true, param: param.data.value}); }});Copy the code

If you want to use react’s this.setState({}); Do not forget to assign this to a variable before setOption because this points to myChart in the click method here.

let _this = this;
Copy the code

This is what the finished product looks like

Finish, pencil refill! Salute!!