feat：新增全局接口配置，单个图表映射表，抽离柱状图数据格式，

package.json

@@ -11,6 +11,7 @@
     "animate.css": "^4.1.1",
     "axios": "^0.23.0",
     "crypto-ts": "^1.0.2",
+    "highlight.js": "^11.5.0",
     "naive-ui": "^2.25.2",
     "pinia": "^2.0.6",
     "screenfull": "^6.0.0",

pnpm-lock.yaml

@@ -20,6 +20,7 @@ specifiers:
   eslint-plugin-import: ^2.25.3
   eslint-plugin-prettier: ^4.0.0
   eslint-plugin-vue: ^8.2.0
+  highlight.js: ^11.5.0
   lodash: ~4.17.21
   mockjs: ^1.1.0
   naive-ui: ^2.25.2
@@ -47,6 +48,7 @@ dependencies:
   animate.css: r2.cnpmjs.org/animate.css/4.1.1
   axios: rg.cnpmjs.org/axios/0.23.0
   crypto-ts: r2.cnpmjs.org/crypto-ts/1.0.2
+  highlight.js: registry.npmjs.org/highlight.js/11.5.0
   naive-ui: registry.npmjs.org/naive-ui/2.25.2_vue@3.2.24
   pinia: rg.cnpmjs.org/pinia/2.0.6_typescript@4.5.2+vue@3.2.24
   screenfull: rg.cnpmjs.org/screenfull/6.0.0
@@ -2147,6 +2149,13 @@ packages:
     version: 4.0.0
     engines: {node: '>=8'}
 
