feat: 完成散点图的属性及配置优化

src/packages/components/Charts/Scatters/ScatterBasic/config.ts

@@ -9,7 +9,6 @@ export const includes = ['legend', 'xAxis', 'yAxis']
 export const option = {
   dataset: dataJson,
   tooltip: {
-    // trigger: 'axis',
     showDelay: 0,
     axisPointer: {
       show: true,

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

@@ -1,17 +1,31 @@
+<!-- eslint-disable vue/no-mutating-props -->
 <template>
   <!-- Echarts 全局设置 -->
   <global-setting :optionData="optionData" :in-chart="true"></global-setting>
+
+  <CollapseItem :name="`散点`" expanded v-for="(item, index) in optionData.series" :key="index">
+    <SettingItemBox name="样式">
+      <SettingItem name="类型">
+        <n-select v-model:value="item.type" size="small" :options="ScatterEffectTypeEnumList" placeholder="选择" />
+      </SettingItem>
+      <SettingItem name="大小">
+        <n-input-number v-model:value="item.symbolSize" size="small" :min="1"></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
 </template>
 
 <script setup lang="ts">
 import { PropType } from 'vue'
 import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
-import { GlobalSetting } from '@/components/Pages/ChartItemSetting'
+import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+import { ScatterEffectTypeEnumList } from '../shard'
 
 // eslint-disable-next-line no-unused-vars
 const props = defineProps({
   optionData: {
-    type: Object as PropType<GlobalThemeJsonType>,
+    type: Object as PropType<GlobalThemeJsonType & typeof option>,
     required: true
   }
 })

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

@@ -1,21 +1,13 @@
 <template>
-  <v-chart
-    ref="vChartRef"
-    :theme="themeColor"
-    :option="option"
-    :manual-update="isPreview()"
-    :update-options="{ replaceMerge: replaceMergeArr }"
-    autoresize
-  >
-  </v-chart>
+  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize> </v-chart>
 </template>
 
 <script setup lang="ts">
-import { PropType, computed, watch, ref, nextTick } from 'vue'
+import { PropType, computed } from 'vue'
 import VChart from 'vue-echarts'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
-import { ScatterChart } from 'echarts/charts'
+import { ScatterChart, EffectScatterChart } from 'echarts/charts'
 import config, { includes } from './config'
 import { mergeTheme } from '@/packages/public/chart'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
@@ -38,29 +30,19 @@ const props = defineProps({
   }
 })
 
-use([DatasetComponent, CanvasRenderer, ScatterChart, GridComponent, TooltipComponent, LegendComponent])
-
-const replaceMergeArr = ref<string[]>()
+use([
+  DatasetComponent,
+  CanvasRenderer,
+  ScatterChart,
+  EffectScatterChart,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent
+])
 
 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']
-      nextTick(() => {
-        replaceMergeArr.value = []
-      })
-    }
-  },
-  {
-    deep: false
-  }
-)
-
 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
 </script>

src/packages/components/Charts/Scatters/ScatterLogarithmicRegression/config.ts

@@ -24,7 +24,7 @@ export const option = {
   legend: {
     data: dataJson
       .filter(i => i?.transform?.type === 'filter' && i?.transform?.config?.eq)
-      .map(i => i.transform?.config?.eq)
+      .map(i => i.transform?.config?.eq?.toString())
   },
 
   xAxis: {

src/packages/components/Charts/Scatters/ScatterMuitData/config.ts

@@ -10,6 +10,37 @@ export const seriesItem = {
   type: 'scatter',
   emphasis: {
     focus: 'series'
+  },
+  symbolSize: 12,
+
+  markArea: {
+    silent: true,
+    itemStyle: {
+      color: 'transparent',
+      borderWidth: 1,
+      borderType: 'dashed'
+    },
+    data: [
+      [
+        {
+          xAxis: 'min',
+          yAxis: 'min'
+        },
+        {
+          xAxis: 'max',
+          yAxis: 'max'
+        }
+      ]
+    ]
+  },
+
+  markPoint: {
+    symbol: 'pin',
+    symbolSize: 50,
+    data: [
+      { type: 'max', name: 'Max' },
+      { type: 'min', name: 'Min' }
+    ]
   }
 }
 
@@ -26,28 +57,12 @@ export const option = {
       }
     }
   },
-  legend: {},
 
