feat: 新增 @pureadmin/table 内嵌 echarts 图表示例

src/views/pure-table/high/data.ts

@@ -62,14 +62,16 @@ const tableDataImage = clone(tableData, true).map((item, index) =>
   })
 );
 
-const tableDataSortable = clone(tableData, true).map((item, index) =>
+const tableDataSortable = clone(tableData, true).map((item, index) => {
+  delete item["date"];
   Object.assign(item, {
     date: `${dayjs(new Date()).format("YYYY-MM")}-${index + 1}`
-  })
+  });
-);
+});
 
 const tableDataDrag = clone(tableData, true).map((item, index) => {
   delete item["address"];
+  delete item["date"];
   return Object.assign(
     {
       id: index + 1,
@@ -80,6 +82,7 @@ const tableDataDrag = clone(tableData, true).map((item, index) => {
 });
 
 const tableDataEdit = clone(tableData, true).map((item, index) => {
+  delete item["date"];
   return Object.assign(
     {
       id: index + 1,

src/views/pure-table/high/echarts/columns.tsx

@@ -0,0 +1,91 @@
+import {
+  clone,
+  useDark,
+  useECharts,
+  type EchartOptions
+} from "@pureadmin/utils";
+import { tableDataDrag } from "../data";
+import { templateRef } from "@vueuse/core";
+import { ref, type Ref, computed } from "vue";
+import { message } from "@pureadmin/components";
+
+export function useColumns() {
+  const dataList = ref(clone(tableDataDrag, true).splice(0, 4));
+
+  const columns: TableColumnList = [
+    {
+      label: "ID",
+      prop: "id"
+    },
+    {
+      label: "姓名",
+      prop: "name"
+    },
+    {
+      label: "日期",
+      prop: "date"
+    },
+    {
+      label: "echarts图表",
+      slot: "echart"
+    }
+  ];
+
+  const { isDark } = useDark();
+
+  const theme: EchartOptions["theme"] = computed(() => {
+    return isDark.value ? "dark" : "light";
+  });
+
+  dataList.value.forEach((_, i) => {
+    const { setOptions } = useECharts(
+      templateRef(`PieChartRef${i}`) as Ref<HTMLDivElement>,
+      {
+        theme
+      }
+    );
+
+    // https://pure-admin-utils.netlify.app/hooks/useEcharts/useEcharts.html
+    setOptions(
+      {
+        tooltip: {
+          trigger: "item",
+          // 将 tooltip 控制在图表区域里
+          confine: true
+        },
+        series: [
+          {
+            name: "Github信息",
+            type: "pie",
+            // center: ["30%", "50%"],
+            data: [
+              { value: 1067, name: "watchers" },
+              { value: 4037, name: "star" },
+              { value: 859, name: "forks" }
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)"
+              }
+            }
+          }
+        ]
+      },
+      {
+        name: "click",
+        callback: ({ data: { name, value } }) => {
+          message.success(
+            `您点击了第 ${i + 1} 行，图表标题为${name}，图表数据为：${value}`
+          );
+        }
+      }
+    );
+  });
+
+  return {
+    columns,
+    dataList
+  };
+}

src/views/pure-table/high/echarts/index.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { useColumns } from "./columns";
+
+const { columns, dataList } = useColumns();
+</script>
+
+<template>
+  <pure-table row-key="id" border :data="dataList" :columns="columns">
+    <template #echart="{ index }">
+      <div :ref="'PieChartRef' + index" style="height: 100px" />
+    </template>
+  </pure-table>
+</template>

src/views/pure-table/high/execl/index.vue

@@ -11,7 +11,7 @@ const { columns, dataList, exportExcel } = useColumns();
       @click="exportExcel"
       class="mb-[20px] float-right"
     >
-      导出Excel
+      导出
     </el-button>
     <pure-table row-key="id" border :data="dataList" :columns="columns" />
   </div>

src/views/pure-table/high/list.tsx

@@ -5,6 +5,7 @@ import Execl from "./execl/index.vue";
 import Edit from "./edit/index.vue";
 import Watermark from "./watermark/index.vue";
 import Print from "./prints/index.vue";
+import Echarts from "./echarts/index.vue";
 
 const rendContent = (val: string) =>
   `代码位置：src/views/pure-table/high/${val}/index.vue`;
@@ -28,6 +29,12 @@ export const list = [
     title: "右键菜单",
     component: Contextmenu
   },
+  {
+    key: "edit",
+    content: rendContent("edit"),
+    title: "单元格编辑",
+    component: Edit
+  },
   {
     key: "execl",
     content: rendContent("execl"),
@@ -35,10 +42,10 @@ export const list = [
     component: Execl
   },
   {
-    key: "edit",
+    key: "print",
-    content: rendContent("edit"),
+    content: rendContent("print"),
-    title: "单元格编辑",
+    title: "打印",
-    component: Edit
+    component: Print
   },
   {
     key: "watermark",
@@ -47,9 +54,9 @@ export const list = [
     component: Watermark
   },
   {
-    key: "print",
+    key: "echarts",
-    content: rendContent("print"),
+    content: rendContent("echarts"),
-    title: "打印",
+    title: "内嵌echarts图表",
-    component: Print
+    component: Echarts
   }
 ];

src/views/pure-table/high/watermark/columns.tsx

@@ -26,6 +26,7 @@ export function useColumns(waterRef: Ref) {
 
   onMounted(() => {
     delay().then(() => {
+      // https://pure-admin-utils.netlify.app/hooks/useWatermark/useWatermark.html
       const { setWatermark } = useWatermark(
         waterRef.value.getTableDoms().tableWrapper
       );