feat: 新增水球图数据变化和样式设置

src/hooks/useChartDataFetch.hook.ts

@@ -51,7 +51,7 @@ export const useChartDataFetch = (
               PackagesCategoryEnum.CHARTS
 
             try {
-              if (isECharts) {
+              if (isECharts && vChartRef?.value?.setOption) {
                 nextTick(() => {
                   if (vChartRef.value) {
                     vChartRef.value.setOption({ dataset: res.data })

src/packages/components/Charts/Lines/LineGradientSingle/index.vue

@@ -1,5 +1,11 @@
 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option.options" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart 
+    ref="vChartRef" 
+    :theme="themeColor" 
+    :option="option.options" 
+    :manual-update="isPreview()" 
+    autoresize>
+  </v-chart>
 </template>
 
 <script setup lang="ts">

src/packages/components/Charts/Mores/WaterPolo/config.ts

@@ -6,11 +6,12 @@ import cloneDeep from 'lodash/cloneDeep'
 export const includes = []
 
 export const option = {
+  dataset: 0.5,
   series: [
     {
       type: 'liquidFill',
       radius: '90%',
-      data: [0.5],
+      data: [0],
       center: ['50%', '50%'],
       color: [
         {
@@ -34,7 +35,7 @@ export const option = {
       ],
       backgroundStyle: {
         borderWidth: 1,
-        color: 'RGBA(51, 66, 127, 0.7)',
+        color: 'rgba(51, 66, 127, 0.7)',
       },
       label: {
         normal: {
@@ -56,9 +57,7 @@ export const option = {
   ],
 }
 
-export default class Config
-  extends publicConfig
-  implements CreateComponentType
+export default class Config extends publicConfig implements CreateComponentType
 {
   public key = WaterPoloConfig.key
   public chartConfig = cloneDeep(WaterPoloConfig)

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

@@ -1,6 +1,41 @@
 <template>
+  <CollapseItem name="水球" :expanded="true">
+    <SettingItemBox name="内容">
+      <SettingItem name="数值">
+        <n-input-number
+          v-model:value="optionData.series[0].data[0]"
+          :min="0"
+          :step="0.01"
+          size="small"
+          placeholder="水球数值"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="背景" :alone="true">
+      <SettingItem>
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.series[0].backgroundStyle.color"
+        ></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
 </template>
 
 <script setup lang="ts">
+import { PropType } from 'vue'
+import { option } from './config'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem,
+} from '@/components/Pages/ChartItemSetting'
 
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true,
+  },
+})
 </script>

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

@@ -2,22 +2,24 @@
   <v-chart
     ref="vChartRef"
     :theme="themeColor"
-    :option="option"
+    :option="option.options"
     :manual-update="isPreview()"
     autoresize
   ></v-chart>
 </template>
 
 <script setup lang="ts">
-import { computed, PropType } from 'vue'
+import { PropType, watch, reactive } from 'vue'
 import VChart from 'vue-echarts'
 import { use } from 'echarts/core'
 import 'echarts-liquidfill/src/liquidFill.js'
 import { CanvasRenderer } from 'echarts/renderers'
 import { GridComponent } from 'echarts/components'
-import { mergeTheme } from '@/packages/public/chart'
-import config, { includes } from './config'
+import config  from './config'
 import { isPreview } from '@/utils'
+import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartDataFetch } from '@/hooks'
 
 const props = defineProps({
   themeSetting: {
@@ -36,9 +38,52 @@ const props = defineProps({
 
 use([CanvasRenderer, GridComponent])
 
-const option = computed(() => {
-  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+const chartEditStore = useChartEditStore()
+
+const option = reactive({
+  options: {},
 })
-</script>
 
-<style lang="scss" scoped></style>
+// 渐变色处理
+watch(
+  () => chartEditStore.getEditCanvasConfig.chartThemeColor,
+  (newColor: keyof typeof chartColorsSearch) => {
+    if (!isPreview()) {
+      const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
+      props.chartConfig.option.series[0].color[0].colorStops = [  
+        {
+          offset: 0,
+          color: themeColor[0],
+        },
+        {
+          offset: 1,
+          color: themeColor[1],
+        },
+      ]
+    }
+    option.options = props.chartConfig.option
+  },
+  {
+    immediate: true,
+  }
+)
+
+const updateDataset = (newData: number) => {
+  props.chartConfig.option.series[0].data = [newData]
+  option.options = props.chartConfig.option
+}
+
+updateDataset(0.5)
+
+watch(
+  () => props.chartConfig.option.value,
+  newData => updateDataset(newData),
+  {
+    deep: true,
+  }
+)
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: number) => {
+  updateDataset(newData)
+})
+</script>

src/settings/chartThemes/index.ts

@@ -63,7 +63,7 @@ export const chartColorsshow = {
   shine: 'linear-gradient(to right, #c12e34 0%, #0098d9 100%)',
   roma: 'linear-gradient(to right, #e01f54 0%, #5e4ea5 100%)'
 }
-// 渐变主题色列表（阴影，渐变1，渐变2）
+// 渐变主题色列表（主色1、主色2、阴影、渐变1、渐变2）
 export const chartColorsSearch = {
   dark: ['#4992ff', '#7cffb2', 'rgba(68, 181, 226, 0.3)', 'rgba(73, 146, 255, 0.5)', 'rgba(124, 255, 178, 0.5)'],
   customed: ['#5470c6', '#91cc75', 'rgba(84, 112, 198, 0.5)', 'rgba(84, 112, 198, 0.5)', 'rgba(145, 204, 117, 0.5)'],

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

@@ -1,6 +1,6 @@
 <template>
   <n-timeline class="go-chart-configurations-timeline">
-    <n-timeline-item v-if="isCharts" type="info" :title="TimelineTitleEnum.MAPPING">
+    <n-timeline-item v-if="isCharts && dimensionsAndSource" type="info" :title="TimelineTitleEnum.MAPPING">
       <n-table striped>
         <thead>
           <tr>
@@ -70,6 +70,7 @@ import { icon } from '@/plugins'
 import { DataResultEnum, TimelineTitleEnum } from '../../index.d'
 import { useFile } from '../../hooks/useFile.hooks'
 import { useTargetData } from '../../../hooks/useTargetData.hook'
+import isObject from 'lodash/isObject'
 const { targetData } = useTargetData()
 
 const props = defineProps({
@@ -135,14 +136,20 @@ const dimensionsAndSourceHandle = () => {
   }
 }
 
-watch(() => targetData.value?.option?.dataset, (newData) => {
-  if (newData) {
+watch(() => targetData.value?.option?.dataset, (newData: {
+  source: any,
+  dimensions: any
+} | null) => {
+  if (isObject(newData)) {
     // 只有 Echarts 数据才有对应的格式
     source.value = isCharts.value ? newData.source : newData
     if (isCharts.value) {
       dimensions.value = newData.dimensions
       dimensionsAndSource.value = dimensionsAndSourceHandle()
     }
+  } else {
+    dimensionsAndSource.value = null
+    source.value = newData
   }
 }, {
   immediate: true

src/views/chart/ContentLayers/components/LayersListItem/index.vue

@@ -74,6 +74,9 @@ $textSize: 10px;
     border: 1px solid v-bind('themeColor');
     /* 需要设置最高级，覆盖 hover 的颜色 */
     background-color: rgba(0, 0, 0, 0);
+    .list-img {
+      border:1px solid v-bind('themeColor')!important;
+    }
   }
   .select-modal,
   .item-content {