ai-assistant/src/views/AI/chat/class/bar.ts

import * as echarts from 'echarts'

interface BarChartOptions {
  title?: string
  unit?: string
  xData: string[]
  data: number[]
}

export class BarChart {
  private chart: echarts.ECharts | null = null
  private dom: HTMLElement
  private chartData: any = {}
  private styleColor:any = {
    backgroundColor: '#30333B',
    titleColor: '#fff',
    axisLabelColor: '#5C6272',
    axisLineColor: '#3F404D',
    barColor: '#3071EC',
    barValueColor: '#fff'
  }

  constructor(containerId: string, chartData: BarChartOptions) {
    this.dom = document.getElementById(containerId)!
    this.chartData = chartData
    this.initChart()
  }

  private initChart(): void {
    this.chart = echarts.init(this.dom)
    this.setChartOptions()
  }
  private setChartOptions(): void {
    const option = {
      backgroundColor: this.styleColor.backgroundColor,
      title: {
        text: '图表标题',
        left: 'center',
        top: '3%',
        textStyle: {
          color: this.styleColor.titleColor,
          fontSize: 14
        }
      },
      grid: {
        top: '18%',
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: this.chartData.xData,
        axisLine: { lineStyle: { color: this.styleColor.axisLineColor, width: 1 } }, //x轴线
        axisTick: {
          show: false //不显示X轴刻度线
        },
        axisLabel: {
          color: this.styleColor.axisLabelColor,
          fontSize: 12
        } //x轴标题
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          color: this.styleColor.axisLabelColor,
          fontSize: 12
        },
        splitLine: {
          lineStyle: {
            color: this.styleColor.axisLineColor,
            opacity: 0.5
          }
        }
      },
      series: [
        {
          type: 'bar',
          data: this.chartData.data,
          label: {
            show: true,
            position: 'top',
            color: this.styleColor.barValueColor
          },
          itemStyle: {
            color: this.styleColor.barColor
          }
        }
      ]
    }
    this.chart?.setOption(option)
  }

  /**
   * 主题切换 0-简约 ，1-商务 ,2-科技
   * @param index
   */
  changeColorStyle(index: number): void {
    if (!this.chart) {
      console.warn('未读取到元素！')
      return
    }
    if (index === 0) {
      this.styleColor = {
        backgroundColor: '#30333B',
        titleColor: '#fff',
        axisLabelColor: '#5C6272',
        axisLineColor: '#3F404D',
        barColor: '#3071EC',
        barValueColor: '#fff'
      }
    } else if (index === 1) {
      this.styleColor = {
        backgroundColor: '#FFFFFF',
        titleColor: '#333',
        axisLabelColor: '#737373',
        axisLineColor: '#D9D9D9',
        barColor: '#6790EA',
        barValueColor: '#333'
      }
    }else{
        this.styleColor = {
            backgroundColor: 'rgba(80,122,252,0.1)',
            titleColor: '#fff',
            axisLabelColor: '#7A8195',
            axisLineColor: '#3F404D',
            barColor:new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(80, 122, 252, 1)' },
                { offset: 1, color: 'rgba(80, 122, 252, 0)' }
              ]),
            barValueColor: '#fff'
          }
    }

    this.chart.setOption({
      backgroundColor: this.styleColor.backgroundColor,
      title: {
        textStyle: {
          color: this.styleColor.titleColor
        }
      },
      xAxis: {
        axisLine: { lineStyle: { color: this.styleColor.axisLineColor } }, //x轴线
        axisLabel: {
          color: this.styleColor.axisLabelColor
        } //x轴标题
      },
      yAxis: {
        axisLabel: {
          color: this.styleColor.axisLabelColor
        },
        splitLine: {
          lineStyle: {
            color: this.styleColor.axisLineColor
          }
        }
      },
      series: [
        {
          label: {
            color: this.styleColor.barValueColor
          },
          itemStyle: {
            color: this.styleColor.barColor
          }
        }
      ]
    })
  }

  dispose(): void {
    if (this.chart) {
      this.chart.dispose()
      this.chart = null
    }
  }
}