auseft.platform.datav/src/app/routes/data-v/s1/chart-component/chart-component.component.ts

import { Component, OnInit, AfterViewInit, OnDestroy, OnChanges, SimpleChanges, Input, ViewChild, ElementRef } from '@angular/core';
import * as echarts from 'echarts';

@Component({
  selector: 'app-chart-component',
  standalone: true,
  templateUrl: './chart-component.component.html',
  styleUrls: ['./chart-component.component.css']
})
export class ChartComponentComponent implements OnInit, OnDestroy, OnChanges {

  @ViewChild('chart', { static: true })
  chartContainer!: ElementRef;
  private chartInstance: echarts.ECharts | null = null;

  // 接收外部传入的配置项（例如：柱状图、折线图等配置）
  @Input() options: echarts.EChartsOption = {};

  /** 默认样式 */

  defaultTooltipOptions = {
    title: {
      textStyle: {
        color: "#ffffff"
      },
    },
    backgroundColor: "#100c2A",
    legend: {
      textStyle: {
        color: '#ffffff'
      },
    },
    tooltip: {
      trigger: 'item',
      borderColor: '#00eff8',
      backgroundColor: '#12192C',
      padding: [6, 14, 6, 14],
      textStyle: {
        fontSize: 14,
        color: '#74FAFB',
      },
      position: 'top',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '3%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      show: false,
      feature: {
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ['line', 'bar'] },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        // prettier-ignore
        data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],

  }
  constructor() { }


  ngOnInit(): void {
    console.log('ChartComponentComponent ngOnInit');
    this.initEcharts();
  }

  ngOnChanges(changes: SimpleChanges): void {

    if (changes['options'] && !changes['options'].isFirstChange()) {
      console.log('ChartComponentComponent ngOnChanges');
      this.updateChartOptions();
    }
  }

  ngOnDestroy(): void {
    if (this.chartInstance) {
      console.log('ChartComponentComponent ngOnInit');
      this.chartInstance.dispose();
    }
  }

  initEcharts(): void {
    const chartDom = this.chartContainer.nativeElement;
    this.chartInstance = echarts.init(chartDom);

    // 设置默认的tooltip配置，如果外部传入了tooltip则会覆盖这里的设置


    // 合并默认和外部传入的配置项
    const mergedOptions = {
      ...this.defaultTooltipOptions,
      ...this.options
    };
    this.chartInstance.setOption(mergedOptions);
  }

  updateChartOptions(): void {
    if (this.chartInstance) {
      this.chartInstance.setOption(this.options);
    }
  }
}