From 4cef22904bbf2b51d9c391ba776fef17f47c3843 Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Tue, 5 May 2026 16:53:26 +0800
Subject: [PATCH] feat(chart): add chart functionality with ECharts integration
 and update output view options

---
 package.json                          |   2 +
 pnpm-lock.yaml                        |  37 ++++++
 src/App.vue                           |   2 +-
 src/components/chart/QueryChart.vue   | 167 ++++++++++++++++++++++++++
 src/components/layout/ContentArea.vue |  29 ++++-
 src/composables/useSqlExecution.ts    |   2 +-
 src/i18n/locales/en.ts                |   8 ++
 src/i18n/locales/zh-CN.ts             |   8 ++
 8 files changed, 250 insertions(+), 5 deletions(-)
 create mode 100644 src/components/chart/QueryChart.vue

diff --git a/package.json b/package.json
index 184bba11be..904f585e7e 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "codemirror": "^6.0.2",
+    "echarts": "^6.0.0",
     "lucide-vue-next": "^1.0.0",
     "pinia": "^3.0.0",
     "reka-ui": "^2.9.6",
@@ -45,6 +46,7 @@
     "tailwind-merge": "^3.5.0",
     "tw-animate-css": "^1.4.0",
     "vue": "^3.5.0",
+    "vue-echarts": "^8.0.1",
     "vue-i18n": "^11.4.0",
     "vue-virtual-scroller": "^3.0.1"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fbb765f7ae..df391e2ad0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -74,6 +74,9 @@ importers:
       codemirror:
         specifier: ^6.0.2
         version: 6.0.2
+      echarts:
+        specifier: ^6.0.0
+        version: 6.0.0
       lucide-vue-next:
         specifier: ^1.0.0
         version: 1.0.0(vue@3.5.33(typescript@5.6.3))
@@ -101,6 +104,9 @@ importers:
       vue:
         specifier: ^3.5.0
         version: 3.5.33(typescript@5.6.3)
+      vue-echarts:
+        specifier: ^8.0.1
+        version: 8.0.1(echarts@6.0.0)(vue@3.5.33(typescript@5.6.3))
       vue-i18n:
         specifier: ^11.4.0
         version: 11.4.0(vue@3.5.33(typescript@5.6.3))
@@ -1556,6 +1562,9 @@ packages:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
 
+  echarts@6.0.0:
+    resolution: {integrity: sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==}
+
   eciesjs@0.4.18:
     resolution: {integrity: sha512-wG99Zcfcys9fZux7Cft8BAX/YrOJLJSZ3jyYPfhZHqN2E+Ffx+QXBDsv3gubEgPtV6dTzJMSQUwk1H98/t/0wQ==}
     engines: {bun: '>=1', deno: '>=2', node: '>=16'}
@@ -2727,6 +2736,9 @@ packages:
   ts-morph@27.0.2:
     resolution: {integrity: sha512-fhUhgeljcrdZ+9DZND1De1029PrE+cMkIP7ooqkLRTrRLTqcki2AstsyJm0vRNbTbVCNJ0idGlbBrfqc7/nA8w==}
 
+  tslib@2.3.0:
+    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
+
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
@@ -2842,6 +2854,12 @@ packages:
       '@vue/composition-api':
         optional: true
 
