添加散点图雷达图

src/views/home/dataChartEditChat.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="chart-content-chat heightFull d-flex flex-column position-relative overflow-hidden">
     <slot></slot>
-    <div class="chart-content-chat-title mb-3">
+    <!-- <div class="chart-content-chat-title mb-3">
       <v-tabs>
         <v-tab>AI 取数</v-tab>
       </v-tabs>
-    </div>
+    </div> -->
     <div class="chart-content-chat-box overflow-y-auto position-relative element" ref="chatBox" v-loading="loading">
       <div class="pa-3">
         <div
@@ -329,7 +329,7 @@ export default {
         this.conversationId = data.conversation_id
         this.scrollToBottom()
       } catch (error) {
-        ask.content = error.message
+        ask.content = error.message ?? error
       } finally {
         this.disabled = false
       }

src/views/home/index.vue

@@ -2,13 +2,13 @@
   <div class="heightFull widthFull d-flex">
     <HomeSide @update="onUpdate"></HomeSide>
     <div class="d-flex chart heightFull widthFull pa-3">
-      <div v-if="showChart" class="chart-list heightFull overflow-y-auto mr-3">
-        <div v-for="(chart, key) in Charts" :key="key" class="chart-type mb-3" @click="onChange(key)">
+      <div class="chart-list heightFull overflow-y-auto mr-3">
+        <div v-for="item in items" :key="item.key" class="chart-type mb-3" @click="onChange(item.key)">
           <div>
-            <span class="mdi" :class="chart.icon"></span>
+            <span class="mdi" :class="item.icon"></span>
           </div>
           <div>
-            {{ chart.title }}
+            {{ item.title }}
           </div>
         </div>
       </div>
@@ -72,6 +72,16 @@ export default {
       }
     }
   },
+  computed: {
+    items () {
+      return Object.keys(Charts).map(key => {
+        return {
+          key,
+          ...Charts[key]
+        }
+      }).sort((a, b) => a.sort - b.sort)
+    }
+  },
   methods: {
     onClose () {
       this.showChart = false
@@ -93,25 +103,49 @@ export default {
         this.setData()
       })
     },
