auseft.platform.datav/src/app/routes/data-v/second1/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 = {
    tooltip: {
      trigger: 'item',
      borderColor: '#00eff8',
      backgroundColor: '#12192C',
      padding: [6, 14, 6, 14],
      textStyle: {
        fontSize: 14,
        color: '#74FAFB',
      },
      position: 'top',
      axisPointer: {
        type: 'shadow'
      }
    },
    series: [
      {
        type: 'gauge',
        startAngle: 180,
        endAngle: 0,
        center: ['50%', '75%'],
        radius: '90%',
        min: 0,
        max: 1,
        splitNumber: 8,
        axisLine: {
          lineStyle: {
            width: 6,
            color: [
              [0.25, '#74FAFB'],
              [0.5, '#74FAFB'],
              [0.75, '#74FAFB'],
              [1, '#74FAFB']
            ]
          }
        },
        pointer: {
          icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
          length: '12%',
          width: 20,
          offsetCenter: [0, '-60%'],
          itemStyle: {
            color: 'auto'
          }
        },
        axisTick: {
          length: 12,
          lineStyle: {
            color: 'auto',
            width: 2
          }
        },
        splitLine: {
          length: 20,
          lineStyle: {
            color: 'auto',
            width: 5
          }
        },
        axisLabel: {
          color: '#464646',
          fontSize: 20,
          distance: -60,
          rotate: 'tangential',
          formatter: function (value: any) {
            if (value === 0.875) {
              return '';
            } else if (value === 0.625) {
              return '';
            } else if (value === 0.375) {
              return '';
            } else if (value === 0.125) {
              return '';
            }
            return '';
          }
        },
        title: {
          offsetCenter: [0, '-10%'],
          fontSize: 20
        },
        tooltip: {
          trigger: 'item',
          borderColor: '#00eff8',
          backgroundColor: '#12192C',
          padding: [6, 14, 6, 14],
          textStyle: {
            fontSize: 14,
            color: '#74FAFB',
          },
          position: 'top',
          axisPointer: {
            type: 'shadow'
          }
        },
        detail: {
          fontSize: 30,
          offsetCenter: [0, '-5%'],
          valueAnimation: true,
          formatter: function (value: any) {
            return Math.round(value * 100) + '';
          },
          color: 'inherit'
        },

      }
    ]
  };
  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, 'dark');

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


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

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