From b3fd99036c45b51db4d1b48410dd3e3c7a5cb967 Mon Sep 17 00:00:00 2001 From: jianneng-fit2cloud Date: Thu, 15 Aug 2024 16:24:23 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E5=9B=BE=E8=A1=A8-=E8=AF=8D=E4=BA=91?= =?UTF-8?q?=E5=9B=BE):=20=E6=94=AF=E6=8C=81=E8=87=AA=E5=AE=9A=E4=B9=89?= =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=8C=BA=E9=97=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/models/chart/chart-attr.d.ts | 22 +++ core/core-frontend/src/utils/canvasStyle.ts | 43 +++-- .../editor-style/components/MiscSelector.vue | 173 +++++++++++++++--- .../chart/components/editor/util/chart.ts | 6 + .../components/js/panel/charts/map/map.ts | 8 +- .../js/panel/charts/others/word-cloud.ts | 40 +++- .../src/views/chart/components/js/util.ts | 10 +- .../views/components/ChartComponentG2Plot.vue | 4 + 8 files changed, 245 insertions(+), 61 deletions(-) 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 3810916b25..9392f02a53 100644 --- a/core/core-frontend/src/models/chart/chart-attr.d.ts +++ b/core/core-frontend/src/models/chart/chart-attr.d.ts @@ -705,6 +705,28 @@ declare interface ChartMiscAttr { } } } + + /** + * 词云图轴值配置 + */ + wordCloudAxisValueRange: { + /** + * 自动轴值 + */ + auto: boolean + /** + * 最小值 + */ + min: number + /** + * 最大值 + */ + max: number + /** + * 轴值字段 + */ + fieldId: string + } } /** * 动态极值配置 diff --git a/core/core-frontend/src/utils/canvasStyle.ts b/core/core-frontend/src/utils/canvasStyle.ts index 8c52c2add1..7d65980f37 100644 --- a/core/core-frontend/src/utils/canvasStyle.ts +++ b/core/core-frontend/src/utils/canvasStyle.ts @@ -318,29 +318,32 @@ export function recursionTransObj(template, infoObj, scale, terminal) { for (const templateKey in template) { // 如果是数组 进行赋值计算 if (template[templateKey] instanceof Array) { - template[templateKey].forEach(templateProp => { - if ( - infoObj[templateKey] && - (infoObj[templateKey][templateProp] || infoObj[templateKey].length) - ) { - // 移动端特殊属性值设置 - if (terminal === 'mobile' && mobileSpecialProps[templateProp] !== undefined) { - infoObj[templateKey][templateProp] = mobileSpecialProps[templateProp] - } else { - // 数组依次设置 - if (infoObj[templateKey] instanceof Array) { - infoObj[templateKey].forEach(v => { - v[templateProp] = getScaleValue(v[templateProp], scale) - }) + // 词云图的大小区间，不需要缩放 + template[templateKey] + .filter(field => field !== 'wordSizeRange') + .forEach(templateProp => { + if ( + infoObj[templateKey] && + (infoObj[templateKey][templateProp] || infoObj[templateKey].length) + ) { + // 移动端特殊属性值设置 + if (terminal === 'mobile' && mobileSpecialProps[templateProp] !== undefined) { + infoObj[templateKey][templateProp] = mobileSpecialProps[templateProp] } else { - infoObj[templateKey][templateProp] = getScaleValue( - infoObj[templateKey][templateProp], - scale - ) + // 数组依次设置 + if (infoObj[templateKey] instanceof Array) { + infoObj[templateKey].forEach(v => { + v[templateProp] = getScaleValue(v[templateProp], scale) + }) + } else { + infoObj[templateKey][templateProp] = getScaleValue( + infoObj[templateKey][templateProp], + scale + ) + } } } - } - }) + }) } else if (typeof template[templateKey] === 'string') { // 一级字段为字符串直接赋值 infoObj[templateKey] = getScaleValue(infoObj[templateKey], scale) diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/MiscSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/MiscSelector.vue index 1da18464d6..39cd43aa29 100644 --- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/MiscSelector.vue +++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/MiscSelector.vue @@ -5,6 +5,7 @@ import { DEFAULT_MISC } from '@/views/chart/components/editor/util/chart' import { ElMessage, ElRow } from 'element-plus-secondary' import { fieldType } from '@/utils/attr' import { cloneDeep, defaultsDeep } from 'lodash-es' +import { useEmitt } from '@/hooks/web/useEmitt' const { t } = useI18n() @@ -18,6 +19,10 @@ const props = withDefaults( { themes: 'dark' } ) +useEmitt({ + name: 'word-cloud-default-data-range', + callback: args => wordCloudDefaultDataRange(args) +}) const emit = defineEmits(['onMiscChange']) watch( @@ -175,7 +180,11 @@ const isValidField = field => { } const showProperty = prop => props.propertyInner?.includes(prop) - +const wordCloudDefaultDataRange = args => { + state.miscForm.wordCloudAxisValueRange.max = args.data.max + state.miscForm.wordCloudAxisValueRange.min = args.data.min + state.miscForm.wordCloudAxisValueRange.fieldId = props.chart.yAxis?.[0]?.id +} onMounted(() => { initField() init() @@ -561,35 +570,109 @@ onMounted(() => { - - - - - - + +
+ + + + + + + + +
+ +
+ + + + + + + + +
@@ -628,4 +711,34 @@ onMounted(() => { box-shadow: 0 0 0 1px rgb(245, 74, 69) inset !important; } } + +.alpha-setting { + display: flex; + width: 100%; + + .alpha-slider { + padding: 0 8px; + :deep(.ed-slider__button-wrapper) { + --ed-slider-button-wrapper-size: 36px; + --ed-slider-button-size: 16px; + } + } + + .alpha-label { + padding-right: 8px; + font-size: 12px; + font-style: normal; + font-weight: 400; + height: 32px; + line-height: 32px; + display: inline-flex; + align-items: flex-start; + + min-width: 56px; + + &.dark { + color: #a6a6a6; + } + } +} 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 3457ea031e..48fe4ebaad 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 @@ -298,6 +298,12 @@ export const DEFAULT_MISC: ChartMiscAttr = { speed: 0.01 } } + }, + wordCloudAxisValueRange: { + auto: true, + min: 0, + max: 0, + fieldId: undefined } } diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/map/map.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/map/map.ts index 854ee7e06d..cb14b0dcb5 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/map/map.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/map/map.ts @@ -8,9 +8,9 @@ import { flow, getDynamicColorScale, getGeoJsonFile, - setMapChartDefaultMaxAndMinValueByData, hexColorToRGBA, - parseJson + parseJson, + getMaxAndMinValueByData } from '@/views/chart/components/js/util' import { handleGeoJson, @@ -81,7 +81,7 @@ export class Map extends L7PlotChartView { if (!misc.mapAutoLegend && legend.show) { let minValue = misc.mapLegendMin let maxValue = misc.mapLegendMax - setMapChartDefaultMaxAndMinValueByData(sourceData, maxValue, minValue, (max, min) => { + getMaxAndMinValueByData(sourceData, 'value', maxValue, minValue, (max, min) => { maxValue = max minValue = min action({ @@ -202,7 +202,7 @@ export class Map extends L7PlotChartView { let maxValue = misc.mapLegendMax if (legend.show) { let mapLegendNumber = misc.mapLegendNumber - setMapChartDefaultMaxAndMinValueByData(sourceData, maxValue, minValue, (max, min) => { + getMaxAndMinValueByData(sourceData, 'value', maxValue, minValue, (max, min) => { maxValue = max minValue = min mapLegendNumber = 9 diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/others/word-cloud.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/others/word-cloud.ts index a83805b01c..0e5c057de3 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/word-cloud.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/word-cloud.ts @@ -3,7 +3,12 @@ import { G2PlotDrawOptions } from '@/views/chart/components/js/panel/types/impl/g2plot' import type { WordCloud as G2WordCloud, WordCloudOptions } from '@antv/g2plot/esm/plots/word-cloud' -import { flow, parseJson } from '@/views/chart/components/js/util' +import { + filterChartDataByRange, + flow, + getMaxAndMinValueByData, + parseJson +} from '@/views/chart/components/js/util' import { getPadding } from '@/views/chart/components/js/panel/common/common_antv' import { valueFormatter } from '@/views/chart/components/js/formatter' import { useI18n } from '@/hooks/web/useI18n' @@ -42,7 +47,7 @@ export class WordCloud extends G2PlotChartView { 'letterSpace', 'fontShadow' ], - 'misc-selector': ['wordSizeRange', 'wordSpacing'], + 'misc-selector': ['wordSizeRange', 'wordSpacing', 'wordCloudAxisValueRange'], 'tooltip-selector': ['color', 'fontSize', 'backgroundColor', 'seriesTooltipFormatter', 'show'] } axis: AxisType[] = ['xAxis', 'yAxis', 'filter'] @@ -58,12 +63,35 @@ export class WordCloud extends G2PlotChartView { limit: 1 } } + setDataRange = (action, maxValue, minValue) => { + action({ + from: 'word-cloud', + data: { + max: maxValue, + min: minValue + } + }) + } async drawChart(drawOptions: G2PlotDrawOptions): Promise { const { chart, container, action } = drawOptions if (chart?.data) { // data - const data = chart.data.data + let data = chart.data.data const { misc } = parseJson(chart.customAttr) + let minValue = 0 + let maxValue = 0 + if ( + !misc.wordCloudAxisValueRange?.auto && + misc.wordCloudAxisValueRange?.fieldId === chart.yAxis[0].id + ) { + minValue = misc.wordCloudAxisValueRange.min + maxValue = misc.wordCloudAxisValueRange.max + } + getMaxAndMinValueByData(data ?? [], 'value', maxValue, minValue, (max, min) => { + maxValue = max + minValue = min + }) + data = filterChartDataByRange(data ?? [], maxValue, minValue) // options const initOptions: WordCloudOptions = { data: data, @@ -84,6 +112,12 @@ export class WordCloud extends G2PlotChartView { const options = this.setupOptions(chart, initOptions) const { WordCloud: G2WordCloud } = await import('@antv/g2plot/esm/plots/word-cloud') const newChart = new G2WordCloud(container, options) + newChart.on('click', () => { + this.setDataRange(action, maxValue, minValue) + }) + newChart.on('afterrender', () => { + this.setDataRange(action, maxValue, minValue) + }) newChart.on('point:click', param => { action({ x: param.x, y: param.y, data: { data: param.data.data.datum } }) }) diff --git a/core/core-frontend/src/views/chart/components/js/util.ts b/core/core-frontend/src/views/chart/components/js/util.ts index d7ea03eb75..dfb6dd9648 100644 --- a/core/core-frontend/src/views/chart/components/js/util.ts +++ b/core/core-frontend/src/views/chart/components/js/util.ts @@ -609,24 +609,26 @@ export const filterChartDataByRange = (data: any[], maxValue: number, minValue: } /** - * 获取地图默认最大最小值根据数据 + * 获取数据最大最小值 * @param data + * @param field 值字段 * @param maxValue * @param minValue * @param callback */ -export const setMapChartDefaultMaxAndMinValueByData = ( +export const getMaxAndMinValueByData = ( data: any[], + field: string, maxValue: number, minValue: number, callback: (max: number, min: number) => void ) => { if (minValue === 0 && maxValue === 0) { const maxResult = data.reduce((max, current) => { - return current.value > max ? current.value : max + return current[field] > max ? current[field] : max }, Number.MIN_SAFE_INTEGER) const minResult = data.reduce((min, current) => { - return current.value < min ? current.value : min + return current[field] < min ? current[field] : min }, Number.MAX_SAFE_INTEGER) callback(maxResult, minResult) } diff --git a/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue b/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue index 801366ed29..aada98a1be 100644 --- a/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue +++ b/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue @@ -313,6 +313,10 @@ const action = param => { emitter.emit('map-default-range', param) return } + if (param.from === 'word-cloud') { + emitter.emit('word-cloud-default-data-range', param) + return + } state.pointParam = param.data // 点击 pointClickTrans()