Search code examples
angulartypescriptecharts

Apache Echarts - Customizing nodes shape and values on node hovering for network graph in Echarts

I have two questions on customizing nodes and edges of echarts network graph :-

  1. How can we change the shape of node from circular to square ?
  2. How can we display custom data on hovering of nodes and edges? Few examples would be appreciated.

This is how it currently looks

This is how I want it to be.

API Data

{
    "AppData": {
        "data": [
            {
                "name": "CNF",
                "id": "CNF",
                "category": 1,
                "value": 0
            },
            {
                "name": "SCPC",
                "id": "SCPC",
                "category": 2,
                "value": 0
            },
            {
                "name": "NRF",
                "id": "NRF",
                "category": 3,
                "value": 0
            },
            {
                "name": "SCPI",
                "id": "SCPI",
                "category": 4,
                "value": 0
            },
            {
                "name": "SCPE",
                "id": "SCPE",
                "category": 5,
                "value": 0
            },
            {
                "name": "NMS",
                "id": "NMS",
                "category": 6,
                "value": 0
            }
        ],
        "link": [
            {
                "source": "CNF",
                "target": "SCPC"
            },
            {
                "source": "SCPC",
                "target": "NRF"
            },
            {
                "source": "SCPC",
                "target": "SCPI"
            },
            {
                "source": "SCPC",
                "target": "SCPE"
            },
            {
                "source": "SCPC",
                "target": "NMS"
            }
        ],
        "categories": [
            {
                "name": "SCPC"
            },
            {
                "name": "CNF"
            },
            {
                "name": "SCPE"
            },
            {
                "name": "SCPI"
            },
            {
                "name": "NRF"
            },
            {
                "name": "NMS"
            }
        ]
    }
}

component.html

<div class="networkGraphDiv">
  <div id="networkGraph" style="width: 100%;  overflow: auto; height: 100%"></div>
</div>

component.ts

  graphData:any=[];
  graphLinks:any=[];
  graphCategories:any=[];

  constructor(
    private httpclient: HttpClient,
    private httpService: HttpService
  ){}

  ngOnInit(): void {
    this.fetchData();
    this.createNetworkChart();
  }

  fetchData() {
    this.httpService.getData(request).subscribe((response: any) => {
    const appData = response['AppData'];
    this.graphData = appData['data'];
    this.graphLinks = appData['link'];
    this.graphCategories = appData['categories'];
    });
  }

  createNetworkChart() {
    var chartDom = document.getElementById('networkGraph');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title: {
        text: '',
        subtext: '',
        top: 'top',
        left: 'left',
      },
      tooltip: {},
      legend: [
        {
          data: ['SCPC', 'CNF', 'SCPE', 'SCPI', 'NRF', 'NMS'],
          position: 'right',
          orient: 'vertical',
          right: 10,
          top: 20,
          bottom: 20,
        },
      ],
      series: [
        {
          name: 'Node Name',
          type: 'graph',
          layout: 'force',
          data: this.graphData,
          links: this.graphLinks,
          categories: this.graphCategories,
          zoom: 2,
          symbolSize: 30,
          label: {
            // position: 'top',
            show: true, // node name to be shown in circle
          },
          edgeSymbol: ['circle', 'arrow'], // for arrow from one to another
          edgeSymbolSize: [4, 15],
  
          emphasis: {
            focus: 'adjacency',
            label: {
              show: false,
            },
          },
          roam: true,
          force: {
            repulsion: 100,
          }
        },
      ],
    };
    option && myChart.setOption(option);
  }
Solution

  • Pls read the echarts documentation on symbol and tooltip formatter.

    Here is a quick example.