feat: init chart

Author: ulleo

frontend/src/views/chat/ChatAnswer.vue

@@ -85,7 +85,7 @@ const chartRef = ref()
 
 function onTypeChange(type: string) {
   console.log(type)
-  nextTick(()=>{
+  nextTick(() => {
     chartRef.value?.destroyChart()
     chartRef.value?.renderChart()
   })
@@ -102,9 +102,10 @@ function onTypeChange(type: string) {
       <el-tabs v-model="settings.type" class="type-tabs" @tab-click="handleClick" tab-position="top">
         <el-tab-pane label="Chart" name="chart">
           <template #label>
-            <el-select v-model="chartType" style="width: 80px" :disabled="settings.type!== 'chart'" @change="onTypeChange">
+            <el-select v-model="chartType" style="width: 80px" :disabled="settings.type!== 'chart'"
+                       @change="onTypeChange">
               <el-option value="table">table</el-option>
-              <el-option value="cloumn">cloumn</el-option>
+              <el-option value="column">column</el-option>
               <el-option value="bar">bar</el-option>
               <el-option value="line">line</el-option>
               <el-option value="pie">pie</el-option>

frontend/src/views/chat/component/Component.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {computed, onMounted, onUnmounted, ref} from "vue";
+import {computed, onMounted, onUnmounted} from "vue";
 import {getChartInstance} from "@/views/chat/component/index.ts";
 import type {BaseChart} from "@/views/chat/component/BaseChart.ts";
 
@@ -35,21 +35,21 @@ const axis = computed(() => {
   return _list
 })
 
-const chartInstance = ref<BaseChart>()
+let chartInstance: BaseChart | undefined
 
 function renderChart() {
-  chartInstance.value = getChartInstance(params.type, chartId.value)
-  console.log(chartInstance.value)
-  if (chartInstance.value) {
-    chartInstance.value.init(axis.value, params.data)
-    chartInstance.value.render()
+  chartInstance = getChartInstance(params.type, chartId.value)
+  console.log(chartInstance)
+  if (chartInstance) {
+    chartInstance.init(axis.value, params.data)
+    chartInstance.render()
   }
 }
 
 function destroyChart() {
-  if (chartInstance.value) {
-    chartInstance.value.destroy()
-    chartInstance.value = undefined
+  if (chartInstance) {
+    chartInstance.destroy()
+    chartInstance = undefined
   }
 }