+    dataAlready (key, data = [[]], config) {
+      switch (key) {
+        case 'pie':
+          return {
+            data: data.map(e => e.map((_e, i) => {
+              return {
+                value: _e,
+                name: config.xAxisData[i] ?? _e
+              }
+            }))
+          }
+        case 'radar': {
+          const _data = data.map(arr => {
+            // 按类型轴分组
+            const _map = new Map()
+            arr.forEach((e, i) => {
+              if (_map.has(config.xAxisData[i])) {
+                _map.get(config.xAxisData[i]).push(e)
+              } else {
+                _map.set(config.xAxisData[i], [e])
+              }
+            })
+            return Array.from(_map, ([name, value]) => ({ name, value }))
+          })
+          return {
+            data: _data,
+            radar: {
+              indicator: config.xAxisData.map((e, i) => ({ name: e, max: Math.max(...data.map(_d => _d[i])) }))
+            }
+          }
+        }
+        default:
+          return { data }
+      }
+    },
     setData () {
       const { data, key, config } = this.chartsOpt
       this.chart.showLoading()
       // 根据key值处理data
       const _option = cloneDeep(Charts[key].option)
       const series = _option.series
-      const _data = []
-      if (key === 'pie') {
-        (data || [[]]).forEach(e => {
-          _data.push(e.map((_e, i) => {
-            return {
-              value: _e,
-              name: config.xAxisData[i] ?? _e
-            }
-          }))
-        })
-      } else {
-        _data.push(...data)
-      }
+      const { data: _data, radar } = this.dataAlready(key, data, config)
+      console.log(_data)
       const _tem = series[0]
       const { data: dataSource, ...opt } = _tem
       data.forEach((d, i) => {
@@ -123,6 +157,9 @@ export default {
       if (_option.xAxis?.data) {
         _option.xAxis.data = config?.xAxisData ?? data[0].map((e, i) => i)
       }
+      if (_option.radar) {
+        _option.radar = radar
+      }
       this.chart.setOption(_option, true)
       this.chart.hideLoading()
     },

src/views/home/utils/options.js

@@ -1,11 +1,13 @@
 // const COLOR = ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00']
 
-export const line = {
-  title: '折线图',
-  icon: 'mdi-chart-line',
+export const bar = {
+  sort: 0,
+  title: '柱状图',
+  icon: 'mdi-chart-bar',
   option: {
     legend: {
-      show: true
+      show: true,
+      left: 'center'
     },
     xAxis: {
       type: 'category',
@@ -17,20 +19,19 @@ export const line = {
     series: [
       {
         data: [],
-        type: 'line',
-        smooth: true
+        type: 'bar'
       }
     ]
   }
 }
 
-export const bar = {
-  title: '柱状图',
-  icon: 'mdi-chart-bar',
+export const line = {
+  sort: 1,
+  title: '折线图',
+  icon: 'mdi-chart-line',
   option: {
     legend: {
-      show: true,
-      left: 'center'
+      show: true
     },
     xAxis: {
       type: 'category',
@@ -42,13 +43,15 @@ export const bar = {
     series: [
       {
         data: [],
-        type: 'bar'
+        type: 'line',
+        smooth: true
       }
     ]
   }
 }
 
 export const pie = {
+  sort: 2,
   title: '饼图',
   icon: 'mdi-chart-pie',
   option: {
@@ -81,10 +84,36 @@ export const pie = {
   }
 }
 
-// // 散点
-// export const scatter = {
-//   title: '散点图',
-//   icon: 'mdi-chart-bubble',
+// 散点
+export const scatter = {
+  sort: 10,
+  title: '散点图',
+  icon: 'mdi-chart-bubble',
+  option: {
+    legend: {
+      show: true
+    },
+    xAxis: {
+      type: 'category',
+      data: []
+    },
+    yAxis: {
+      type: 'value'
+    },
+    series: [
+      {
+        data: [],
+        type: 'scatter'
+      }
+    ]
+  }
+}
+
+// k线图
+// export const candlestick = {
+//   sort: 20,
+//   title: 'K线图',
+//   icon: 'mdi-chart-waterfall',
 //   option: {
 //     legend: {
 //       show: true
@@ -99,8 +128,27 @@ export const pie = {
 //     series: [
 //       {
 //         data: [],
-//         type: 'scatter'
+//         type: 'candlestick'
 //       }
 //     ]
 //   }
 // }
+
+// 雷达图
+export const radar = {
+  sort: 30,
+  title: '雷达图',
+  icon: 'mdi-radar',
+  option: {
+    legend: {
+      show: true
+    },
+    radar: {},
+    series: [
+      {
+        data: [],
+        type: 'radar'
+      }
+    ]
+  }
+}

vue.config.js

@@ -97,19 +97,19 @@ module.exports = defineConfig({
   },
   // babel-loader 是否处理 node_modules 中的依赖包，处理哪些依赖包，参数类型: boolean | Array<string | RegExp>
   transpileDependencies: [
-    '@vue-office/excel',
-    'vue-demi',
-    '@vue-office',
-    'xlsx',
-    'exceljs',
-    'html2canvas',
-    '@handsontable',
-    '@handsontable/vue',
-    'handsontable',
-    'handsontable/registry',
-    'js-base64',
-    'vis-network',
-    'vuetify',
-    'axios'
+    // '@vue-office/excel',
+    // 'vue-demi',
+    // '@vue-office',
+    // 'xlsx',
+    // 'exceljs',
+    // 'html2canvas',
+    // '@handsontable',
+    // '@handsontable/vue',
+    // 'handsontable',
+    // 'handsontable/registry',
+    // 'js-base64',
+    // 'vis-network',
+    // 'vuetify',
+    // 'axios'
   ]
 })