feat: 新增数据mock，数据字段映射

2025-02-22 15:22:50 +08:00 · 2024-12-22 12:51:02 +08:00 · 2024-12-22 12:51:02 +08:00 · 3ae9aac2d9
commit 3ae9aac2d9
parent 152786c652
11 changed files with 153 additions and 108 deletions
--- a/src/api/mock/index.ts
+++ b/src/api/mock/index.ts
@ -1,4 +1,5 @@
 import test from './test.mock'
+import vchart from './vchart.mock'
 import { MockMethod } from 'vite-plugin-mock'
 import { RequestHttpEnum } from '@/enums/httpEnum'

@ -22,6 +23,8 @@ export const threeEarth01Url = '/mock/threeEarth01Data'
 export const sankeyUrl = '/mock/sankey'
 export const graphUrl = '/mock/graphData'

+export const vchartBarDataUrl = '/mock/vchart/barDataUrl'
+
 const mockObject: MockMethod[] = [
  {
    // 正则
@ -115,6 +118,11 @@ const mockObject: MockMethod[] = [
    method: RequestHttpEnum.GET,
    response: () => test.graphData
  },
+  {
+    url: vchartBarDataUrl,
+    method: RequestHttpEnum.GET,
+    response: () => vchart.bar
+  }
 ]

 export default mockObject
--- a/src/api/mock/vchart.mock.ts
+++ b/src/api/mock/vchart.mock.ts
@ -0,0 +1,10 @@
+import bar from './vchart/bar.json'
+
+export default {
+  bar: {
+    code: 0,
+    status: 200,
+    msg: '请求成功',
+    data: bar
+  }
+}
--- a/src/api/mock/vchart/bar.json
+++ b/src/api/mock/vchart/bar.json
@ -0,0 +1,16 @@
+{
+  "values": [
+    { "type": "Nail polish", "year": "Africa", "value|100-900": 3 },
+    { "type": "Nail polish", "year": "EU", "value|100-900": 3 },
+    { "type": "Nail polish", "year": "China", "value|100-900": 3 },
+    { "type": "Nail polish", "year": "USA", "value|100-900": 3 },
+    { "type": "Eyebrow pencil", "year": "Africa", "value|100-900": 3 },
+    { "type": "Eyebrow pencil", "year": "EU", "value|100-900": 3 },
+    { "type": "Eyebrow pencil", "year": "China", "value|100-900": 3 },
+    { "type": "Eyebrow pencil", "year": "USA", "value|100-900": 3 },
+    { "type": "Rouge", "year": "Africa", "value|100-900": 3 },
+    { "type": "Rouge", "year": "EU", "value|100-900": 3 },
+    { "type": "Rouge", "year": "China", "value|100-900": 3 },
+    { "type": "Rouge", "year": "USA", "value|100-900": 3 }
+  ]
+}
--- a/src/components/GoVChart/index.vue
+++ b/src/components/GoVChart/index.vue
@ -2,13 +2,13 @@
  <div
    ref="vChartRef"
    v-on="{
-      ...Object.fromEntries(event.map(eventName => [eventName, (eventData: MouseEvent) => eventHandlers(eventData, eventName)]))
+      ...Object.fromEntries(event.map((eventName: string) => [eventName, (eventData: MouseEvent) => eventHandlers(eventData, eventName)]))
    }"
  ></div>
 </template>

 <script setup lang="ts">
