forked from github/dataease
Merge pull request #8440 from dataease/pr@dev-v2@feat_map_legend_int_format
feat(图表): 地图图例显示为整数 #8202
This commit is contained in:
commit
1f4b6100da
@ -218,7 +218,6 @@ export class Map extends L7PlotChartView<ChoroplethOptions, Choropleth> {
|
|||||||
content.push(name)
|
content.push(name)
|
||||||
}
|
}
|
||||||
if (label.showQuota) {
|
if (label.showQuota) {
|
||||||
valueFormatter
|
|
||||||
areaMap[name] && content.push(valueFormatter(areaMap[name], label.quotaLabelFormatter))
|
areaMap[name] && content.push(valueFormatter(areaMap[name], label.quotaLabelFormatter))
|
||||||
}
|
}
|
||||||
item.properties['_DE_LABEL_'] = content.join('\n\n')
|
item.properties['_DE_LABEL_'] = content.join('\n\n')
|
||||||
@ -229,7 +228,7 @@ export class Map extends L7PlotChartView<ChoroplethOptions, Choropleth> {
|
|||||||
colors = colors.slice(0, validArea)
|
colors = colors.slice(0, validArea)
|
||||||
}
|
}
|
||||||
if (colors.length) {
|
if (colors.length) {
|
||||||
options.color.value = colors
|
options.color['value'] = colors
|
||||||
}
|
}
|
||||||
return options
|
return options
|
||||||
}
|
}
|
||||||
@ -244,7 +243,8 @@ export class Map extends L7PlotChartView<ChoroplethOptions, Choropleth> {
|
|||||||
this.configLabel,
|
this.configLabel,
|
||||||
this.configStyle,
|
this.configStyle,
|
||||||
this.configTooltip,
|
this.configTooltip,
|
||||||
this.configBasicStyle
|
this.configBasicStyle,
|
||||||
|
this.configLegend
|
||||||
)(chart, options, extra)
|
)(chart, options, extra)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -12,6 +12,15 @@ import { Tooltip } from '@antv/g2plot/esm'
|
|||||||
import { add } from 'mathjs'
|
import { add } from 'mathjs'
|
||||||
import isEmpty from 'lodash-es/isEmpty'
|
import isEmpty from 'lodash-es/isEmpty'
|
||||||
import _ from 'lodash'
|
import _ from 'lodash'
|
||||||
|
import type { LegendOptions } from '@antv/l7plot/dist/esm/types/legend'
|
||||||
|
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'
|
||||||
|
|
||||||
export function getPadding(chart: Chart): number[] {
|
export function getPadding(chart: Chart): number[] {
|
||||||
if (chart.drill) {
|
if (chart.drill) {
|
||||||
@ -772,3 +781,36 @@ export function getTooltipSeriesTotalMap(data: any[]): Record<string, number> {
|
|||||||
})
|
})
|
||||||
return result
|
return result
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function configL7Legend(): LegendOptions {
|
||||||
|
return {
|
||||||
|
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)
|
||||||
|
listDom.appendChild(itemDom)
|
||||||
|
})
|
||||||
|
return listDom
|
||||||
|
}
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -4,6 +4,7 @@ import { PlotOptions } from '@antv/l7plot/dist/esm/types/plot'
|
|||||||
import { Plot as L7Plot } from '@antv/l7plot/dist/esm/core/plot'
|
import { Plot as L7Plot } from '@antv/l7plot/dist/esm/core/plot'
|
||||||
import {
|
import {
|
||||||
configL7Label,
|
configL7Label,
|
||||||
|
configL7Legend,
|
||||||
configL7Style,
|
configL7Style,
|
||||||
configL7Tooltip
|
configL7Tooltip
|
||||||
} from '@/views/chart/components/js/panel/common/common_antv'
|
} from '@/views/chart/components/js/panel/common/common_antv'
|
||||||
@ -13,6 +14,7 @@ import {
|
|||||||
ChartLibraryType
|
ChartLibraryType
|
||||||
} from '@/views/chart/components/js/panel/types'
|
} from '@/views/chart/components/js/panel/types'
|
||||||
import { defaultsDeep } from 'lodash-es'
|
import { defaultsDeep } from 'lodash-es'
|
||||||
|
import { ChoroplethOptions } from '@antv/l7plot/dist/esm/plots/choropleth'
|
||||||
|
|
||||||
export interface L7PlotDrawOptions<P> extends AntVDrawOptions<P> {
|
export interface L7PlotDrawOptions<P> extends AntVDrawOptions<P> {
|
||||||
areaId?: string
|
areaId?: string
|
||||||
@ -43,7 +45,11 @@ export abstract class L7PlotChartView<
|
|||||||
defaultsDeep(options.tooltip, tooltip)
|
defaultsDeep(options.tooltip, tooltip)
|
||||||
return options
|
return options
|
||||||
}
|
}
|
||||||
|
protected configLegend(_: Chart, options: ChoroplethOptions) {
|
||||||
|
const legend = configL7Legend()
|
||||||
|
defaultsDeep(options.legend, legend)
|
||||||
|
return options
|
||||||
|
}
|
||||||
protected constructor(name: string, defaultData?: any[]) {
|
protected constructor(name: string, defaultData?: any[]) {
|
||||||
super(ChartLibraryType.L7_PLOT, name)
|
super(ChartLibraryType.L7_PLOT, name)
|
||||||
this.defaultData = defaultData
|
this.defaultData = defaultData
|
||||||
|
Loading…
Reference in New Issue
Block a user