center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

feat(图表): 符号地图支持自定义气泡大小区间 #12432

Browse Source
This commit is contained in:
jianneng-fit2cloud 2024-10-08 17:29:31 +08:00
parent e692a0b394
commit f1a467ec3e
4 changed files with 72 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
core/core-frontend/src/models/chart/chart-attr.d.ts vendored
View File

@ -281,6 +281,14 @@ declare interface ChartBasicStyle {
* 汇总表总计标签
*/
summaryLabel: string
/**
* 符号地图符号大小最小值
*/
mapSymbolSizeMin: number
/**
* 符号地图符号大小最大值
*/
mapSymbolSizeMax: number
}
/**
* 表头属性

48
core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { onMounted, PropType, reactive, watch } from 'vue'
import { computed, onMounted, PropType, reactive, watch } from 'vue'
import {
COLOR_PANEL,
DEFAULT_BASIC_STYLE,
@ -236,6 +236,10 @@ const mapSymbolOptions = [
{ name: t('chart.line_symbol_diamond'), value: 'rhombus' }
]
const customSymbolicMapSizeRange = computed(() => {
let { extBubble } = JSON.parse(JSON.stringify(props.chart))
return ['symbolic-map'].includes(props.chart.type) && extBubble?.length > 0
})
onMounted(() => {
init()
})
@ -476,11 +480,53 @@ onMounted(() => {
:max="40"
v-model="state.basicStyleForm.mapSymbolSize"
@change="changeBasicStyle('mapSymbolSize')"
:disabled="customSymbolicMapSizeRange"
/>
</el-form-item>
</el-col>
</el-row>
</div>
<div class="alpha-setting">
<label class="alpha-label" :class="{ dark: 'dark' === themes }">
{{ t('chart.size') }}区间
</label>
<el-row style="flex: 1">
<el-col :span="12">
<el-form-item class="form-item alpha-slider" :class="'form-item-' + themes">
<el-input
type="number"
:effect="themes"
v-model="state.basicStyleForm.mapSymbolSizeMin"
:min="0"
:max="100"
class="basic-input-number"
:controls="false"
@change="changeBasicStyle('mapSymbolSizeMin')"
:disabled="!customSymbolicMapSizeRange"
>
<template #suffix> PX </template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item class="form-item alpha-slider" :class="'form-item-' + themes">
<el-input
type="number"
:effect="themes"
v-model="state.basicStyleForm.mapSymbolSizeMax"
:min="0"
:max="100"
class="basic-input-number"
:controls="false"
@change="changeBasicStyle('mapSymbolSizeMax')"
:disabled="!customSymbolicMapSizeRange"
>
<template #suffix> PX </template>
</el-input>
</el-form-item>
</el-col>
</el-row>
</div>
<div class="alpha-setting">
<label class="alpha-label" :class="{ dark: 'dark' === themes }">
{{ t('chart.not_alpha') }}

4
core/core-frontend/src/views/chart/components/editor/util/chart.ts
View File

@ -1578,7 +1578,9 @@ export const DEFAULT_BASIC_STYLE: ChartBasicStyle = {
showSummary: false,
summaryLabel: '总计',
seriesColor: [],
layout: 'horizontal'
layout: 'horizontal',
mapSymbolSizeMin: 4,
mapSymbolSizeMax: 30
}
export const BASE_VIEW_CONFIG = {

19
core/core-frontend/src/views/chart/components/js/panel/charts/map/symbolic-map.ts
View File

@ -59,7 +59,8 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
name: `${t('chart.bubble_size')} / ${t('chart.quota')}`,
type: 'q',
limit: 1,
tooltip: '该指标生效时，样式基础样式中的大小属性将失效',
tooltip:
'该指标生效时，样式基础样式中的大小属性将失效，同时可在样式基础样式中的大小区间配置大小区间',
allowEmpty: true
}
}
@ -160,8 +161,16 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
const xAxis = deepCopy(chart.xAxis)
const xAxisExt = deepCopy(chart.xAxisExt)
const extBubble = deepCopy(chart.extBubble)
const { mapSymbolOpacity, mapSymbolSize, mapSymbol, mapSymbolStrokeWidth, colors, alpha } =
deepCopy(basicStyle)
const {
mapSymbolOpacity,
mapSymbolSize,
mapSymbol,
mapSymbolStrokeWidth,
colors,
alpha,
mapSymbolSizeMin,
mapSymbolSizeMax
} = deepCopy(basicStyle)
const colorsWithAlpha = colors.map(color => hexColorToRGBA(color, alpha))
let colorIndex = 0
// 存储已分配的颜色
@ -181,7 +190,7 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
return {
...item,
color,
size: item[sizeKey] ?? mapSymbolSize,
size: parseInt(item[sizeKey]) ?? mapSymbolSize,
name: identifier
}
})
@ -214,7 +223,7 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
})
}
if (sizeKey) {
pointLayer.size('size', [4, 30])
pointLayer.size('size', [mapSymbolSizeMin, mapSymbolSizeMax])
} else {
pointLayer.size(mapSymbolSize)
}