-import { ref, PropType, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import { ref, PropType, watch, onBeforeUnmount, nextTick, toRaw } from 'vue'
 import { VChart, type IVChart, type IInitOption, type ISpec } from '@visactor/vchart'
 import { transformHandler } from './transformProps'
 import { IOption } from '@/packages/components/VChart/index.d'
@ -136,7 +136,7 @@ const emit = defineEmits([
 const props = defineProps({
  option: {
    type: Object as PropType<
-      ISpec & {
+      IOption & {
        dataset: any
      }
    >,
@ -160,7 +160,7 @@ let chart: IVChart
 watch(
  () => ({
    ...props.option,
-    data: undefined
+    dataset: undefined
  }),
  () => {
    nextTick(() => {
@ -173,22 +173,6 @@ watch(
  }
 )

-// 单独渲染，非深度监听，处理性能问题
-watch(
-  () => props.option.dataset,
-  () => {
-    if (vChartRef.value) {
-      nextTick(() => {
-        createOrUpdateChart(props.option)
-      })
-    }
-  },
-  {
-    deep: false,
-    immediate: false
-  }
-)
-
 // 更新
 const createOrUpdateChart = (
  chartProps: IOption & {
@ -208,7 +192,7 @@ const createOrUpdateChart = (
    return true
  } else if (chart) {
    const spec = transformHandler[chartProps.category](chartProps)
-    chart.updateSpec({ ...spec, data: chartProps.dataset })
+    chart.updateSpec({ ...spec, data: toRaw(chartProps.dataset), dataset: undefined })
    return true
  }
  return false
@ -217,7 +201,6 @@ const createOrUpdateChart = (
 // 刷新
 const refresh = () => {
  if (chart) {
-    chart.release()
    chart.renderSync()
  }
 }
--- a/src/packages/components/VChart/Bars/VChartBarCommon/config.ts
+++ b/src/packages/components/VChart/Bars/VChartBarCommon/config.ts
@ -14,7 +14,7 @@ export const option: IBarOption & { dataset?: any } = {
  dataset: data,
  stack: true,
  xField: ['year', 'type'],
-  yField: 'value',
+  yField: ['value'],
  seriesField: 'type',
  // 业务配置（后续会被转换为图表spec)
  category: VChartBarCommonConfig.category,
--- a/src/packages/components/VChart/Bars/VChartBarCommon/data.json
+++ b/src/packages/components/VChart/Bars/VChartBarCommon/data.json
@ -10,6 +10,7 @@
    { "type": "Autocracies", "year": "2000", "value": 89 },
    { "type": "Autocracies", "year": "2010", "value": 80 },
    { "type": "Autocracies", "year": "2018", "value": 80 },
+
    { "type": "Democracies", "year": "1930", "value": 22 },
    { "type": "Democracies", "year": "1940", "value": 13 },
    { "type": "Democracies", "year": "1950", "value": 25 },
--- a/src/packages/components/VChart/Bars/VChartBarStack/config.ts
+++ b/src/packages/components/VChart/Bars/VChartBarStack/config.ts
@ -12,9 +12,9 @@ export const option: IBarOption & { dataset?: any } = {
  // 图表配置
  type: 'bar',
  dataset: data,
-  xField: 'State',
-  yField: 'Population',
-  seriesField: 'Age',
+  xField: ['type'],
+  yField: ['value'],
+  seriesField: 'year',
  stack: true,
  // 业务配置（后续会被转换为图表spec)
  category: VChartBarStackConfig.category,
--- a/src/packages/components/VChart/Bars/VChartBarStack/data.json
+++ b/src/packages/components/VChart/Bars/VChartBarStack/data.json
@ -1,79 +1,16 @@
 {
  "values": [
-    {
-      "State": "WY",
-      "Age": "Under 5 Years",
-      "Population": 25635
-    },
-    {
-      "State": "WY",
-      "Age": "5 to 13 Years",
-      "Population": 1890
-    },
-    {
-      "State": "WY",
-      "Age": "14 to 17 Years",
-      "Population": 9314
-    },
-    {
-      "State": "DC",
-      "Age": "Under 5 Years",
-      "Population": 30352
-    },
-    {
-      "State": "DC",
-      "Age": "5 to 13 Years",
-      "Population": 20439
-    },
-    {
-      "State": "DC",
-      "Age": "14 to 17 Years",
-      "Population": 10225
-    },
-    {
-      "State": "VT",
-      "Age": "Under 5 Years",
-      "Population": 38253
-    },
-    {
-      "State": "VT",
-      "Age": "5 to 13 Years",
-      "Population": 42538
-    },
-    {
-      "State": "VT",
-      "Age": "14 to 17 Years",
-      "Population": 15757
-    },
-    {
-      "State": "ND",
-      "Age": "Under 5 Years",
-      "Population": 51896
-    },
-    {
-      "State": "ND",
-      "Age": "5 to 13 Years",
-      "Population": 67358
-    },
-    {
-      "State": "ND",
-      "Age": "14 to 17 Years",
-      "Population": 18794
-    },
-    {
-      "State": "AK",
-      "Age": "Under 5 Years",
-      "Population": 72083
-    },
-    {
-      "State": "AK",
-      "Age": "5 to 13 Years",
-      "Population": 85640
-    },
-    {
-      "State": "AK",
-      "Age": "14 to 17 Years",
-      "Population": 22153
-    }
+    { "type": "Nail polish", "year": "Africa", "value": 590 },
+    { "type": "Nail polish", "year": "EU", "value": 450 },
+    { "type": "Nail polish", "year": "China", "value": 474 },
+    { "type": "Nail polish", "year": "USA", "value": 459 },
+    { "type": "Eyebrow pencil", "year": "Africa", "value": 746 },
+    { "type": "Eyebrow pencil", "year": "EU", "value": 176 },
+    { "type": "Eyebrow pencil", "year": "China", "value": 210 },
+    { "type": "Eyebrow pencil", "year": "USA", "value": 775 },
+    { "type": "Rouge", "year": "Africa", "value": 896 },
+    { "type": "Rouge", "year": "EU", "value": 784 },
+    { "type": "Rouge", "year": "China", "value": 866 },
+    { "type": "Rouge", "year": "USA", "value": 899 }
  ]
 }
--- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMatchingAndShow/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMatchingAndShow/index.vue
@ -1,6 +1,7 @@
 <template>
  <n-timeline class="go-chart-configurations-timeline">
-    <n-timeline-item v-show="isCharts && dimensionsAndSource" type="info" :title="TimelineTitleEnum.MAPPING">
+    <!-- 处理 echarts 的数据映射 -->
+    <n-timeline-item v-if="isCharts && dimensionsAndSource" type="info" :title="TimelineTitleEnum.MAPPING">
      <n-table striped>
        <thead>
          <tr>
@ -25,6 +26,47 @@
        </tbody>
      </n-table>
    </n-timeline-item>
+    <!-- 处理 vcharts 的数据映射 -->
+    <n-timeline-item v-if="isVChart" type="info" :title="TimelineTitleEnum.MAPPING">
+      <n-table striped>
+        <thead>
+          <tr>
+            <th v-for="item in vchartTableTitle" :key="item">{{ item }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="item in fieldList" :key="item.field">
+            <td>
+              <n-ellipsis style="width: 70px; max-width: 240px">
+                {{ item.field }}
+              </n-ellipsis>
+            </td>
+            <td v-if="isArray(item.mapping)">
+              <n-space :size="4" vertical>
+                <n-input
+                  v-for="(mappingItem, index) in item.mapping"
+                  :key="index"
+                  v-model:value="item.mapping[index]"
+                  type="tiny"
+                  size="small"
+                  placeholder="输入字段"
+                  @change="() => (item.result = matchingHandle(item.mapping[index]))"
+                />
+              </n-space>
+            </td>
+            <td v-else>
+              <n-input v-model:value="item.mapping" type="text" size="small" placeholder="小" />
+            </td>
+            <!-- <td>
+              <n-space style="width: 70px" :size="4">
+                <n-badge dot :type="item.result === 1 ? 'success' : 'error'"></n-badge>
+                <n-text>匹配{{ item.result === 1 ? '成功' : '失败' }}</n-text>
+              </n-space>
+            </td> -->
+          </tr>
+        </tbody>
+      </n-table>
+    </n-timeline-item>
    <n-timeline-item v-show="filterShow" color="#97846c" :title="TimelineTitleEnum.FILTER">
      <n-space :size="18" vertical>
        <n-text depth="3">过滤器默认处理接口返回值的「data」字段</n-text>
@ -66,7 +108,7 @@
                  <help-outline-icon></help-outline-icon>
                </n-icon>
              </template>
-              <n-text depth="3">点击【下载】查看完整数据</n-text>
+              <span>点击【下载】查看完整数据</span>
            </n-tooltip>
          </div>
        </n-space>
@ -87,11 +129,10 @@ import { DataResultEnum, TimelineTitleEnum } from '../../index.d'
 import { ChartDataMonacoEditor } from '../ChartDataMonacoEditor'
 import { useFile } from '../../hooks/useFile.hooks'
 import { useTargetData } from '../../../hooks/useTargetData.hook'
-import isObject from 'lodash/isObject'
 import { toString, isArray } from '@/utils'

 const { targetData } = useTargetData()
-const props = defineProps({
+defineProps({
  show: {
    type: Boolean,
    required: false
@ -104,6 +145,7 @@ const props = defineProps({

 // 表格标题
 const tableTitle = ['字段', '映射', '状态']
+const vchartTableTitle = ['字段', '接口映射字段']

 const { HelpOutlineIcon } = icon.ionicons5
 const { DocumentAddIcon, DocumentDownloadIcon } = icon.carbon
@ -113,6 +155,15 @@ const dimensions = ref()
 const dimensionsAndSource = ref()
 const noData = ref(false)

+// 映射列表, 注意内部的mapping是响应式的，上方需要修改
+const fieldList = ref<
+  Array<{
+    field: string
+    mapping: string[]
+    result: DataResultEnum
+  }>
+>([])
+
 const { uploadFileListRef, customRequest, beforeUpload, download } = useFile(targetData)

 // 是否展示过滤器
@ -124,6 +175,10 @@ const filterShow = computed(() => {
 const isCharts = computed(() => {
  return targetData.value.chartConfig.chartFrame === ChartFrameEnum.ECHARTS
 })
+// 是支持 vchart 的图表类型
+const isVChart = computed(() => {
+  return targetData.value.chartConfig.chartFrame === ChartFrameEnum.VCHART
+})

 // 处理映射列表状态结果
 const matchingHandle = (mapping: string) => {
@ -162,6 +217,33 @@ const dimensionsAndSourceHandle = () => {
  }
 }

+// 处理 vchart 映射列表
+const initFieldListHandle = () => {
+  if (targetData.value?.option) {
+    fieldList.value = []
+    // 所有名称，找到其中中 Field 结尾 的 key 和值，如果值不是数组结构，则先转换
+    for (const key in targetData.value.option) {
+      if (key.endsWith('Field')) {
+        const value = targetData.value.option[key]
+        if (!isArray(value)) {
+          targetData.value.option[key] = [value]
+        }
+        const item = {
+          field: key,
+          mapping: value,
+          result: DataResultEnum.SUCCESS
+        }
+        if (item.mapping === undefined) {
+          item.result = DataResultEnum.FAILURE
+        } else if (!isArray(item.mapping)) {
+          item.mapping = [item.mapping]
+        }
+        fieldList.value.push(item)
+      }
+    }
+  }
+}
+
 watch(
  () => targetData.value?.option?.dataset,
  (
@ -178,9 +260,13 @@ watch(
        dimensions.value = newData.dimensions
        dimensionsAndSource.value = dimensionsAndSourceHandle()
      }
+    } else if (newData && targetData?.value?.chartConfig?.chartFrame === ChartFrameEnum.VCHART) {
+      source.value = newData
+      initFieldListHandle()
    } else if (newData !== undefined && newData !== null) {
      dimensionsAndSource.value = null
      source.value = newData
+      fieldList.value = []
    } else {
      noData.value = true
      source.value = '此组件无数据源'
--- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestTargetConfig/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestTargetConfig/index.vue
@ -82,7 +82,8 @@ import {
  wordCloudUrl,
  treemapUrl,
  threeEarth01Url,
-  sankeyUrl
+  sankeyUrl,
+  vchartBarDataUrl
 } from '@/api/mock'

 const props = defineProps({
@ -150,7 +151,10 @@ const apiList = [
  },
  {
    value: `【关系图】${graphUrl}`
-  }
+  },
+  {
+    value: `【vchart 柱状图】${vchartBarDataUrl}`
+  },
 ]
 </script>

--- a/tsconfig.json
+++ b/tsconfig.json
@ -20,6 +20,6 @@
    // "strictNullChecks": true, //不允许使用null
    "noImplicitThis": true //不允许往this上面挂属性
  },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "types/**/*"],
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "types/**/*", "src/api/mock/vchart/bar.js"],
  "exclude": ["node_modules", "dist", "**/*.js"]
 }