feat: 完善折线,柱状类的修改主题功能

src/views/AI/chat/class/bar.ts

@@ -34,7 +34,7 @@ export class BarChart {
     const option = {
       backgroundColor: this.styleColor.backgroundColor,
       title: {
-        text: '图表标题',
+        text: this.chartData.title,
         left: 'center',
         top: '3%',
         textStyle: {
@@ -63,6 +63,10 @@ export class BarChart {
       },
       yAxis: {
         type: 'value',
+        name:this.chartData.unit,
+        nameTextStyle:{
+            color:this.styleColor.axisLabelColor
+        },
         axisLabel: {
           color: this.styleColor.axisLabelColor,
           fontSize: 12
@@ -147,6 +151,9 @@ export class BarChart {
         } //x轴标题
       },
       yAxis: {
+        nameTextStyle:{
+            color:this.styleColor.axisLabelColor
+        },
         axisLabel: {
           color: this.styleColor.axisLabelColor
         },

src/views/AI/chat/class/index.ts

@@ -1,4 +1,4 @@
 
 
-
+export { LineChart } from './line';
 export { BarChart } from './bar';

src/views/AI/chat/class/line.ts

@@ -0,0 +1,185 @@
+import * as echarts from 'echarts'
+
+interface BarChartOptions {
+  title?: string
+  unit?: string
+  xData: string[]
+  data: number[]
+}
+
+export class LineChart {
+  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',
+            name:'个',
+            nameTextStyle:{
+                color:this.styleColor.axisLabelColor
+            },
+            axisLabel: {
+              color: this.styleColor.axisLabelColor,
+              fontSize: 12
+            },
+            splitLine: {
+              lineStyle: {
+                color: this.styleColor.axisLineColor,
+                opacity: 0.5
+              }
+            }
+          },
+          series: [
+            {
+            type: 'line',
+              data: this.chartData.data,
+              smooth: true,
+              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:'#0A50FF',
+                  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: {
+              nameTextStyle:{
+                  color:this.styleColor.axisLabelColor
+              },
+              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
+            }
+          }
+}

src/views/AI/chat/index.vue

@@ -56,7 +56,7 @@
 import { ref, reactive, onMounted, onUnmounted, watch, nextTick } from 'vue'
 import { getAiMsg } from '@/api/ai.js'
 import moment from 'moment'
-import { BarChart } from './class/index'
+import {LineChart, BarChart } from './class/index'
 import userIcon from '@/assets/images/ai/user-icon.png'
 import aiIcon from '@/assets/images/ai/ai-icon.png'
 //输入框加载
@@ -76,7 +76,9 @@ let bar = null
  * 页面初始完成
  */
 onMounted(() => {
-  bar = new BarChart('barEcharts', {
+  bar = new LineChart('barEcharts', {
+    title:'图表标题',
+    unit:'元',
     xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
     data: [120, 200, 150, 80, 70, 110, 130]
   })