+  registry.npmjs.org/highlight.js/11.5.0:
+    resolution: {integrity: sha512-SM6WDj5/C+VfIY8pZ6yW6Xa0Fm1tniYVYWYW1Q/DcMnISZFrC3aQAZZZFAAZtybKNrGId3p/DNbFTtcTXXgYBw==, registry: https://skimdb.npmjs.com/registry/, tarball: https://registry.npmjs.org/highlight.js/-/highlight.js-11.5.0.tgz}
+    name: highlight.js
+    version: 11.5.0
+    engines: {node: '>=12.0.0'}
+    dev: false
+
   registry.npmjs.org/jest-diff/27.5.1:
     resolution: {integrity: sha512-m0NvkX55LDt9T4mctTEgnZk3fmEg3NRYutvMPWM/0iPnkFj2wIeF45O1718cMSOFO1vINkqmxqD8vE37uTEbqw==, registry: https://skimdb.npmjs.com/registry/, tarball: https://registry.npmjs.org/jest-diff/-/jest-diff-27.5.1.tgz}
     name: jest-diff
@@ -2205,7 +2214,7 @@ packages:
       date-fns: rg.cnpmjs.org/date-fns/2.27.0
       date-fns-tz: rg.cnpmjs.org/date-fns-tz/1.1.6_date-fns@2.27.0
       evtd: rg.cnpmjs.org/evtd/0.2.3
-      highlight.js: rg.cnpmjs.org/highlight.js/11.3.1
+      highlight.js: registry.npmjs.org/highlight.js/11.5.0
       lodash: rg.cnpmjs.org/lodash/4.17.21
       lodash-es: rg.cnpmjs.org/lodash-es/4.17.21
       seemly: rg.cnpmjs.org/seemly/0.3.3
@@ -4596,13 +4605,6 @@ packages:
       tslib: registry.npmjs.org/tslib/2.3.1
     dev: true
 
-  rg.cnpmjs.org/highlight.js/11.3.1:
-    resolution: {integrity: sha1-gTB47zqlGcYXAPhP6QRyMcXcMpE=, registry: http://r.cnpmjs.org/, tarball: https://rg.cnpmjs.org/highlight.js/download/highlight.js-11.3.1.tgz}
-    name: highlight.js
-    version: 11.3.1
-    engines: {node: '>=12.0.0'}
-    dev: false
-
   rg.cnpmjs.org/html-tags/3.1.0:
     resolution: {integrity: sha1-e15vfmZen7QfMAB+2eDUHpf7IUA=, registry: http://r.cnpmjs.org/, tarball: https://rg.cnpmjs.org/html-tags/download/html-tags-3.1.0.tgz}
     name: html-tags

src/App.vue

@@ -1,9 +1,10 @@
 <template>
   <n-config-provider
     :locale="zhCN"
-    :theme="getDarkTheme"
+    :theme="darkTheme"
+    :hljs="hljsTheme"
     :date-locale="dateZhCN"
-    :theme-overrides="getThemeOverrides"
+    :theme-overrides="overridesTheme"
   >
     <app-provider>
       <I18n></I18n>
@@ -17,11 +18,14 @@ import { zhCN, dateZhCN, NConfigProvider } from 'naive-ui'
 import { AppProvider } from '@/components/AppProvider'
 import { I18n } from '@/components/I18n'
 
-import { getDarkThemeHook, getThemeOverridesHook } from '@/hooks'
+import { useDarkThemeHook, useThemeOverridesHook, useHook } from '@/hooks'
 
-// 返回暗黑主题
-const getDarkTheme = getDarkThemeHook()
+// 暗黑主题
+const darkTheme = useDarkThemeHook()
 
 // 主题配置
-const getThemeOverrides = getThemeOverridesHook()
+const overridesTheme = useThemeOverridesHook()
+
+// 代码主题
+const hljsTheme = useHook()
 </script>

src/hooks/code.hook.ts

@@ -0,0 +1,9 @@
+import hljs from 'highlight.js/lib/core'
+import json from 'highlight.js/lib/languages/json'
+import typescript from 'highlight.js/lib/languages/typescript'
+
+export const useHook = () => {
+  hljs.registerLanguage('json', json)
+  hljs.registerLanguage('typescript', typescript)
+  return hljs
+}

src/hooks/index.ts

@@ -1,2 +1,3 @@
 export * from '@/hooks/theme.hook'
-export * from '@/hooks/previewScale.hook'
+export * from '@/hooks/previewScale.hook'
+export * from '@/hooks/code.hook'

src/hooks/theme.hook.ts

@@ -7,10 +7,10 @@ import { toLight } from '@/utils'
 /**
  * 设置全局主题
  */
-export const getThemeOverridesHook = () => {
+export const useThemeOverridesHook = () => {
   const designStore = useDesignStore()
   const { getAppTheme } = toRefs(designStore)
-  const getDarkTheme = computed(
+  const darkTheme = computed(
     (): GlobalThemeOverrides => {
       // 通用
       const commonObj = {
@@ -40,11 +40,11 @@ export const getThemeOverridesHook = () => {
       return designStore.getDarkTheme ? dartObject : lightObject
     }
   )
-  return getDarkTheme
+  return darkTheme
 }
 
 // 返回暗黑主题
-export const getDarkThemeHook = () => {
+export const useDarkThemeHook = () => {
   const designStore = useDesignStore()
   return computed(() => (designStore.getDarkTheme ? darkTheme : undefined))
 }

src/packages/components/Charts/Bars/BarCommon/config.ts

@@ -3,7 +3,7 @@ import { BarCommonConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
 import cloneDeep from 'lodash/cloneDeep'
 
-export const includes = ['legend', 'xAxis', 'yAxis']
+export const includes = ['legend', 'xAxis', 'yAxis', 'dataset']
 
 export const option = {
   tooltip: {
@@ -15,12 +15,11 @@ export const option = {
     }
   },
   legend: {
-    show: true,
+    show: true
   },
   xAxis: {
     show: true,
-    type: 'category',
-    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    type: 'category'
   },
   yAxis: {
     show: true,
@@ -28,24 +27,20 @@ export const option = {
   },
   series: [
     {
-      name: 'data1',
       type: 'bar',
       barWidth: null,
       itemStyle: {
         color: null,
         borderRadius: 0
-      },
-      data: [120, 200, 150, 80, 70, 110, 130]
+      }
     },
     {
-      name: 'data2',
       type: 'bar',
       barWidth: null,
       itemStyle: {
         color: null,
         borderRadius: 0
-      },
-      data: [130, 130, 312, 268, 155, 117, 160]
+      }
     }
   ]
 }

src/packages/components/Charts/Bars/BarCommon/data.json

@@ -0,0 +1,40 @@
+{
+  "dimensions": ["product", "data1", "data2"],
+  "source": [
+    {
+      "product": "Mon",
+      "data1": 120,
+      "data2": 130
+    },
+    {
+      "product": "Tue",
+      "data1": 200,
+      "data2": 130
+    },
+    {
+      "product": "Wed",
+      "data1": 150,
+      "data2": 312
+    },
+    {
+      "product": "Thu",
+      "data1": 80,
+      "data2": 268
+    },
+    {
+      "product": "Fri",
+      "data1": 70,
+      "data2": 155
+    },
+    {
+      "product": "Sat",
+      "data1": 110,
+      "data2": 117
+    },
+    {
+      "product": "Sun",
+      "data1": 130,
+      "data2": 160
+    }
+  ]
+}

src/packages/components/Charts/Bars/BarCommon/index.vue

@@ -9,8 +9,10 @@ import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { BarChart } from 'echarts/charts'
 import config, { includes } from './config'
-import { mergeTheme } from '@/packages/public/chart'
+import { mergeTheme, setData } from '@/packages/public/chart'
+import dataJson from './data.json'
 import {
+  DatasetComponent,
   GridComponent,
   TooltipComponent,
   LegendComponent
@@ -32,6 +34,7 @@ const props = defineProps({
 })
 
 use([
+  DatasetComponent,
   CanvasRenderer,
   BarChart,
   GridComponent,
@@ -40,6 +43,6 @@ use([
 ])
 
 const option = computed(() => {
-  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+  return setData(mergeTheme(props.chartConfig.option, props.themeSetting, includes), dataJson)
 })
 </script>

src/packages/index.d.ts

@@ -18,6 +18,11 @@ interface requestConfig {
   data: RequestConfigType
 }
 
+// Echarts 数据类型
+interface EchartsDataType {
+  dimensions: string[],
+  source: any[]
+}
 // 组件实例类
 export interface PublicConfigType extends requestConfig {
   id: string

src/packages/public/chart.ts

@@ -1,5 +1,6 @@
 import merge from 'lodash/merge'
 import pick from 'lodash/pick'
+import { EchartsDataType } from '../index.d'
 import { globalThemeJson } from '@/settings/chartThemes/index'
 
 /**
@@ -9,7 +10,7 @@ import { globalThemeJson } from '@/settings/chartThemes/index'
  * @param excludes 排除元素
  * @returns object
  */
-export const mergeTheme = <T, U> (
+export const mergeTheme = <T, U>(
   option: T,
   themeSetting: U,
   includes: string[]
@@ -20,8 +21,19 @@ export const mergeTheme = <T, U> (
 /**
  * * ECharts option 统一前置处理
  * @param option
+ * @return option
  */
- export const echartOptionProfixHandle = (option: any, includes: string[]) => {
+export const echartOptionProfixHandle = (option: any, includes: string[]) => {
   option['backgroundColor'] = 'rgba(0,0,0,0)'
   return mergeTheme(option, globalThemeJson, includes)
-}
+}
+
+/**
+ * * 设置数据
+ * @param option
+ * @return option
+ */
+export const setData = (option: any, data: EchartsDataType) => {
+  option.dataset = data
+  return option
+}

src/packages/public/publicConfig.ts

@@ -17,6 +17,7 @@ export class publicConfig implements PublicConfigType {
     opacity: 1,
     animations: []
   }
+  // 数据
   public data = {
     requestDataType: RequestDataTypeEnum.STATIC
   }

src/plugins/naive.ts

@@ -79,6 +79,8 @@ import {
   NUploadDragger,
   NTree,
   NSpin,
+  NTimeline,
+  NTimelineItem,
   NTimePicker,
   NBackTop,
   NSkeleton,
@@ -171,6 +173,8 @@ const naive = create({
     NUploadDragger,
     NTree,
     NSpin,
+    NTimeline,
+    NTimelineItem,
     NTimePicker,
     NBackTop,
     NSkeleton,

src/settings/chartThemes/global.theme.json

@@ -77,5 +77,9 @@
     "textStyle": {
       "color": "#B9B8CE"
     }
+  },
+  "dataset": {
+    "dimensions": [],
+    "source": []
   }
 }

src/store/modules/chartEditStore/chartEditStore.d.ts

@@ -124,17 +124,17 @@ export enum ChartEditStoreEnum {
 // 数据相关
 export enum RequestDataTypeEnum {
   // 静态数据
-  STATIC = 'static',
+  STATIC,
   // 请求数据
-  AJAX = 'ajax'
+  AJAX
 }
 
 // 数据配置
 export type RequestConfigType = {
   // 获取数据的方式
-  requestDataType: RequestDataTypeEnum,
+  requestDataType: RequestDataTypeEnum
   // 请求源地址
-  requestUrl?: string,
+  requestUrl?: string
   requestInterval?: number
 }
 
@@ -154,4 +154,4 @@ export interface ChartEditStorage {
   [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: EditCanvasConfigType
   [ChartEditStoreEnum.REQUEST_CONFIG]: RequestConfigType
   [ChartEditStoreEnum.COMPONENT_LIST]: CreateComponentType[]
-}
+}

src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartDataSetting/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="go-chart-data-setting">
     <setting-item-box name="源地址" :alone="true">
       <n-input
         v-model:value="requestConfig.requestUrl"
@@ -33,5 +33,3 @@ const requestConfig: Ref<RequestConfigType> = computed(() => {
   return chartEditStore.getRequestConfig
 })
 </script>
-
-<style lang="scss" scoped></style>

src/views/chart/ContentConfigurations/components/ChartAnimation/index.vue

@@ -34,25 +34,19 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, Ref } from 'vue'
+import { ref } from 'vue'
 import { animations } from '@/settings/animations/index'
 import { CollapseItem } from '@/components/ChartItemSetting/index'
-import { CreateComponentType } from '@/packages/index.d'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
+import { useTargetData } from '../hooks/useTargetData.hook'
 
 // 全局颜色
 const designStore = useDesignStore()
 const themeColor = ref(designStore.getAppTheme)
 
-const chartEditStore = useChartEditStore()
 const hoverPreviewAnimate = ref('')
 
-const targetData: Ref<CreateComponentType> = computed(() => {
-  const list = chartEditStore.getComponentList
-  const targetIndex = chartEditStore.fetchTargetIndex()
-  return list[targetIndex]
-})
+const { targetData } = useTargetData()
 
 // * 选中的动画样式
 const activeIndex = (value: string) => {

src/views/chart/ContentConfigurations/components/ChartData/index.vue

@@ -1,11 +1,94 @@
 <template>
-  <div>
-    数据
+  <div class="go-chart-configurations-data">
+    <setting-item-box v-if="targetData" name="请求方式" :alone="true">
+      <n-select
+        v-model:value="targetData.data.requestDataType"
+        :options="selcetOpeions"
+        @on-update="updateHandle"
+      />
+    </setting-item-box>
+    <n-timeline>
+      <n-timeline-item type="info" title="数据结构">
+        <n-table striped>
+          <thead>
+            <tr>
+              <th>字段</th>
+              <th>映射</th>
+              <th>状态</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(item, index) in dataStructure" :key="index">
+              <td>{{ item.field }}</td>
+              <td>{{ item.mapping }}</td>
+              <td>
+                <n-space>
+                  <n-badge
+                    dot
+                    :type="item.result ? 'success' : 'error'"
+                  ></n-badge>
+                  <n-text>匹配{{ item.result ? '成功' : '失败' }}</n-text>
+                </n-space>
+              </td>
+            </tr>
+          </tbody>
+        </n-table>
+      </n-timeline-item>
+      <n-timeline-item type="success" title="静态数据">
+        <n-code
+          v-for="(item, index) in code"
+          :key="index"
+          :code="item.data"
+          language="json"
+        ></n-code>
+      </n-timeline-item>
+    </n-timeline>
   </div>
 </template>
 
-<script setup lang="ts" >
+<script setup lang="ts">
+import { ref, toRaw } from 'vue'
+import { SettingItemBox } from '@/components/ChartItemSetting/index'
+import { RequestDataTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { useTargetData } from '../hooks/useTargetData.hook'
 
+const { targetData } = useTargetData()
+
+const code = toRaw((targetData.value.option as any).series)
+
+const selcetOpeions = [
+  {
+    label: '静态数据',
+    value: RequestDataTypeEnum.STATIC
+  },
+  {
+    label: '动态请求',
+    value: RequestDataTypeEnum.AJAX
+  }
+]
+
+const dataStructure = ref([
+  {
+    // 字段
+    field: 'x',
+    // 映射
+    mapping: 'xData',
+    // 结果
+    result: true
+  },
+  {
+    // 字段
+    field: 'y',
+    // 映射
+    mapping: 'yData',
+    // 结果
+    result: true
+  }
+])
+
+const updateHandle = (value: any) => {
+  console.log(value)
+}
 </script>
 
 <style lang="scss" scoped></style>

src/views/chart/ContentConfigurations/components/ChartSetting/index.vue

@@ -25,19 +25,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed, Ref } from 'vue'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { GlobalSetting, PositionSetting, SizeSetting, StylesSetting } from '@/components/ChartItemSetting/index'
-import { CreateComponentType } from '@/packages/index.d'
 import { SettingItemBox } from '@/components/ChartItemSetting/index'
+import { useTargetData } from '../hooks/useTargetData.hook'
 
-const chartEditStore = useChartEditStore()
-
-const targetData: Ref<CreateComponentType> = computed(() => {
-  const list = chartEditStore.getComponentList
-  const targetIndex = chartEditStore.fetchTargetIndex()
-  return list[targetIndex]
-})
+const { targetData, chartEditStore } = useTargetData()
 
 </script>
 

src/views/chart/ContentConfigurations/components/hooks/useTargetData.hook.ts

@@ -0,0 +1,14 @@
+import { computed, Ref } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+
+// 获取当前对象数据
+export const useTargetData = () => {
+  const chartEditStore = useChartEditStore()
+  const targetData: Ref<CreateComponentType> = computed(() => {
+    const list = chartEditStore.getComponentList
+    const targetIndex = chartEditStore.fetchTargetIndex()
+    return list[targetIndex]
+  })
+  return { targetData, chartEditStore }
+}