I want to customize the node animation based on its value. Although I am able to change it’s color but I want this node to have some kind of animation. For example I want the border of node to continue blinking or rotating. Is it possible in apache echarts ? It would be of great help if anyone can help with working example.

Here is the my current graph.

Want the border of nodes Just like any of the below two.

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