fix: 修复主题切换问题！

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

@@ -27,159 +27,159 @@ export class LineChart {
     this.initChart()
   }
 
-    private initChart(): void {
-      this.chart = echarts.init(this.dom)
-      this.setChartOptions()
-    }
+  private initChart(): void {
+    this.chart = echarts.init(this.dom)
+    this.setChartOptions()
+  }
 
-    private setChartOptions(): void {
-        const option = {
-          backgroundColor: this.styleColor.backgroundColor,
-          title: {
-            text:this.chartData.title ,
-            left: 'center',
-            top: '3%',
-            textStyle: {
-              color: this.styleColor.titleColor,
-              fontSize: 14
-            }
-          },
-          grid: {
-            top: '25%',
-            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:this.chartData.unit,
-            nameTextStyle:{
-                color:this.styleColor.axisLabelColor
-            },
-            axisLabel: {
-              color: this.styleColor.axisLabelColor,
-              fontSize: 12
-            },
-            splitLine: {
-              lineStyle: {
-                color: this.styleColor.axisLineColor,
-                opacity: 0.5
-              }
-            }
+  private setChartOptions(): void {
+    const option = {
+      backgroundColor: this.styleColor.backgroundColor,
+      title: {
+        text: this.chartData.title,
+        left: 'center',
+        top: '3%',
+        textStyle: {
+          color: this.styleColor.titleColor,
+          fontSize: 14
+        }
+      },
+      grid: {
+        top: '25%',
+        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: this.chartData.unit,
+        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
           },
-          series: [
-            {
-            type: 'line',
-              data: this.chartData.data,
-              smooth: true,
-              label: {
-                show: true,
-                position: 'top',
-                color: this.styleColor.barValueColor
-              },
-              itemStyle: {
-                color: this.styleColor.barColor
-              }
-            }
-          ]
+          itemStyle: {
+            color: this.styleColor.barColor
+          }
         }
-        this.chart?.setOption(option)
+      ]
+    }
+    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'
       }
+    }
 
-        /**
-         * 主题切换 0-简约 ，1-商务 ,2-科技
-         * @param index
-         */
-        changeColorStyle(index: number): void {
-          if (!this.chart) {
-            console.warn('未读取到元素！')
-            return
+    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
           }
-          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'
-                }
+        }
+      },
+      series: [
+        {
+          label: {
+            color: this.styleColor.barValueColor
+          },
+          itemStyle: {
+            color: this.styleColor.barColor
           }
-      
-          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
-            }
-          }
+  dispose(): void {
+    if (this.chart) {
+      this.chart.dispose()
+      this.chart = null
+    }
+  }
 }

src/views/AI/components/aiChart/index.vue

@@ -38,7 +38,11 @@
                     <AddIssue :issueText="item.text" :list="dictList" v-show="item.add"></AddIssue>
                   </div>
                   <!-- 图表 -->
-                  <initEcharts :item="item" :currentIndex="index" @changeTheme="handlerTheme"></initEcharts>
+                  <initEcharts
+                    :item="item"
+                    :currentIndex="index"
+                    @changeTheme="childParams => handlerTheme(childParams, item)"
+                  ></initEcharts>
                   <!-- 表格 -->
                   <AiTable :obj="item"></AiTable>
                   <!-- 思考 -->
@@ -76,7 +80,7 @@
 </template>
 
 <script setup>