+  vue-echarts@8.0.1:
+    resolution: {integrity: sha512-23rJTFLu1OUEGRWjJGmdGt8fP+8+ja1gVgzMYPIPaHWpXegcO1viIAaeu2H4QHESlVeHzUAHIxKXGrwjsyXAaA==}
+    peerDependencies:
+      echarts: ^6.0.0
+      vue: ^3.3.0
+
   vue-eslint-parser@10.4.0:
     resolution: {integrity: sha512-Vxi9pJdbN3ZnVGLODVtZ7y4Y2kzAAE2Cm0CZ3ZDRvydVYxZ6VrnBhLikBsRS+dpwj4Jv4UCv21PTEwF5rQ9WXg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -2940,6 +2958,9 @@ packages:
   zod@3.25.76:
     resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
 
+  zrender@6.0.0:
+    resolution: {integrity: sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==}
+
 snapshots:
 
   '@babel/code-frame@7.29.0':
@@ -4277,6 +4298,11 @@ snapshots:
       es-errors: 1.3.0
       gopd: 1.2.0
 
+  echarts@6.0.0:
+    dependencies:
+      tslib: 2.3.0
+      zrender: 6.0.0
+
   eciesjs@0.4.18:
     dependencies:
       '@ecies/ciphers': 0.2.6(@noble/ciphers@1.3.0)
@@ -5529,6 +5555,8 @@ snapshots:
       '@ts-morph/common': 0.28.1
       code-block-writer: 13.0.3
 
+  tslib@2.3.0: {}
+
   tslib@2.8.1: {}
 
   tw-animate-css@1.4.0: {}
@@ -5595,6 +5623,11 @@ snapshots:
     dependencies:
       vue: 3.5.33(typescript@5.6.3)
 
+  vue-echarts@8.0.1(echarts@6.0.0)(vue@3.5.33(typescript@5.6.3)):
+    dependencies:
+      echarts: 6.0.0
+      vue: 3.5.33(typescript@5.6.3)
+
   vue-eslint-parser@10.4.0(eslint@10.2.1(jiti@2.6.1)):
     dependencies:
       debug: 4.4.3
@@ -5709,3 +5742,7 @@ snapshots:
       zod: 3.25.76
 
   zod@3.25.76: {}
+
+  zrender@6.0.0:
+    dependencies:
+      tslib: 2.3.0
diff --git a/src/App.vue b/src/App.vue
index e4c455250e..470930ca18 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -71,7 +71,7 @@ const aiAssistantRef = ref<InstanceType<typeof AiAssistant> | null>(null);
 const selectedSql = ref("");
 const cursorPos = ref(0);
 const formatSqlRequestId = ref(0);
-const activeOutputView = ref<"result" | "explain">("result");
+const activeOutputView = ref<"result" | "explain" | "chart">("result");
 
 const activeTab = computed(() => queryStore.tabs.find((t) => t.id === queryStore.activeTabId));
 
diff --git a/src/components/chart/QueryChart.vue b/src/components/chart/QueryChart.vue
new file mode 100644
index 0000000000..80f041747b
--- /dev/null
+++ b/src/components/chart/QueryChart.vue
@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { use } from "echarts/core";
+import { CanvasRenderer } from "echarts/renderers";
+import { LineChart, BarChart, PieChart } from "echarts/charts";
+import { GridComponent, TooltipComponent, LegendComponent } from "echarts/components";
+import VChart from "vue-echarts";
+import { BarChart3 } from "lucide-vue-next";
+import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import type { QueryResult } from "@/types/database";
+import { useTheme } from "@/composables/useTheme";
+
+use([CanvasRenderer, LineChart, BarChart, PieChart, GridComponent, TooltipComponent, LegendComponent]);
+
+const props = defineProps<{
+  result: QueryResult;
+}>();
+
+const { t } = useI18n();
+const { isDark } = useTheme();
+
+type ChartType = "line" | "bar" | "pie";
+const chartType = ref<ChartType>("bar");
+const xColumn = ref("");
+const yColumns = ref<string[]>([]);
+
+const numericColumns = computed(() =>
+  props.result.columns.filter((_, idx) => props.result.rows.some((row) => typeof row[idx] === "number")),
+);
+
+const allColumns = computed(() => props.result.columns);
+
+watch(
+  () => props.result,
+  () => {
+    const cols = props.result.columns;
+    const numCols = numericColumns.value;
+    xColumn.value = cols.find((c) => !numCols.includes(c)) || cols[0] || "";
+    yColumns.value = numCols.length > 0 ? [numCols[0]] : [];
+  },
+  { immediate: true },
+);
+
+function toggleYColumn(col: string) {
+  const idx = yColumns.value.indexOf(col);
+  if (idx >= 0) {
+    yColumns.value = yColumns.value.filter((c) => c !== col);
+  } else {
+    yColumns.value = [...yColumns.value, col];
+  }
+}
+
+const chartOption = computed(() => {
+  const xIdx = props.result.columns.indexOf(xColumn.value);
+  if (xIdx < 0 || yColumns.value.length === 0) return null;
+
+  const xData = props.result.rows.map((row) => String(row[xIdx] ?? ""));
+
+  if (chartType.value === "pie") {
+    const yIdx = props.result.columns.indexOf(yColumns.value[0]);
+    if (yIdx < 0) return null;
+    return {
+      tooltip: { trigger: "item" },
+      legend: { bottom: 0, textStyle: { color: isDark.value ? "#ccc" : "#333" } },
+      series: [
+        {
+          type: "pie",
+          radius: ["30%", "60%"],
+          data: xData.map((name, i) => ({
+            name,
+            value: Number(props.result.rows[i][yIdx]) || 0,
+          })),
+        },
+      ],
+    };
+  }
+
+  const yIndices = yColumns.value.map((c) => props.result.columns.indexOf(c)).filter((i) => i >= 0);
+
+  return {
+    tooltip: { trigger: "axis" },
+    legend: {
+      bottom: 0,
+      textStyle: { color: isDark.value ? "#ccc" : "#333" },
+    },
+    grid: { left: 60, right: 20, top: 20, bottom: 40 },
+    xAxis: {
+      type: "category" as const,
+      data: xData,
+      axisLabel: { color: isDark.value ? "#aaa" : "#666" },
+    },
+    yAxis: {
+      type: "value" as const,
+      axisLabel: { color: isDark.value ? "#aaa" : "#666" },
+    },
+    series: yIndices.map((yIdx) => ({
+      name: props.result.columns[yIdx],
+      type: chartType.value,
+      data: props.result.rows.map((row) => Number(row[yIdx]) || 0),
+      smooth: chartType.value === "line",
+    })),
+  };
+});
+
+const hasData = computed(() => props.result.rows.length > 0 && numericColumns.value.length > 0);
+</script>
+
+<template>
+  <div class="h-full flex flex-col">
+    <div v-if="!hasData" class="flex-1 flex flex-col items-center justify-center gap-2 text-muted-foreground text-sm">
+      <BarChart3 class="h-10 w-10 opacity-30" />
+      <span>{{ t("chart.noNumericData") }}</span>
+    </div>
+    <template v-else>
+      <div class="h-9 shrink-0 border-b bg-muted/20 px-3 flex items-center gap-3 text-xs">
+        <div class="flex items-center gap-1.5">
+          <span class="text-muted-foreground">{{ t("chart.type") }}</span>
+          <div class="flex gap-0.5">
+            <Button
+              v-for="ct in ['bar', 'line', 'pie'] as ChartType[]"
+              :key="ct"
+              size="sm"
+              :variant="chartType === ct ? 'secondary' : 'ghost'"
+              class="h-6 px-2 text-xs"
+              @click="chartType = ct"
+            >
+              {{ t(`chart.${ct}`) }}
+            </Button>
+          </div>
+        </div>
+        <span class="h-4 w-px bg-border" />
+        <div class="flex items-center gap-1.5">
+          <span class="text-muted-foreground">X</span>
+          <Select :model-value="xColumn" @update:model-value="(v: any) => (xColumn = v)">
+            <SelectTrigger class="h-6 w-auto max-w-40 border-0 bg-transparent px-1 text-xs shadow-none focus:ring-0">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem v-for="col in allColumns" :key="col" :value="col">{{ col }}</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <span class="h-4 w-px bg-border" />
+        <div class="flex items-center gap-1.5">
+          <span class="text-muted-foreground">Y</span>
+          <div class="flex gap-0.5">
+            <Button
+              v-for="col in numericColumns"
+              :key="col"
+              size="sm"
+              :variant="yColumns.includes(col) ? 'secondary' : 'ghost'"
+              class="h-6 px-2 text-xs"
+              @click="toggleYColumn(col)"
+            >
+              {{ col }}
+            </Button>
+          </div>
+        </div>
+      </div>
+      <div class="flex-1 min-h-0 p-2">
+        <VChart v-if="chartOption" :option="chartOption" autoresize class="h-full w-full" />
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/src/components/layout/ContentArea.vue b/src/components/layout/ContentArea.vue
index df0834ae99..8125716827 100644
--- a/src/components/layout/ContentArea.vue
+++ b/src/components/layout/ContentArea.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, defineAsyncComponent } from "vue";
 import { useI18n } from "vue-i18n";
