From a68561ea4e7db65bcb9a4051c72d136db882c05f Mon Sep 17 00:00:00 2001 From: jianneng-fit2cloud Date: Thu, 27 Jun 2024 19:22:01 +0800 Subject: [PATCH] =?UTF-8?q?fix(=E5=9B=BE=E8=A1=A8-=E5=9C=B0=E5=9B=BE):=20?= =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E8=87=AA=E5=AE=9A=E4=B9=89=E5=9B=BE=E4=BE=8B?= =?UTF-8?q?=E5=90=8E=EF=BC=8C=E5=8C=BA=E9=97=B4=E6=9C=AA=E8=83=BD=E6=8C=89?= =?UTF-8?q?=E7=85=A7=E8=87=AA=E5=AE=9A=E4=B9=89=E7=9A=84=E6=9C=80=E5=A4=A7?= =?UTF-8?q?=E6=9C=80=E5=B0=8F=E5=80=BC=E5=9B=BE=E4=BE=8B=E6=95=B0=E8=AE=BE?= =?UTF-8?q?=E7=BD=AE=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/LegendSelector.vue | 8 ++ .../components/js/panel/charts/map/map.ts | 100 ++++++++++++++++-- 2 files changed, 97 insertions(+), 11 deletions(-) diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/LegendSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/LegendSelector.vue index 527ec7269e..349761ab66 100644 --- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/LegendSelector.vue +++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/LegendSelector.vue @@ -88,6 +88,12 @@ const init = () => { if (customStyle.legend) { state.legendForm = customStyle.legend state.legendForm.miscForm = miscStyle + if (chartType.value === 'map') { + // 解决存量地图，没有设置mapAutoLegend的情况，设置默认值 + if (!state.legendForm.miscForm.hasOwnProperty('mapAutoLegend')) { + state.legendForm.miscForm.mapAutoLegend = true + } + } } } } @@ -238,8 +244,10 @@ onMounted(() => { :effect="themes" v-model="state.legendForm.miscForm.mapLegendNumber" size="small" + :precision="0" :min="1" :max="9" + :step="1" controls-position="right" @change="changeMisc('mapLegendNumber')" /> 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 5452e06c47..48b99a0bbb 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 @@ -18,7 +18,7 @@ import { mapRendering } from '@/views/chart/components/js/panel/common/common_antv' import { FeatureCollection } from '@antv/l7plot/dist/esm/plots/choropleth/types' -import { cloneDeep } from 'lodash-es' +import { cloneDeep, defaultsDeep } from 'lodash-es' import { useI18n } from '@/hooks/web/useI18n' import { valueFormatter } from '../../../formatter' import { @@ -27,6 +27,14 @@ import { MAP_EDITOR_PROPERTY_INNER, MapMouseEvent } from '@/views/chart/components/js/panel/charts/map/common' +import { CategoryLegendListItem } from '@antv/l7plot-component/dist/lib/types/legend' +import createDom from '@antv/dom-util/esm/create-dom' +import { + CONTAINER_TPL, + ITEM_TPL, + LIST_CLASS +} from '@antv/l7plot-component/dist/esm/legend/category/constants' +import substitute from '@antv/util/esm/substitute' const { t } = useI18n() @@ -185,9 +193,9 @@ export class Map extends L7PlotChartView { let data = [] data = sourceData let colorScale = [] + let minValue = misc.mapLegendMin + let maxValue = misc.mapLegendMax if (legend.show) { - let minValue = misc.mapLegendMin - let maxValue = misc.mapLegendMax let mapLegendNumber = misc.mapLegendNumber setMapChartDefaultMaxAndMinValueByData(sourceData, maxValue, minValue, (max, min) => { maxValue = max @@ -209,12 +217,8 @@ export class Map extends L7PlotChartView { obj[value['field']] = value.value return obj }, {}) - let validArea = 0 geoJson.features.forEach(item => { const name = item.properties['name'] - if (areaMap[name]) { - validArea += 1 - } // trick, maybe move to configLabel, here for perf if (label.show) { const content = [] @@ -227,15 +231,89 @@ export class Map extends L7PlotChartView { item.properties['_DE_LABEL_'] = content.join('\n\n') } }) - if (validArea < colorScale.length && !misc.mapAutoLegend) { - colorScale = colorScale.map(item => (item.color ? item.color : item)).slice(0, validArea) - } if (colorScale.length) { options.color['value'] = colorScale.map(item => (item.color ? item.color : item)) + if (colorScale[0].value && !misc.mapAutoLegend) { + options.color['scale']['domain'] = [minValue, maxValue] + } } return options } + private customConfigLegend( + chart: Chart, + options: ChoroplethOptions, + _context: Record + ): ChoroplethOptions { + const { basicStyle } = parseJson(chart.customAttr) + if (basicStyle.suspension === false && basicStyle.showZoom === undefined) { + return options + } + const { legend } = parseJson(chart.customStyle) + if (!legend.show) { + return options + } + const LEGEND_SHAPE_STYLE_MAP = { + circle: { + borderRadius: '50%' + }, + square: {}, + triangle: { + borderLeft: '5px solid transparent', + borderRight: '5px solid transparent', + borderBottom: '10px solid var(--bgColor)', + background: 'unset' + }, + diamond: { + transform: 'rotate(45deg)' + } + } + const customLegend = { + position: 'bottomleft', + customContent: (_: string, items: CategoryLegendListItem[]) => { + const showItems = items?.length > 30 ? items.slice(0, 30) : items + if (showItems?.length) { + const containerDom = createDom(CONTAINER_TPL) as HTMLElement + const listDom = containerDom.getElementsByClassName(LIST_CLASS)[0] as HTMLElement + showItems.forEach(item => { + let value = '-' + if (item.value !== '') { + if (Array.isArray(item.value)) { + item.value.forEach((v, i) => { + item.value[i] = Number.isNaN(v) || v === 'NaN' ? 'NaN' : parseFloat(v).toFixed(0) + }) + value = item.value.join('-') + } else { + const tmp = item.value as string + value = Number.isNaN(tmp) || tmp === 'NaN' ? 'NaN' : parseFloat(tmp).toFixed(0) + } + } + const substituteObj = { ...item, value } + + const domStr = substitute(ITEM_TPL, substituteObj) + const itemDom = createDom(domStr) + // 给 legend 形状用的 + itemDom.style.setProperty('--bgColor', item.color) + listDom.appendChild(itemDom) + }) + return listDom + } + return '' + }, + domStyles: { + 'l7plot-legend__category-value': { + fontSize: legend.fontSize + 'px', + color: legend.color + }, + 'l7plot-legend__category-marker': { + ...LEGEND_SHAPE_STYLE_MAP[legend.icon] + } + } + } + defaultsDeep(options, { legend: customLegend }) + return options + } + protected setupOptions( chart: Chart, options: ChoroplethOptions, @@ -247,7 +325,7 @@ export class Map extends L7PlotChartView { this.configStyle, this.configTooltip, this.configBasicStyle, - this.configLegend + this.customConfigLegend )(chart, options, context) } }