How can I navigate to different page by clicking on the bars of bar chart by echart?

Question

So I have loaded the bar chart from echart and it's working fine. But I'm unable to add functionality such as clicking on the bar of the bar chart should redirect me to new page such as alert page. I'm sharing both my chart.component.ts and chart.component.html code. Please help me with this

//chart.component.ts
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable no-var */
/* eslint-disable @typescript-eslint/no-explicit-any */
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import * as echarts from 'echarts';


@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrl: './chart.component.css'
})
export class ChartComponent implements OnInit{
  constructor(private router: Router) { }

  ngOnInit(): void {
    type EChartsOption = echarts.EChartsOption;

    var chartDom = document.getElementById('main')!;
   
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    // There should not be negative values in rawData
    const rawData = [
      [100, 302, 301, 334, 390, 330, 320],
      [320, 132, 101, 134, 90, 230, 210],
      [220, 182, 191, 234, 290, 330, 310],
      [150, 212, 201, 154, 190, 330, 410],
      [820, 832, 901, 934, 1290, 1330, 1320]
    ];
    const totalData: number[] = [];
    for (let i = 0; i < rawData[0].length; ++i) {
      let sum = 0;
      for (let j = 0; j < rawData.length; ++j) {
        sum += rawData[j][i];
      }
      totalData.push(sum);
    }

    const grid = {
      left: 100,
      right: 100,
      top: 50,
      bottom: 50
    };

    const series: echarts.BarSeriesOption[] = [
      'Direct',
      'Mail Ad',
      'Affiliate Ad',
      'Video Ad',
      'Search Engine'
    ].map((name, sid) => {
      return {
        name,
        type: 'bar',
        stack: 'total',
        barWidth: '60%',
        label: {
          show: true,
          formatter: (params: any) => Math.round(params.value * 1000) / 10 + '%'
        },
        data: rawData[sid].map((d, did) =>
          totalData[did] <= 0 ? 0 : d / totalData[did]
        )
      };
    });

    const legendData = series.map(seriesItem => ({
      name: seriesItem.name as string,
      icon: 'circle',
     
     
      onClick: function () {
        
        console.log('Legend item clicked:', seriesItem.name);
        window.location.href = './alert.component.html' + encodeURIComponent(seriesItem.name as string);
      }
    }));
    const additionalElements = [
      { name: 'Element 1'},
      { name: 'Element 2', link: '/alert' },
     
      
      // Add more elements as needed
    ];

    const addEle = {
      graphic: additionalElements.map((element, index) => ({
        type: 'text',
        left: '60%',
        topPosition: '500px', // Adjust positioning as needed
        style: {
          text: element.name,
          textAlign: 'center',
          fill: '#000',
          fontSize: 12,
          fontWeight: 'bold',
         
        },
         onclick: () => {
          if (element.link) {
            this.router.navigate([element.link]);
          }
        }
      }))
    };
   
   

    

    option = {
      legend: {
        selectedMode: true,

        data: legendData
       
      
      },
      resize: {
        width: 'auto',
        height: 'auto',
        silent: false,
        animation: {
          duration: 0,
          easing: 'auto',
        }
      },
      ...addEle,
      grid,
      yAxis: {
        type: 'value'
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      series
    };
   

    option && myChart.setOption(option);
   

   



  }
   onLegendClick(name: string): void {
     this.router.navigate(['/alert', name]);
  }
  
 


}

So in above code I've tried creating onclick function but it just works for normal html links that's added below the chart. I want to add the click function to navigate to alert page by clicking on bar chart.

<div id="main" style="height: 400px;"></div>
<div id="custom-legend">
  <ul>
    <li (click)="onLegendClick('Direct')">Direct</li>
    <li (click)="onLegendClick('Mail Ad')">Mail Ad</li>
    <li (click)="onLegendClick('Affiliate Ad')">Affiliate Ad</li>
    <li (click)="onLegendClick('Video Ad')">Video Ad</li>
    <li (click)="onLegendClick('Search Engine')">Search Engine</li>
    <!-- Additional elements can be added here -->
  </ul>
</div>

Answer 1

Echarts gives click event: more info

Here, I have implemented basic example

EXAMPLE: