Untitled

import { Component, OnInit } from '@angular/core';
import * as echarts from 'echarts';

@Component({
  selector: 'app-echarts',
  template: `
    <div id="chart" style="width: 600px; height: 400px;"></div>
  `,
  styleUrls: ['./echarts.component.css']
})
export class EchartsComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
    this.renderChart();
  }

  renderChart() {
    const chartElement = document.getElementById('chart');
    const myChart = echarts.init(chartElement);
    
    // Example data
    const data = [820, 932, 901, 934, 1290, 1330, 1320];
    
    const option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: data,
        type: 'line'
      }]
    };
    
    myChart.setOption(option);
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { EchartsComponent } from './echarts.component';

@NgModule({
  declarations: [
    EchartsComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [EchartsComponent]
})
export class AppModule { }