Merge pull request #11223 from dataease/pr@dev-v2@chart-flow-map-end-name-fix

fix(图表-流向地图): 修复流向地图设置显示终点名称无效的问题

core/core-backend/src/main/java/io/dataease/chart/charts/impl/map/FlowMapHandler.java

@@ -19,7 +19,7 @@ public class FlowMapHandler extends GroupChartHandler {
         var result = super.formatAxis(view);
         var xAxis = result.getAxisMap().get(ChartAxis.xAxis);
         xAxis.addAll(Optional.ofNullable(view.getFlowMapStartName()).orElse(new ArrayList<>()));
-        xAxis.addAll(Optional.ofNullable(view.getFlowMapStartName()).orElse(new ArrayList<>()));
+        xAxis.addAll(Optional.ofNullable(view.getFlowMapEndName()).orElse(new ArrayList<>()));
         result.getAxisMap().put(ChartAxis.xAxis, xAxis);
         return result;
     }

core/core-frontend/src/views/chart/components/editor/editor-senior/Senior.vue

@@ -162,7 +162,8 @@ const SENIOR_PROP: EditorProperty[] = [
   'scroll-cfg',
   'threshold',
   'jump-set',
-  'linkage'
+  'linkage',
+  'bubble-animate'
 ]
 const noSenior = computed(() => {
   return !includesAny(properties.value, ...SENIOR_PROP)

core/core-frontend/src/views/chart/components/editor/editor-style/components/FlowMapPointSelector.vue

@@ -1,13 +1,8 @@
 <script lang="tsx" setup>
 import { computed, onMounted, PropType, reactive, watch } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
-import {
-  COLOR_PANEL,
-  DEFAULT_BASIC_STYLE,
-  DEFAULT_MISC
-} from '@/views/chart/components/editor/util/chart'
+import { COLOR_PANEL, DEFAULT_MISC } from '@/views/chart/components/editor/util/chart'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
-import { cloneDeep, defaultsDeep } from 'lodash-es'
 import { ElSpace } from 'element-plus-secondary'
 
 const { t } = useI18n()
@@ -87,48 +82,51 @@ onMounted(() => {
 
 <template>
   <el-form ref="pointForm" :model="state.pointForm" size="small" label-position="top">
-    <el-space>
-      <el-form-item class="form-item" :class="'form-item-' + themes" :label="t('chart.text')">
-        <el-color-picker
-          :effect="themes"
-          v-model="state.pointForm.text.color"
-          class="color-picker-style"
-          :predefine="predefineColors"
-          @change="changeStyle()"
-          is-custom
-        />
-      </el-form-item>
-
-      <el-form-item class="form-item" :class="'form-item-' + themes">
-        <template #label>&nbsp;</template>
-        <el-tooltip content="字号" :effect="toolTip" placement="top">
-          <el-select
-            size="small"
-            style="width: 108px"
+    <div>
+      <el-space>
+        <el-form-item class="form-item" :class="'form-item-' + themes" :label="t('chart.text')">
+          <el-color-picker
             :effect="themes"
-            v-model.number="state.pointForm.text.fontSize"
-            :placeholder="t('chart.text_fontsize')"
+            size="default"
+            v-model="state.pointForm.text.color"
+            class="color-picker-style"
+            :predefine="predefineColors"
             @change="changeStyle()"
-          >
-            <el-option
-              v-for="option in fontSizeList"
-              :key="option.value"
-              :label="option.name"
-              :value="option.value"
-            />
-          </el-select>
-        </el-tooltip>
-      </el-form-item>
-    </el-space>
+            is-custom
+          />
+        </el-form-item>
+
+        <el-form-item class="form-item" :class="'form-item-' + themes">
+          <template #label>&nbsp;</template>
+          <el-tooltip content="字号" :effect="toolTip" placement="top">
+            <el-select
+              size="small"
+              style="width: 108px"
+              :effect="themes"
+              v-model.number="state.pointForm.text.fontSize"
+              :placeholder="t('chart.text_fontsize')"
+              @change="changeStyle()"
+            >
+              <el-option
+                v-for="option in fontSizeList"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
+            </el-select>
+          </el-tooltip>
+        </el-form-item>
+      </el-space>
+    </div>
     <div class="alpha-setting">
-      <label class="alpha-label" :class="{ dark: 'dark' === themes }"> 标注点大小 </label>
+      <label class="alpha-label" :class="{ dark: 'dark' === themes }"> 标注点气泡大小 </label>
       <el-row style="flex: 1">
         <el-col>
           <el-form-item class="form-item alpha-slider" :class="'form-item-' + themes">
             <el-slider
               :effect="themes"
               :min="0"
-              :max="5"
+              :max="20"
               v-model="state.pointForm.point.size"
               @change="changeStyle()"
             />
@@ -136,39 +134,6 @@ onMounted(() => {
         </el-col>
       </el-row>
     </div>
-    <div class="alpha-setting">
-      <el-row style="flex: 1">
-        <el-col>
-          <el-form-item class="form-item" :class="'form-item-' + themes">
-            <el-checkbox
-              :effect="themes"
-              @change="changeStyle()"
-              v-model="state.pointForm.point.animate"
-            >
-              标注点动画
-            </el-checkbox>
-          </el-form-item>
-        </el-col>
-        <el-col>
-          <div class="alpha-setting" v-if="state.pointForm.point.animate">
-            <label class="alpha-label" :class="{ dark: 'dark' === themes }"> 闪烁频率 </label>
-            <el-row style="flex: 1">
-              <el-col>
-                <el-form-item class="form-item alpha-slider" :class="'form-item-' + themes">
-                  <el-slider
-                    :effect="themes"
-                    :min="1"
-                    :max="5"
-                    v-model="state.pointForm.point.speed"
-                    @change="changeStyle()"
-                  />
-                </el-form-item>
-              </el-col>
-            </el-row>
-          </div>
-        </el-col>
-      </el-row>
-    </div>
   </el-form>
 </template>
 

core/core-frontend/src/views/chart/components/js/panel/charts/map/flow-map.ts

@@ -24,7 +24,8 @@ export class FlowMap extends L7ChartView<Scene, L7Config> {
     'basic-style-selector',
     'title-selector',
     'flow-map-line-selector',
-    'flow-map-point-selector'
+    'flow-map-point-selector',
+    'bubble-animate'
   ]
   propertyInner: EditorPropertyInner = {
     ...MAP_EDITOR_PROPERTY_INNER,
@@ -259,8 +260,7 @@ export class FlowMap extends L7ChartView<Scene, L7Config> {
   pointConfig = (chart, xAxis, xAxisExt, misc, configList) => {
     const color = misc.flowMapConfig.pointConfig.text.color
     const size = misc.flowMapConfig.pointConfig.point.size
-    const animate = misc.flowMapConfig.pointConfig.point.animate
-    const speed = misc.flowMapConfig.pointConfig.point.speed
+    const { bubbleCfg } = parseJson(chart.senior)
     const fromDefaultPointLayer = new PointLayer({ zIndex: -1 })
       .source(chart.data?.tableRow, {
         parser: {
@@ -275,23 +275,6 @@ export class FlowMap extends L7ChartView<Scene, L7Config> {
       .style({
         blur: 0.6
       })
-    configList.push(fromDefaultPointLayer)
-    const fromAnimatePointLayer = new PointLayer({ zIndex: -1 })
-      .source(chart.data?.tableRow, {
-        parser: {
-          type: 'json',
-          x: xAxis[0].dataeaseName,
-          y: xAxis[1].dataeaseName
-        }
-      })
-      .shape('circle')
-      .size(20)
-      .color(color)
-      .animate({
-        enable: true,
-        speed: speed,
-        rings: 0.01
-      })
     const toDefaultPointLayer = new PointLayer({ zIndex: -1 })
       .source(chart.data?.tableRow, {
         parser: {
@@ -306,27 +289,19 @@ export class FlowMap extends L7ChartView<Scene, L7Config> {
       .style({
         blur: 0.6
       })
-    configList.push(toDefaultPointLayer)
-    const toAnimatePointLayer = new PointLayer({ zIndex: -1 })
-      .source(chart.data?.tableRow, {
-        parser: {
-          type: 'json',
-          x: xAxisExt[0].dataeaseName,
-          y: xAxisExt[1].dataeaseName
-        }
-      })
-      .shape('circle')
-      .size(20)
-      .color(color)
-      .animate({
+    if (bubbleCfg && bubbleCfg.enable) {
+      const animate = {
         enable: true,
-        speed: speed,
-        rings: 0.01
-      })
-    if (animate) {
-      configList.push(fromAnimatePointLayer)
-      configList.push(toAnimatePointLayer)
+        speed: bubbleCfg.speed,
+        rings: bubbleCfg.rings
+      }
+      fromDefaultPointLayer.size(size * 2)
+      fromDefaultPointLayer.animate(animate)
+      toDefaultPointLayer.size(size * 2)
+      toDefaultPointLayer.animate(animate)
     }
+    configList.push(fromDefaultPointLayer)
+    configList.push(toDefaultPointLayer)
   }
 
   setupDefaultOptions(chart: ChartObj): ChartObj {