-import { Loader2, Square, Bot, Table2, GitBranch } from "lucide-vue-next";
+import { Loader2, Square, Bot, Table2, GitBranch, BarChart3 } from "lucide-vue-next";
 import { Splitpanes, Pane } from "splitpanes";
 import "splitpanes/dist/splitpanes.css";
 import { Button } from "@/components/ui/button";
@@ -10,6 +10,7 @@ import DataGrid from "@/components/grid/DataGrid.vue";
 import RedisKeyBrowser from "@/components/redis/RedisKeyBrowser.vue";
 import MongoDocBrowser from "@/components/mongo/MongoDocBrowser.vue";
 const ExplainPlanViewer = defineAsyncComponent(() => import("@/components/explain/ExplainPlanViewer.vue"));
+const QueryChart = defineAsyncComponent(() => import("@/components/chart/QueryChart.vue"));
 import { useQueryStore } from "@/stores/queryStore";
 import { canCancelQueryExecution, queryExecutionLabelKey } from "@/lib/queryExecutionState";
 import { databaseDisplayNameForTab } from "@/lib/tabPresentation";
@@ -20,14 +21,14 @@ const props = defineProps<{
   activeTab: QueryTab;
   activeConnection?: ConnectionConfig;
   executableSql: string;
-  activeOutputView: "result" | "explain";
+  activeOutputView: "result" | "explain" | "chart";
   formatSqlRequestId: number;
   selectedSql: string;
   cursorPos: number;
 }>();
 
 const emit = defineEmits<{
-  "update:activeOutputView": [value: "result" | "explain"];
+  "update:activeOutputView": [value: "result" | "explain" | "chart"];
   fixWithAi: [errorMessage: string];
   execute: [sqlOverride?: string];
   cancel: [];
@@ -63,6 +64,12 @@ const activeSqlFormatDialect = computed<SqlFormatDialect>(() => {
 const editorDialect = computed<"mysql" | "postgres">(() =>
   props.activeConnection?.db_type === "postgres" ? "postgres" : "mysql",
 );
+
+const hasNumericData = computed(() => {
+  const r = props.activeTab.result;
+  if (!r || r.rows.length === 0) return false;
+  return r.columns.some((_, idx) => r.rows.some((row) => typeof row[idx] === "number"));
+});
 </script>
 
 <template>
@@ -132,6 +139,16 @@ const editorDialect = computed<"mysql" | "postgres">(() =>
                 <GitBranch class="h-3.5 w-3.5" />
                 {{ t("explain.title") }}
               </Button>
+              <Button
+                size="sm"
+                :variant="activeOutputView === 'chart' ? 'secondary' : 'ghost'"
+                class="h-6 px-2 text-xs gap-1"
+                :disabled="!hasNumericData"
+                @click="emit('update:activeOutputView', 'chart')"
+              >
+                <BarChart3 class="h-3.5 w-3.5" />
+                {{ t("chart.title") }}
+              </Button>
             </div>
 
             <ExplainPlanViewer
@@ -144,6 +161,12 @@ const editorDialect = computed<"mysql" | "postgres">(() =>
               :explain-sql="activeTab.explainSql"
             />
 
+            <QueryChart
+              v-else-if="activeOutputView === 'chart' && activeTab.result"
+              class="flex-1 min-h-0"
+              :result="activeTab.result"
+            />
+
             <template v-else>
               <DataGrid
                 v-if="activeTab.result"
diff --git a/src/composables/useSqlExecution.ts b/src/composables/useSqlExecution.ts
index b4a039b715..f8ef088019 100644
--- a/src/composables/useSqlExecution.ts
+++ b/src/composables/useSqlExecution.ts
@@ -23,7 +23,7 @@ export function useSqlExecution(deps: {
   activeTab: ComputedRef<QueryTab | undefined>;
   activeConnection: ComputedRef<ConnectionConfig | undefined>;
   executableSql: ComputedRef<string>;
-  activeOutputView: Ref<"result" | "explain">;
+  activeOutputView: Ref<"result" | "explain" | "chart">;
 }) {
   const { t } = useI18n();
   const queryStore = useQueryStore();
diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts
index 7419e412df..4ef643d3d5 100644
--- a/src/i18n/locales/en.ts
+++ b/src/i18n/locales/en.ts
@@ -121,6 +121,14 @@ export default {
     scrollLeft: "Scroll tabs left",
     scrollRight: "Scroll tabs right",
   },
+  chart: {
+    title: "Chart",
+    type: "Type",
+    line: "Line",
+    bar: "Bar",
+    pie: "Pie",
+    noNumericData: "No numeric data available for charting",
+  },
   grid: {
     rows: "{count} rows",
     totalRows: "Total {count} rows",
diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts
index 5beee2adb1..283a3b6628 100644
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -120,6 +120,14 @@ export default {
     scrollLeft: "向左滚动标签页",
     scrollRight: "向右滚动标签页",
   },
+  chart: {
+    title: "图表",
+    type: "类型",
+    line: "折线图",
+    bar: "柱状图",
+    pie: "饼图",
+    noNumericData: "没有可用于图表的数值数据",
+  },
   grid: {
     rows: "{count} 行",
     totalRows: "共 {count} 行",