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 { from: 'map', data: { max: maxValue, - min: minValue, + min: minValue ?? filterEmptyMinValue(sourceData, 'value'), legendNumber: legendNumber } }) @@ -252,7 +253,10 @@ export class Map extends L7PlotChartView { 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 { 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 { 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 +}