-  // visualMap: {
-  //   min: 0,
-  //   max: 360,
-  //   dimension: 1,
-  //   orient: 'vertical',
-  //   right: 10,
-  //   top: 'center',
-  //   text: ['高', '低'],
-  //   calculable: true,
-  //   inRange: {
-  //     color: ['#f2c31a', '#24b7f2']
-  //   }
-  // },
+  legend: {},
 
   xAxis: {
     type: 'value',
     scale: true,
-    // axisLabel: {
-    //   formatter: '{value} cm'
-    // },
     splitLine: {
       show: false
     }
@@ -56,22 +71,13 @@ export const option = {
   yAxis: {
     type: 'value',
     scale: true,
-    // axisLabel: {
-    //   formatter: '{value} kg'
-    // },
     splitLine: {
       show: false
     }
   },
 
-  // series: [
-  //   { ...seriesItem, datasetIndex: 0 },
-  //   { ...seriesItem, datasetIndex: 1 }
-  // ],
-
   series: dataJson.map((item, index) => ({
     ...seriesItem,
-    // name: (item.dimensions && item.dimensions[0]) || `data${index}`,
     datasetIndex: index
   }))
 }

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

@@ -1,17 +1,54 @@
 <template>
   <!-- Echarts 全局设置 -->
   <global-setting :optionData="optionData" :in-chart="true"></global-setting>
+
+  <CollapseItem :name="`散点-${index + 1}`" expanded v-for="(item, index) in optionData.series" :key="index">
+    <SettingItemBox name="样式">
+      <SettingItem name="类型">
+        <n-select v-model:value="item.type" size="small" :options="ScatterEffectTypeEnumList" placeholder="选择" />
+      </SettingItem>
+      <SettingItem name="大小">
+        <n-input-number v-model:value="item.symbolSize" size="small" :min="1"></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+
+    <SettingItemBox name="标域">
+      <SettingItem name="粗细(0不显示)">
+        <n-input-number v-model:value="item.markArea.itemStyle.borderWidth" size="small" :min="0"></n-input-number>
+      </SettingItem>
+      <SettingItem name="符号">
+        <n-select
+          v-model:value="item.markArea.itemStyle.borderType"
+          size="small"
+          :options="axisConfig.splitLint.lineStyle.type"
+          placeholder="选择"
+        />
+      </SettingItem>
+    </SettingItemBox>
+
+    <SettingItemBox name="标点">
+      <SettingItem name="类型">
+        <n-select v-model:value="item.markPoint.symbol" size="small" :options="SymbolEnumList" placeholder="选择" />
+      </SettingItem>
+      <SettingItem name="大小">
+        <n-input-number v-model:value="item.markPoint.symbolSize" size="small" :min="0"></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
 </template>
 
 <script setup lang="ts">
 import { PropType } from 'vue'
 import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
-import { GlobalSetting } from '@/components/Pages/ChartItemSetting'
+import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+import { ScatterEffectTypeEnumList, SymbolEnumList } from '../shard'
+import { axisConfig } from '@/packages/chartConfiguration/echarts/index'
 
 // eslint-disable-next-line no-unused-vars
 const props = defineProps({
   optionData: {
-    type: Object as PropType<GlobalThemeJsonType>,
+    type: Object as PropType<GlobalThemeJsonType & typeof option>,
     required: true
   }
 })

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

@@ -15,13 +15,21 @@ 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 { ScatterChart, EffectScatterChart } 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'
+import {
+  DatasetComponent,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  MarkLineComponent,
+  MarkAreaComponent,
+  MarkPointComponent
+} from 'echarts/components'
 
 const props = defineProps({
   themeSetting: {
@@ -38,7 +46,18 @@ const props = defineProps({
   }
 })
 
-use([DatasetComponent, CanvasRenderer, ScatterChart, GridComponent, TooltipComponent, LegendComponent])
+use([
+  DatasetComponent,
+  CanvasRenderer,
+  ScatterChart,
+  EffectScatterChart,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  MarkLineComponent,
+  MarkAreaComponent,
+  MarkPointComponent
+])
 
 const replaceMergeArr = ref<string[]>()
 
@@ -55,7 +74,6 @@ watch(
       // 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(() => {

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

@@ -0,0 +1,15 @@
+export const ScatterEffectTypeEnumList = [
+  { label: '普通', value: 'scatter' },
+  { label: '特效', value: 'effectScatter' }
+]
+
+export const SymbolEnumList = [
+  { label: '圆形', value: 'circle' },
+  { label: '正方形', value: 'rect' },
+  { label: '圆角正方形', value: 'roundRect' },
+  { label: '三角形', value: 'triangle' },
+  { label: '菱形', value: 'diamond' },
+  { label: '坐标', value: 'pin' },
+  { label: '箭头', value: 'arrow' },
+  { label: '无', value: 'none' }
+]