feat(图表): 在线地图支持控制标签显隐

This commit is contained in:
wisonic 2024-10-17 19:32:04 +08:00
parent 39a38f68c7
commit c4c8d5fffe
7 changed files with 36 additions and 11 deletions

View File

@ -1541,7 +1541,8 @@ export default {
map_symbol_octagon: '八角形', map_symbol_octagon: '八角形',
map_symbol_hexagram: '菱形', map_symbol_hexagram: '菱形',
tip: '提示', tip: '提示',
hide: '隐藏' hide: '隐藏',
show_label: '显示标签'
}, },
dataset: { dataset: {
scope_edit: '仅编辑时生效', scope_edit: '仅编辑时生效',

View File

@ -289,6 +289,10 @@ declare interface ChartBasicStyle {
* 符号地图符号大小最大值 * 符号地图符号大小最大值
*/ */
mapSymbolSizeMax: number mapSymbolSizeMax: number
/**
* 显示标签
*/
showLabel: boolean
} }
/** /**
* 表头属性 * 表头属性

View File

@ -603,12 +603,21 @@ onMounted(() => {
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-form-item class="form-item" :class="'form-item-' + themes" v-if="showProperty('showLabel')">
<el-checkbox
size="small"
:effect="themes"
v-model="state.basicStyleForm.showLabel"
@change="changeBasicStyle('showLabel')"
>
{{ t('chart.show_label') }}
</el-checkbox>
</el-form-item>
<el-form-item class="form-item" :class="'form-item-' + themes" v-if="showProperty('zoom')"> <el-form-item class="form-item" :class="'form-item-' + themes" v-if="showProperty('zoom')">
<el-checkbox <el-checkbox
size="small" size="small"
:effect="themes" :effect="themes"
v-model="state.basicStyleForm.showZoom" v-model="state.basicStyleForm.showZoom"
:predefine="predefineColors"
@change="changeBasicStyle('showZoom')" @change="changeBasicStyle('showZoom')"
> >
{{ t('chart.show_zoom') }} {{ t('chart.show_zoom') }}

View File

@ -1585,7 +1585,8 @@ export const DEFAULT_BASIC_STYLE: ChartBasicStyle = {
seriesColor: [], seriesColor: [],
layout: 'horizontal', layout: 'horizontal',
mapSymbolSizeMin: 4, mapSymbolSizeMin: 4,
mapSymbolSizeMax: 30 mapSymbolSizeMax: 30,
showLabel: true
} }
export const BASE_VIEW_CONFIG = { export const BASE_VIEW_CONFIG = {

View File

@ -30,7 +30,7 @@ export class FlowMap extends L7ChartView<Scene, L7Config> {
] ]
propertyInner: EditorPropertyInner = { propertyInner: EditorPropertyInner = {
...MAP_EDITOR_PROPERTY_INNER, ...MAP_EDITOR_PROPERTY_INNER,
'basic-style-selector': ['mapBaseStyle', 'mapLineStyle', 'zoom'] 'basic-style-selector': ['mapBaseStyle', 'mapLineStyle', 'zoom', 'showLabel']
} }
axis: AxisType[] = ['xAxis', 'xAxisExt', 'filter', 'flowMapStartName', 'flowMapEndName', 'yAxis'] axis: AxisType[] = ['xAxis', 'xAxisExt', 'filter', 'flowMapStartName', 'flowMapEndName', 'yAxis']
axisConfig: AxisConfig = { axisConfig: AxisConfig = {
@ -84,7 +84,8 @@ export class FlowMap extends L7ChartView<Scene, L7Config> {
token: key ?? undefined, token: key ?? undefined,
style: mapStyle, style: mapStyle,
pitch: misc.mapPitch, pitch: misc.mapPitch,
zoom: 2.5 zoom: 2.5,
showLabel: !(basicStyle.showLabel === false)
}) })
}) })
mapRendering(container) mapRendering(container)

View File

@ -27,7 +27,7 @@ export class HeatMap extends L7ChartView<Scene, L7Config> {
] ]
propertyInner: EditorPropertyInner = { propertyInner: EditorPropertyInner = {
...MAP_EDITOR_PROPERTY_INNER, ...MAP_EDITOR_PROPERTY_INNER,
'basic-style-selector': ['colors', 'heatMapStyle', 'zoom'] 'basic-style-selector': ['colors', 'heatMapStyle', 'zoom', 'showLabel']
} }
axis: AxisType[] = ['xAxis', 'yAxis', 'filter'] axis: AxisType[] = ['xAxis', 'yAxis', 'filter']
axisConfig: AxisConfig = { axisConfig: AxisConfig = {
@ -50,8 +50,8 @@ export class HeatMap extends L7ChartView<Scene, L7Config> {
const { chart, container } = drawOption const { chart, container } = drawOption
const xAxis = deepCopy(chart.xAxis) const xAxis = deepCopy(chart.xAxis)
const yAxis = deepCopy(chart.yAxis) const yAxis = deepCopy(chart.yAxis)
let basicStyle let basicStyle: DeepPartial<ChartBasicStyle>
let miscStyle let miscStyle: DeepPartial<ChartMiscAttr>
if (chart.customAttr) { if (chart.customAttr) {
basicStyle = parseJson(chart.customAttr).basicStyle basicStyle = parseJson(chart.customAttr).basicStyle
miscStyle = parseJson(chart.customAttr).misc miscStyle = parseJson(chart.customAttr).misc
@ -66,7 +66,8 @@ export class HeatMap extends L7ChartView<Scene, L7Config> {
token: key ?? undefined, token: key ?? undefined,
style: mapStyle, style: mapStyle,
pitch: miscStyle.mapPitch, pitch: miscStyle.mapPitch,
zoom: 2.5 zoom: 2.5,
showLabel: !(basicStyle.showLabel === false)
}) })
}) })
mapRendering(container) mapRendering(container)

View File

@ -30,7 +30,14 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
] ]
propertyInner: EditorPropertyInner = { propertyInner: EditorPropertyInner = {
...MAP_EDITOR_PROPERTY_INNER, ...MAP_EDITOR_PROPERTY_INNER,
'basic-style-selector': ['colors', 'alpha', 'mapBaseStyle', 'symbolicMapStyle', 'zoom'], 'basic-style-selector': [
'colors',
'alpha',
'mapBaseStyle',
'symbolicMapStyle',
'zoom',
'showLabel'
],
'label-selector': ['color', 'fontSize', 'showFields', 'customContent'], 'label-selector': ['color', 'fontSize', 'showFields', 'customContent'],
'tooltip-selector': [ 'tooltip-selector': [
'color', 'color',
@ -89,7 +96,8 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
style: mapStyle, style: mapStyle,
pitch: miscStyle.mapPitch, pitch: miscStyle.mapPitch,
center: [104.434765, 38.256735], center: [104.434765, 38.256735],
zoom: 1.8 zoom: 2.5,
showLabel: !(basicStyle.showLabel === false)
}) })
}) })
mapRendering(container) mapRendering(container)