-import { onMounted, ref, nextTick, watch,reactive } from 'vue'
+import { onMounted, ref, nextTick, watch, reactive } from 'vue'
 import {
   AiHint,
   AiTable,
@@ -100,7 +104,7 @@ import { useSystemStore } from '@/store/modules/systemStore/systemStore'
 const systemStore = useSystemStore()
 //输入框加载
 let loading = ref(false)
-const ehcatrsType = ['pie', 'line', 'bar', 'number']
+const ehcatrsType = ['pie', 'line', 'bar', ]
 //聊天室容器
 const scrollContainer = ref(null)
 const history = ref(null)
@@ -149,7 +153,7 @@ const finishInfo = res => {
     item.chartInstanceActiveIndex = 0
     messageList.value.push(item)
     nextTick(() => {
-      initEchart(item.chartInstanceItem, item, index)
+      initEchart(item, item, index)
     })
   })
   setTimeout(() => {
@@ -174,9 +178,9 @@ const saveMessage = async () => {
     const jsonData = JSON.stringify(messageList.value)
     let res
     isloading.value = true
-    if(infoId.value){
-      res = await historyMessageRoomUpdata({ content: jsonData, id: infoId.value})
-    }else{
+    if (infoId.value) {
+      res = await historyMessageRoomUpdata({ content: jsonData, id: infoId.value })
+    } else {
       res = await historyMessageRoom({ content: jsonData, createUserId: systemStore.userInfo.userId || 1 })
     }
     if (res.code === 200) {
@@ -243,8 +247,8 @@ const handleSend = async () => {
       unit: res.unit
     })
     nextTick(() => {
-      const itemData = messageList.value[lastIndex.value]
-      initEchart(itemData.chartInstanceItem, res, lastIndex.value)
+      
+      initEchart(null, res, lastIndex.value)
     })
   } catch {
     updataMessageItem({
@@ -262,29 +266,34 @@ const handleSend = async () => {
  * @param currentItem
  * @param res
  */
-const initEchart = (chartInstanceItem, res, index) => {
+const initEchart = (item, res, index) => {
+  if(!ehcatrsType.includes(res.type)) return
+  let data = item === null  ?  messageList.value[lastIndex.value] : item 
+
   //饼图
   if (res.type === 'pie') {
-    chartInstanceItem = new PieChart(`${res.type}${index}`, {
+    data. chartInstanceItem = new PieChart(`${res.type}${index}`, {
       title: res.title,
       unit: res.unit,
       data: res.data
     })
   } else if (res.type === 'bar') {
-    chartInstanceItem = new BarChart(`${res.type}${index}`, {
+    data. chartInstanceItem = new BarChart(`${res.type}${index}`, {
       title: res.title,
       unit: res.unit,
       xData: res.xData,
       data: res.data
     })
   } else if (res.type === 'line') {
-    chartInstanceItem = new LineChart(`${res.type}${index}`, {
+    data. chartInstanceItem = new LineChart(`${res.type}${index}`, {
       title: res.title,
       unit: res.unit,
       xData: res.xData,
       data: res.data
     })
   }
+  console.log(data)
+ 
 }
 
 /**
@@ -310,7 +319,8 @@ const updataMessageItem = data => {
  * 图表切换主题
  * @param index
  */
-const handlerTheme = (item, index) => {
+const handlerTheme = (index, item) => {
+  console.log(item)
   if (isWatching.value) {
     pauseWatching()
     isWatching.value = false

src/views/AI/components/initEcharts/index.vue

@@ -1,12 +1,13 @@
 <template>
-  <section v-if="ehcatrsType.includes(item.type)">
-    <div class="echarts-box" :id="item.type + currentIndex"></div>
+  <section  v-if="ehcatrsType.includes(item.type)">
+   
+    <div class="echarts-box" :id="item.type + currentIndex" ></div>
     <div class="echatrs-theme">
       <div class="theme-title">风格切换：</div>
       <div class="theme-list">
         <div
           class="theme-item"
-          @click="handlerTheme(item, themeIndex)"
+          @click="handlerTheme(themeIndex)"
           v-for="(themeItem, themeIndex) in echartsTheme"
           :key="themeIndex"
           :class="item.chartInstanceActiveIndex == themeIndex ? 'activeTheme' : ''"
@@ -35,8 +36,8 @@ const echartsTheme = ['简约风', '商务风', '科技风']
 const ehcatrsType = ['pie', 'line', 'bar', 'number']
 
 
-const handlerTheme = (item,index)=>{
-    emits('changeTheme',item,index)
+const handlerTheme = (index)=>{
+  emits('changeTheme',index)
 }
 </script>