From ab950c57e7c90d02703294ff2a8fd96d8344f96b Mon Sep 17 00:00:00 2001 From: jianneng-fit2cloud Date: Tue, 23 Jul 2024 20:10:45 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E5=9B=BE=E8=A1=A8-=E6=B5=81=E5=90=91?= =?UTF-8?q?=E5=9C=B0=E5=9B=BE):=20=E6=94=AF=E6=8C=81=E9=85=8D=E7=BD=AE?= =?UTF-8?q?=E8=B5=B7=E6=AD=A2=E7=82=B9=E5=90=8D=E7=A7=B0=E4=BB=A5=E5=8F=8A?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E9=85=8D=E7=BD=AE=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/models/chart/chart-attr.d.ts | 76 ++-- .../core-frontend/src/models/chart/chart.d.ts | 2 + .../src/models/chart/editor.d.ts | 5 + .../editor/editor-style/ChartStyle.vue | 43 ++- .../components/BasicStyleSelector.vue | 204 ----------- .../components/FlowMapLineSelector.vue | 326 ++++++++++++++++++ .../components/FlowMapPointSelector.vue | 210 +++++++++++ .../views/chart/components/editor/index.vue | 169 +++++++++ .../chart/components/editor/util/chart.ts | 68 +++- .../js/panel/charts/map/flow-map.ts | 244 +++++++++++-- .../extensions/view/dto/ChartViewBaseDTO.java | 10 + 11 files changed, 1079 insertions(+), 278 deletions(-) create mode 100644 core/core-frontend/src/views/chart/components/editor/editor-style/components/FlowMapLineSelector.vue create mode 100644 core/core-frontend/src/views/chart/components/editor/editor-style/components/FlowMapPointSelector.vue diff --git a/core/core-frontend/src/models/chart/chart-attr.d.ts b/core/core-frontend/src/models/chart/chart-attr.d.ts index 9a6765b04f..6bcfc3af77 100644 --- a/core/core-frontend/src/models/chart/chart-attr.d.ts +++ b/core/core-frontend/src/models/chart/chart-attr.d.ts @@ -529,34 +529,6 @@ declare interface ChartMiscAttr { * 地图倾角 */ mapPitch: number - /** - * 地图线条类型 - */ - mapLineType: string - /** - * 地图线条宽度 - */ - mapLineWidth: number - /** - * 流向地图动画 - */ - mapLineAnimate?: boolean - /** - * 流向地图动画间隔 - */ - mapLineAnimateDuration: number - /** - * 地图线条渐变 - */ - mapLineGradient: boolean - /** - * 地图线条渐变起始颜色 - */ - mapLineSourceColor: string - /** - * 地图线条渐变结束颜色 - */ - mapLineTargetColor: string /** * 指标/文本卡值字体 */ @@ -653,6 +625,54 @@ declare interface ChartMiscAttr { * 显示图例个数 */ mapLegendNumber: number + /** + * 流向地图配置 + */ + flowMapConfig: { + lineConfig: { + /** + * 地图线条类型 + */ + mapLineType: string + /** + * 地图线条宽度 + */ + mapLineWidth: number + /** + * 流向地图动画 + */ + mapLineAnimate?: boolean + /** + * 流向地图动画间隔 + */ + mapLineAnimateDuration: number + /** + * 地图线条渐变 + */ + mapLineGradient: boolean + /** + * 地图线条渐变起始颜色 + */ + mapLineSourceColor: string + /** + * 地图线条渐变结束颜色 + */ + mapLineTargetColor: string + alpha: number + } + pointConfig: { + text: { + color: string + fontSize: number + } + point: { + color: string + size: number + animate: boolean + speed: number + } + } + } } /** * 动态极值配置 diff --git a/core/core-frontend/src/models/chart/chart.d.ts b/core/core-frontend/src/models/chart/chart.d.ts index a69d17027a..071d1470af 100644 --- a/core/core-frontend/src/models/chart/chart.d.ts +++ b/core/core-frontend/src/models/chart/chart.d.ts @@ -65,6 +65,8 @@ declare interface Chart { * 针对不是序列字段的图表,通过获取分类字段的值作为序列字段 */ seriesFieldObjs?: any[] + flowMapStartName?: Axis[] + flowMapEndName?: Axis[] } declare type CustomAttr = DeepPartial | JSONString> declare type CustomStyle = DeepPartial | JSONString> diff --git a/core/core-frontend/src/models/chart/editor.d.ts b/core/core-frontend/src/models/chart/editor.d.ts index dd890c90b4..a2adf7a08c 100644 --- a/core/core-frontend/src/models/chart/editor.d.ts +++ b/core/core-frontend/src/models/chart/editor.d.ts @@ -25,6 +25,8 @@ declare type EditorProperty = | 'indicator-name-selector' | 'quadrant-selector' | 'map-symbolic-selector' + | 'flow-map-line-selector' + | 'flow-map-point-selector' declare type EditorPropertyInner = { [key in EditorProperty]?: string[] } @@ -50,6 +52,9 @@ declare type AxisType = | 'extLabel' | 'extTooltip' | 'area' + | 'flowMapStartName' + | 'flowMapEndName' + | 'flowMapColor' /** * 轴配置 */ diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue index 2a5990a9b2..c5502583bd 100644 --- a/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue +++ b/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue @@ -12,7 +12,7 @@ import LegendSelector from '@/views/chart/components/editor/editor-style/compone import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain' import { storeToRefs } from 'pinia' import CollapseSwitchItem from '@/components/collapse-switch-item/src/CollapseSwitchItem.vue' -import { ElCollapseItem } from 'element-plus-secondary' +import { ElCollapse, ElCollapseItem } from 'element-plus-secondary' import BasicStyleSelector from '@/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue' import ComponentPosition from '@/components/visualization/common/ComponentPosition.vue' import BackgroundOverallCommon from '@/components/visualization/component-background/BackgroundOverallCommon.vue' @@ -23,6 +23,8 @@ import MiscStyleSelector from '@/views/chart/components/editor/editor-style/comp import IndicatorValueSelector from '@/views/chart/components/editor/editor-style/components/IndicatorValueSelector.vue' import IndicatorNameSelector from '@/views/chart/components/editor/editor-style/components/IndicatorNameSelector.vue' import QuadrantSelector from '@/views/chart/components/editor/editor-style/components/QuadrantSelector.vue' +import FlowMapLineSelector from '@/views/chart/components/editor/editor-style/components/FlowMapLineSelector.vue' +import FlowMapPointSelector from '@/views/chart/components/editor/editor-style/components/FlowMapPointSelector.vue' const dvMainStore = dvMainStoreWithOut() const { dvInfo } = storeToRefs(dvMainStore) @@ -103,7 +105,9 @@ const emit = defineEmits([ 'onExtTooltipChange', 'onIndicatorChange', 'onIndicatorNameChange', - 'onChangeQuadrantForm' + 'onChangeQuadrantForm', + 'onChangeFlowMapLineForm', + 'onChangeFlowMapPointForm' ]) const indicatorValueRef = ref() @@ -189,6 +193,12 @@ const onExtTooltipChange = val => { const onChangeQuadrantForm = val => { emit('onChangeQuadrantForm', val) } +const onChangeFlowMapLineForm = val => { + emit('onChangeFlowMapLineForm', val) +} +const onChangeFlowMapPointForm = val => { + emit('onChangeFlowMapPointForm', val) +} watch( () => props.chart.id, () => { @@ -436,6 +446,35 @@ watch( @onChangeQuadrantForm="onChangeQuadrantForm" /> + + + + + + diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue index b1ee01f0f8..e46801d040 100644 --- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue +++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue @@ -55,16 +55,6 @@ watch( ) const emit = defineEmits(['onBasicStyleChange', 'onMiscChange']) const changeBasicStyle = (prop?: string, requestData = false) => { - const mapLineColorStyle = prop?.split('@') - if (mapLineColorStyle.length === 2) { - if (mapLineColorStyle[1].toLowerCase() === 'SourceColor'.toLowerCase()) { - state.basicStyleForm.colors[0] = state.miscForm.mapLineSourceColor - } - if (mapLineColorStyle[1].toLowerCase() === 'TargetColor'.toLowerCase()) { - state.basicStyleForm.colors[1] = state.miscForm.mapLineTargetColor - } - changeMisc(state.basicStyleForm.colors[0] + state.basicStyleForm.colors[1]) - } emit('onBasicStyleChange', { data: state.basicStyleForm, requestData }, prop) } const onAlphaChange = v => { @@ -92,10 +82,6 @@ const init = () => { configCompat(basicStyle) state.basicStyleForm = defaultsDeep(basicStyle, cloneDeep(DEFAULT_BASIC_STYLE)) as ChartBasicStyle state.miscForm = defaultsDeep(miscStyle, cloneDeep(DEFAULT_MISC)) as ChartMiscAttr - if (props.chart.type === 'flow-map') { - state.miscForm.mapLineSourceColor = state.basicStyleForm.colors[0] - state.miscForm.mapLineTargetColor = state.basicStyleForm.colors[1] - } if (!state.customColor) { state.customColor = state.basicStyleForm.colors[0] state.colorIndex = 0 @@ -222,12 +208,6 @@ const heatMapTypeOptions = [ { name: t('chart.heatmap3D'), value: 'heatmap3D' } ] -const flowLineTypeOptions = [ - { name: t('chart.map_line_type_line'), value: 'line' }, - { name: t('chart.map_line_type_arc'), value: 'arc' }, - { name: t('chart.map_line_type_arc_3d'), value: 'arc3d' } -] - const mapSymbolOptions = [ { name: t('chart.line_symbol_circle'), value: 'circle' }, { name: t('chart.line_symbol_rect'), value: 'square' }, @@ -410,190 +390,6 @@ onMounted(() => { -
- - - - - - - - - -
- - - - - - - - -
- - - - - {{ t('chart.line') + t('chart.map_line_linear') }} - - - - -
- - - - - - - - - - - - -
-
- - - - - - - -
-
- - - - - - - - - - - - - - - -
- - - - - {{ t('chart.line') + t('chart.map_line_animate') }} - - - - -
- - - - - - - - -
-
+ + +
+ + {{ chartViewInstance.axisConfig.flowMapStartName.name }} + + + + + + +
+
+ + + + +
+
+ + + +
+ + {{ chartViewInstance.axisConfig.flowMapEndName.name }} + + + + + + +
+
+ + + + +
+
+
@@ -2599,6 +2766,8 @@ const deleteChartFieldItem = id => { @onChangeMiscStyleForm="onChangeMiscStyleForm" @onExtTooltipChange="onExtTooltipChange" @onChangeQuadrantForm="onChangeQuadrantForm" + @onChangeFlowMapLineForm="onChangeFlowMapLineForm" + @onChangeFlowMapPointForm="onChangeFlowMapPointForm" /> diff --git a/core/core-frontend/src/views/chart/components/editor/util/chart.ts b/core/core-frontend/src/views/chart/components/editor/util/chart.ts index e194499235..31c1dd113b 100644 --- a/core/core-frontend/src/views/chart/components/editor/util/chart.ts +++ b/core/core-frontend/src/views/chart/components/editor/util/chart.ts @@ -29,9 +29,14 @@ export const DEFAULT_COLOR_CASE: DeepPartial = { zoomBackground: '#fff' }, misc: { - mapLineGradient: false, - mapLineSourceColor: '#146C94', - mapLineTargetColor: '#576CBC', + flowMapConfig: { + lineConfig: { + mapLineAnimate: true, + mapLineGradient: false, + mapLineSourceColor: '#146C94', + mapLineTargetColor: '#576CBC' + } + }, nameFontColor: '#000000', valueFontColor: '#5470c6' }, @@ -72,9 +77,14 @@ export const DEFAULT_COLOR_CASE_LIGHT: DeepPartial = { zoomBackground: '#fff' }, misc: { - mapLineGradient: false, - mapLineSourceColor: '#146C94', - mapLineTargetColor: '#576CBC', + flowMapConfig: { + lineConfig: { + mapLineAnimate: true, + mapLineGradient: false, + mapLineSourceColor: '#146C94', + mapLineTargetColor: '#576CBC' + } + }, nameFontColor: '#000000', valueFontColor: '#5470c6' }, @@ -115,9 +125,13 @@ export const DEFAULT_COLOR_CASE_DARK: DeepPartial = { zoomBackground: '#000' }, misc: { - mapLineGradient: false, - mapLineSourceColor: '#2F58CD', - mapLineTargetColor: '#3795BD', + flowMapConfig: { + lineConfig: { + mapLineGradient: false, + mapLineSourceColor: '#146C94', + mapLineTargetColor: '#576CBC' + } + }, nameFontColor: '#ffffff', valueFontColor: '#5470c6' }, @@ -255,18 +269,36 @@ export const DEFAULT_MISC: ChartMiscAttr = { hPosition: 'center', vPosition: 'center', mapPitch: 0, - mapLineType: 'arc', - mapLineWidth: 1, - mapLineAnimateDuration: 3, - mapLineGradient: false, - mapLineSourceColor: '#146C94', - mapLineTargetColor: '#576CBC', wordSizeRange: [8, 32], wordSpacing: 6, mapAutoLegend: true, mapLegendMax: 0, mapLegendMin: 0, - mapLegendNumber: 9 + mapLegendNumber: 9, + flowMapConfig: { + lineConfig: { + mapLineAnimate: true, + mapLineType: 'arc', + mapLineWidth: 1, + mapLineAnimateDuration: 3, + mapLineGradient: false, + mapLineSourceColor: '#146C94', + mapLineTargetColor: '#576CBC', + alpha: 100 + }, + pointConfig: { + text: { + color: '#146C94', + fontSize: 10 + }, + point: { + color: 'red', + size: 4, + animate: false, + speed: 0.01 + } + } + } } export const DEFAULT_MARK = { @@ -1541,7 +1573,9 @@ export const BASE_VIEW_CONFIG = { threshold: DEFAULT_THRESHOLD, scrollCfg: DEFAULT_SCROLL, areaMapping: {} - } + }, + flowMapStartName: [], + flowMapEndName: [] } export function getScaleValue(propValue, scale) { diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/map/flow-map.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/map/flow-map.ts index 4b1ff42ed3..8447be5f76 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/map/flow-map.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/map/flow-map.ts @@ -11,6 +11,7 @@ import { deepCopy } from '@/utils/utils' import { GaodeMap } from '@antv/l7-maps' import { Scene } from '@antv/l7-scene' import { LineLayer } from '@antv/l7-layers' +import { PointLayer } from '@antv/l7-layers' import { queryMapKeyApi } from '@/api/setting/sysParameter' import { mapRendered, mapRendering } from '@/views/chart/components/js/panel/common/common_antv' const { t } = useI18n() @@ -22,13 +23,15 @@ export class FlowMap extends L7ChartView { properties: EditorProperty[] = [ 'background-overall-component', 'basic-style-selector', - 'title-selector' + 'title-selector', + 'flow-map-line-selector', + 'flow-map-point-selector' ] propertyInner: EditorPropertyInner = { ...MAP_EDITOR_PROPERTY_INNER, 'basic-style-selector': ['mapBaseStyle', 'mapLineStyle', 'zoom'] } - axis: AxisType[] = ['xAxis', 'xAxisExt', 'filter'] + axis: AxisType[] = ['xAxis', 'xAxisExt', 'filter', 'flowMapStartName', 'flowMapEndName', 'yAxis'] axisConfig: AxisConfig = { xAxis: { name: `起点经纬度 / ${t('chart.dimension')}`, @@ -39,6 +42,21 @@ export class FlowMap extends L7ChartView { name: `终点经纬度 / ${t('chart.dimension')}`, type: 'd', limit: 2 + }, + flowMapStartName: { + name: `起点名称 / ${t('chart.dimension')}`, + type: 'd', + limit: 1 + }, + flowMapEndName: { + name: `终点名称 / ${t('chart.dimension')}`, + type: 'd', + limit: 1 + }, + yAxis: { + name: `线条粗细 / ${t('chart.quota')}`, + type: 'q', + limit: 1 } } constructor() { @@ -50,19 +68,6 @@ export class FlowMap extends L7ChartView { const xAxis = deepCopy(chart.xAxis) const xAxisExt = deepCopy(chart.xAxisExt) const { basicStyle, misc } = deepCopy(parseJson(chart.customAttr)) - const flowLineStyle = { - type: misc.mapLineType, - size: misc.mapLineType === 'line' ? misc.mapLineWidth / 2 : misc.mapLineWidth, - animate: misc.mapLineAnimate, - animateDuration: misc.mapLineAnimateDuration, - gradient: misc.mapLineGradient, - sourceColor: misc.mapLineSourceColor, - targetColor: misc.mapLineTargetColor, - alpha: basicStyle.alpha - } - const colorsWithAlpha = basicStyle.colors.map(color => hexColorToRGBA(color, basicStyle.alpha)) - flowLineStyle.sourceColor = colorsWithAlpha[0] - flowLineStyle.targetColor = colorsWithAlpha[1] const mapStyle = `amap://styles/${basicStyle.mapStyle ? basicStyle.mapStyle : 'normal'}` const key = await this.getMapKey() @@ -84,6 +89,48 @@ export class FlowMap extends L7ChartView { if (xAxis?.length < 2 || xAxisExt?.length < 2) { return new L7Wrapper(scene, undefined) } + const configList = [] + configList.push(this.lineConfig(chart, xAxis, xAxisExt, basicStyle, misc)) + this.startAndEndNameConfig(chart, xAxis, xAxisExt, misc, configList) + this.pointConfig(chart, xAxis, xAxisExt, misc, configList) + configList[0].once('inited', () => { + mapRendered(container) + }) + this.configZoomButton(chart, scene) + return new L7Wrapper(scene, configList) + } + + lineConfig = (chart, xAxis, xAxisExt, basicStyle, misc) => { + const flowLineStyle = { + type: misc.flowMapConfig.lineConfig.mapLineType, + size: + misc.flowMapConfig.lineConfig.mapLineType === 'line' + ? misc.flowMapConfig.lineConfig.mapLineWidth / 2 + : misc.flowMapConfig.lineConfig.mapLineWidth, + animate: misc.flowMapConfig.lineConfig.mapLineAnimate, + animateDuration: misc.flowMapConfig.lineConfig.mapLineAnimateDuration, + gradient: misc.flowMapConfig.lineConfig.mapLineGradient, + sourceColor: misc.flowMapConfig.lineConfig.mapLineSourceColor, + targetColor: misc.flowMapConfig.lineConfig.mapLineTargetColor, + alpha: misc.flowMapConfig.lineConfig.alpha + } + const colorsWithAlpha = basicStyle.colors.map(color => + hexColorToRGBA(color, misc.flowMapConfig.lineConfig.alpha) + ) + flowLineStyle.sourceColor = colorsWithAlpha[0] + flowLineStyle.targetColor = colorsWithAlpha[1] + // 线条粗细 + let lineWidthField = null + const yAxis = deepCopy(chart.yAxis) + if (yAxis.length > 0) { + lineWidthField = yAxis[0].dataeaseName + } + // 线条颜色 + let lineColorField = null + const yAxisExt = deepCopy(chart.yAxisExt) + if (yAxisExt.length > 0) { + lineColorField = yAxisExt[0].dataeaseName + } const config: L7Config = new LineLayer({ name: 'line', blend: 'normal', @@ -106,24 +153,167 @@ export class FlowMap extends L7ChartView { interval: 1, trailLength: 1 }) - if (flowLineStyle.gradient) { + + if (lineWidthField) { + config.size(lineWidthField, [1, 10]) + } + if (lineColorField) { config.style({ - sourceColor: flowLineStyle.sourceColor, - targetColor: flowLineStyle.targetColor, opacity: flowLineStyle.alpha / 100 }) + config.color(lineColorField) } else { - config - .style({ + if (flowLineStyle.gradient) { + config.style({ + sourceColor: flowLineStyle.sourceColor, + targetColor: flowLineStyle.targetColor, opacity: flowLineStyle.alpha / 100 }) - .color(flowLineStyle.sourceColor) + } else { + config + .style({ + opacity: flowLineStyle.alpha / 100 + }) + .color(flowLineStyle.sourceColor) + } + } + + return config + } + + startAndEndNameConfig = (chart, xAxis, xAxisExt, misc, configList) => { + const flowMapStartName = deepCopy(chart.flowMapStartName) + const flowMapEndName = deepCopy(chart.flowMapEndName) + const textColor = misc.flowMapConfig.pointConfig.text.color + const textFontSize = misc.flowMapConfig.pointConfig.text.fontSize + const has = new Map() + if (flowMapStartName?.length > 0) { + const startTextLayer = new PointLayer() + .source(chart.data?.tableRow, { + parser: { + type: 'json', + x: xAxis[0].dataeaseName, + y: xAxis[1].dataeaseName + } + }) + .shape(flowMapStartName[0].dataeaseName, args => { + if (has.has('from-' + args)) { + return '' + } + has.set('from-' + args, args) + return args + }) + .size(textFontSize) + .color(textColor) + .style({ + textAnchor: 'top', // 文本相对锚点的位置 center|left|right|top|bottom|top-left + textOffset: [0, 0], // 文本相对锚点的偏移量 [水平, 垂直] + spacing: 2, // 字符间距 + padding: [1, 1], // 文本包围盒 padding [水平,垂直],影响碰撞检测结果,避免相邻文本靠的太近 + textAllowOverlap: true + }) + configList.push(startTextLayer) + } + if (flowMapEndName?.length > 0) { + const endTextLayer = new PointLayer() + .source(chart.data?.tableRow, { + parser: { + type: 'json', + x: xAxisExt[0].dataeaseName, + y: xAxisExt[1].dataeaseName + } + }) + .shape(flowMapEndName[0].dataeaseName, args => { + if (has.has('from-' + args) || has.has('to-' + args)) { + return '' + } + has.set('to-' + args, args) + return args + }) + .size(textFontSize) + .color(textColor) + .style({ + textAnchor: 'top', // 文本相对锚点的位置 center|left|right|top|bottom|top-left + textOffset: [0, 0], // 文本相对锚点的偏移量 [水平, 垂直] + spacing: 2, // 字符间距 + padding: [1, 1], // 文本包围盒 padding [水平,垂直],影响碰撞检测结果,避免相邻文本靠的太近 + textAllowOverlap: true + }) + configList.push(endTextLayer) + } + } + + 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 fromDefaultPointLayer = new PointLayer({ zIndex: -1 }) + .source(chart.data?.tableRow, { + parser: { + type: 'json', + x: xAxis[0].dataeaseName, + y: xAxis[1].dataeaseName + } + }) + .shape('circle') + .size(size) + .color(color) + .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: { + type: 'json', + x: xAxisExt[0].dataeaseName, + y: xAxisExt[1].dataeaseName + } + }) + .shape('circle') + .size(size) + .color(color) + .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({ + enable: true, + speed: speed, + rings: 0.01 + }) + if (animate) { + configList.push(fromAnimatePointLayer) + configList.push(toAnimatePointLayer) } - config.once('inited', () => { - mapRendered(container) - }) - this.configZoomButton(chart, scene) - return new L7Wrapper(scene, config) } getMapKey = async () => { @@ -135,7 +325,7 @@ export class FlowMap extends L7ChartView { } setupDefaultOptions(chart: ChartObj): ChartObj { - chart.customAttr.misc.mapLineAnimate = true + chart.customAttr.misc.flowMapConfig.lineConfig.mapLineAnimate = true return chart } diff --git a/sdk/extensions/extensions-view/src/main/java/io/dataease/extensions/view/dto/ChartViewBaseDTO.java b/sdk/extensions/extensions-view/src/main/java/io/dataease/extensions/view/dto/ChartViewBaseDTO.java index de153848f0..2cf27bab16 100644 --- a/sdk/extensions/extensions-view/src/main/java/io/dataease/extensions/view/dto/ChartViewBaseDTO.java +++ b/sdk/extensions/extensions-view/src/main/java/io/dataease/extensions/view/dto/ChartViewBaseDTO.java @@ -208,4 +208,14 @@ public class ChartViewBaseDTO implements Serializable { */ private Boolean aggregate; + /** + * 流向地图起点名称 + */ + private List flowMapStartName; + + /** + * 流向地图终点名称 + */ + private List flowMapEndName; + }