fix: 完成基本内容

src/packages/components/Charts/Mores/Point/config.vue

@@ -1,6 +0,0 @@
-<template>
-</template>
-
-<script setup lang="ts">
-
-</script>

src/packages/components/Charts/Mores/Point/index.ts

@@ -1,14 +0,0 @@
-import image from '@/assets/images/chart/charts/Point.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
-import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
-
-export const PointConfig: ConfigType = {
-  key: 'Point',
-  chartKey: 'VPoint',
-  conKey: 'VCPoint',
-  title: '热力图',
-  category: ChatCategoryEnum.MORE,
-  categoryName: ChatCategoryEnumName.MORE,
-  package: PackagesCategoryEnum.CHARTS,
-  image
-}

src/packages/components/Charts/Mores/Point/index.vue

@@ -1,13 +0,0 @@
-<template>
-  <div>
-    水波
-  </div>
-</template>
-
-<script setup lang="ts">
-
-</script>
-
-<style lang="scss" scoped>
-
-</style>

src/packages/components/Charts/Mores/index.ts

@@ -2,8 +2,7 @@ import { ProcessConfig } from './Process/index'
 import { RadarConfig } from './Radar/index'
 import { FunnelConfig } from './Funnel/index'
 import { HeatmapConfig } from './Heatmap/index'
-import { PointConfig } from './Point/index'
 import { WaterPoloConfig } from './WaterPolo/index'
 import { TreeMapConfig } from './TreeMap/index'
 
-export default [ProcessConfig, RadarConfig, FunnelConfig, HeatmapConfig, PointConfig, WaterPoloConfig, TreeMapConfig]
+export default [ProcessConfig, RadarConfig, FunnelConfig, HeatmapConfig, WaterPoloConfig, TreeMapConfig]

src/packages/components/Charts/Scatter/Common/config.vue

@@ -1,3 +0,0 @@
-<template></template>
-
-<script setup lang="ts"></script>

src/packages/components/Charts/Scatter/Common/index.vue

@@ -1,7 +0,0 @@
-<template>
-  <div>散点图</div>
-</template>
-
-<script setup lang="ts"></script>
-
-<style lang="scss" scoped></style>

src/packages/components/Charts/Scatter/Common/config.ts → src/packages/components/Charts/Scatters/ScatterCommon/config.ts

@@ -7,11 +7,9 @@ import dataJson from './data.json'
 export const includes = ['legend', 'xAxis', 'yAxis']
 
 export const seriesItem = {
-  type: 'bar',
-  barWidth: null,
-  itemStyle: {
-    color: null,
-    borderRadius: 0
+  type: 'scatter',
+  emphasis: {
+    focus: 'series'
   }
 }
 
@@ -56,48 +54,56 @@ export const option = {
     {
       type: 'value',
       scale: true,
-      axisLabel: {
-        formatter: '{value} cm'
-      },
+      // axisLabel: {
+      //   formatter: '{value} cm'
+      // },
       splitLine: {
         show: false
       }
     }
   ],
+
   yAxis: [
     {
       type: 'value',
       scale: true,
-      axisLabel: {
-        formatter: '{value} kg'
-      },
+      // axisLabel: {
+      //   formatter: '{value} kg'
+      // },
       splitLine: {
         show: false
       }
     }
   ],
-  series: [
-    {
-      name: 'Data1',
-      type: 'scatter',
-      emphasis: {
-        focus: 'series'
-      },
-      // symbolSize: 12,
-      symbolSize: (item: number[]) => (item[1] / item[0]) * 30,
-      datasetIndex: 0
-    },
-    {
-      name: 'Data2',
-      type: 'scatter',
-      emphasis: {
-        focus: 'series'
-      },
-      // symbolSize: 12,
-      symbolSize: (item: number[]) => (item[1] / item[0]) * 30,
-      datasetIndex: 1
-    }
-  ]
+
+  // series: [
+  //   {
+  //     name: 'Data1',
+  //     type: 'scatter',
+  //     emphasis: {
+  //       focus: 'series'
+  //     },
+  //     // symbolSize: 12,
+  //     symbolSize: (item: number[]) => (item[1] / item[0]) * 30,
+  //     datasetIndex: 0
+  //   },
+  //   {
+  //     name: 'Data2',
+  //     type: 'scatter',
+  //     emphasis: {
+  //       focus: 'series'
+  //     },
+  //     // symbolSize: 12,
+  //     symbolSize: (item: number[]) => (item[1] / item[0]) * 30,
+  //     datasetIndex: 1
+  //   }
+  // ]
+
+  series: dataJson.map((item, index) => ({
+    ...seriesItem,
+    name: item.dimensions[0],
+    datasetIndex: index
+  }))
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

src/packages/components/Charts/Scatters/ScatterCommon/config.vue

@@ -0,0 +1,18 @@
+<template>
+  <!-- Echarts 全局设置 -->
+  <global-setting :optionData="optionData" :in-chart="true"></global-setting>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+import { GlobalSetting } from '@/components/Pages/ChartItemSetting'
+
+// eslint-disable-next-line no-unused-vars
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<GlobalThemeJsonType>,
+    required: true
+  }
+})
+</script>

