From 7943ad5ebb83abcf04ff431c49044dd9a4fccb18 Mon Sep 17 00:00:00 2001
From: jianneng-fit2cloud <jianneng.pan@fit2cloud.com>
Date: Wed, 6 Nov 2024 15:10:58 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E5=9B=BE=E8=A1=A8):=20=E4=BF=AE=E5=A4=8D?=
=?UTF-8?q?=E5=9C=B0=E5=9B=BE=E7=AD=89=E5=88=86=E5=8C=BA=E9=97=B4=E5=92=8C?=
=?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E5=8C=BA=E9=97=B4=E6=98=BE=E7=A4=BA?=
=?UTF-8?q?=E7=9A=84=E5=9B=BE=E8=A1=A8=E6=A0=B7=E5=BC=8F=E4=B8=8D=E4=B8=80?=
=?UTF-8?q?=E8=87=B4=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/CustomColorStyleSelect.vue | 10 +-
.../components/LegendSelector.vue | 9 +-
.../components/js/panel/charts/map/map.ts | 91 ++++++++-----------
.../src/views/chart/components/js/util.ts | 20 ++++
4 files changed, 70 insertions(+), 60 deletions(-)
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue
index 7ba0d03970..a5aa96451e 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue
@@ -234,9 +234,13 @@ const changeColorOption = (option?) => {
}
}
const resetCustomColor = () => {
- state.value.basicStyleForm[seriesColorName.value] = []
- changeBasicStyle(seriesColorName.value)
- setupSeriesColor()
+ if (props.chart.type.includes('map')) {
+ changeColorOption()
+ } else {
+ state.value.basicStyleForm[seriesColorName.value] = []
+ changeBasicStyle(seriesColorName.value)
+ setupSeriesColor()
+ }
}
const switchColorCase = () => {
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 143a27cee2..fc8f8845ab 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
@@ -155,11 +155,12 @@ const initMapCustomRange = () => {
}
/**
* 计算自定义区间
+ * 最大最小值取等分区间的最大最小值
*/
const calcMapCustomRange = () => {
const customRange = getDynamicColorScale(
- mapLegendDefaultRange.min,
- mapLegendDefaultRange.max,
+ state.legendForm.miscForm.mapLegendMin,
+ state.legendForm.miscForm.mapLegendMax,
state.legendForm.miscForm.mapLegendNumber
)
state.legendForm.miscForm.mapLegendCustomRange = []
@@ -178,9 +179,7 @@ const calcMapCustomRange = () => {
const changeLegendCustomType = (prop?) => {
const type = state.legendForm.miscForm.mapLegendRangeType
if (type === 'custom') {
- state.legendForm.miscForm.mapLegendCustomRange = cloneDeep(
- mapLegendCustomRangeCacheList.slice(0, state.legendForm.miscForm.mapLegendNumber + 1)
- )
+ calcMapCustomRange()
} else {
state.legendForm.miscForm.mapLegendCustomRange = []
}
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 90f75a93fc..85626605e1 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
@@ -10,7 +10,8 @@ import {
getGeoJsonFile,
hexColorToRGBA,
parseJson,
- getMaxAndMinValueByData
+ getMaxAndMinValueByData,
+ filterEmptyMinValue
} from '@/views/chart/components/js/util'
import {
handleGeoJson,
@@ -102,7 +103,7 @@ export class Map extends L7PlotChartView<ChoroplethOptions, Choropleth> {
from: 'map',
data: {
max: maxValue,
- min: minValue,
+ min: minValue ?? filterEmptyMinValue(sourceData, 'value'),
legendNumber: legendNumber
}
})
@@ -252,7 +253,10 @@ export class Map extends L7PlotChartView<ChoroplethOptions, Choropleth> {
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]
+ options.color['scale']['domain'] = [
+ minValue ?? filterEmptyMinValue(sourceData, 'value'),
+ maxValue
+ ]
}
}
return options
@@ -272,6 +276,33 @@ export class Map extends L7PlotChartView<ChoroplethOptions, Choropleth> {
if (!legend.show) {
return options
}
+ // 内部函数 创建自定义图例的内容
+ const createLegendCustomContent = showItems => {
+ 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
+ }
const LEGEND_SHAPE_STYLE_MAP = {
circle: {
borderRadius: '50%'
@@ -324,61 +355,17 @@ export class Map extends L7PlotChartView<ChoroplethOptions, Choropleth> {
color: rangeColor
})
})
- customLegend['items'] = items
- const findColorByValue = (value, intervals) => {
- if (value) {
- for (const interval of intervals) {
- if (value >= interval.value[0] && value <= interval.value[1]) {
- return interval.color
- }
- }
- }
- // 或者可以返回 undefined
- return null
- }
- options.color.value = t => {
- const c = findColorByValue(t.value, items)
- return c ? c : null
- }
- customLegend['domStyles'] = {
- ...customLegend['domStyles'],
- 'l7plot-legend l7plot-legend__category': {
- 'box-shadow': '0px 0px 0px 0px',
- 'background-color': 'var(--bgColor)',
- padding: 0
- },
- 'l7plot-legend__list-item': {
- 'margin-bottom': '3px'
+ customLegend['customContent'] = (_: string, _items: CategoryLegendListItem[]) => {
+ if (items?.length) {
+ return createLegendCustomContent(items)
}
+ return ''
}
} else {
customLegend['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 createLegendCustomContent(showItems)
}
return ''
}
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 897ec36972..6638e5552b 100644
--- a/core/core-frontend/src/views/chart/components/js/util.ts
+++ b/core/core-frontend/src/views/chart/components/js/util.ts
@@ -1048,3 +1048,23 @@ export function svgStrToUrl(svgStr: string): string {
} catch (e) {}
return file
}
+
+/**
+ * 获取非空数据的最小值
+ * @param sourceData
+ * @param field
+ * @private
+ */
+export function filterEmptyMinValue(sourceData, field) {
+ let notEmptyMinValue = 0
+ getMaxAndMinValueByData(
+ sourceData.filter(item => item[field]),
+ 'value',
+ 0,
+ 0,
+ (max, min) => {
+ notEmptyMinValue = min
+ }
+ )
+ return notEmptyMinValue
+}