src/packages/components/Charts/Scatter/Common/data.json → src/packages/components/Charts/Scatters/ScatterCommon/data.json

@@ -1,5 +1,6 @@
 [
   {
+    "dimensions": ["data1"],
     "source": [
       [161.2, 51.6],
       [167.5, 59.0],
@@ -264,6 +265,7 @@
     ]
   },
   {
+    "dimensions": ["data2"],
     "source": [
       [174.0, 65.6],
       [175.3, 71.8],

src/packages/components/Charts/Scatter/Common/index.ts → src/packages/components/Charts/Scatters/ScatterCommon/index.ts

@@ -1,14 +1,15 @@
 import image from '@/assets/images/chart/charts/Point.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const ScatterCommonConfig: ConfigType = {
-  key: 'Scatter',
-  chartKey: 'VScatter',
-  conKey: 'VCScatter',
+  key: 'ScatterCommon',
+  chartKey: 'VScatterCommon',
+  conKey: 'VCScatterCommon',
   title: '散点图',
   category: ChatCategoryEnum.SCATTER,
   categoryName: ChatCategoryEnumName.SCATTER,
   package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.ECHARTS,
   image
 }

src/packages/components/Charts/Scatters/ScatterCommon/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <v-chart
+    ref="vChartRef"
+    :theme="themeColor"
+    :option="option"
+    :manual-update="isPreview()"
+    :update-options="{ replaceMerge: replaceMergeArr }"
+    autoresize
+  >
+  </v-chart>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed, watch, ref, nextTick } from 'vue'
+import VChart from 'vue-echarts'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { ScatterChart } from 'echarts/charts'
+import config, { includes, seriesItem } from './config'
+import { mergeTheme } from '@/packages/public/chart'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartDataFetch } from '@/hooks'
+import { isPreview } from '@/utils'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+use([DatasetComponent, CanvasRenderer, ScatterChart, GridComponent, TooltipComponent, LegendComponent])
+
+const replaceMergeArr = ref<string[]>()
+
+const option = computed(() => {
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+
+// dataset 无法变更条数的补丁
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData, oldData) => {
+    if (newData?.length !== oldData?.length) {
+      replaceMergeArr.value = ['series']
+      // eslint-disable-next-line vue/no-mutating-props
+      props.chartConfig.option.series = newData.map((item: { dimensions: any[] }, index: number) => ({
+        ...seriesItem,
+        name: item.dimensions[0],
+        datasetIndex: index
+      }))
+      nextTick(() => {
+        replaceMergeArr.value = []
+      })
+    }
+  },
+  {
+    deep: false
+  }
+)
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+</script>

src/packages/components/Charts/Scatters/index.ts

@@ -0,0 +1,3 @@
+import { ScatterCommonConfig } from './ScatterCommon/index'
+
+export default [ScatterCommonConfig]

src/packages/components/Charts/index.ts

@@ -1,7 +1,8 @@
 import Bars from './Bars'
 import Pies from './Pies'
 import Lines from './Lines'
+import Scatters from './Scatters'
 import Mores from './Mores'
 import Maps from './Maps'
 
-export const ChartList = [...Bars, ...Pies, ...Lines, ...Maps, ...Mores]
+export const ChartList = [...Bars, ...Pies, ...Lines, ...Scatters, ...Maps, ...Mores]