forked from github/dataease
Merge pull request #12947 from dataease/pr@dev-v2@chart-radar-feat
feat(图表): 雷达图坐标轴轴值支持自定义 #12637
This commit is contained in:
jianneng-fit2cloud
GitHub
commit
accbe57fbc
@ -272,6 +272,10 @@ declare interface ChartMiscStyle {
|
||||
axisLabel: SplitAxisLabel
|
||||
splitLine: SplitAxisLine
|
||||
splitArea: SplitSplitArea
|
||||
/**
|
||||
* 轴值设置
|
||||
*/
|
||||
axisValue: AxisValue
|
||||
}
|
||||
declare interface SplitLineStyle {
|
||||
color: string
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
import { computed, onMounted, reactive, watch } from 'vue'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { COLOR_PANEL, DEFAULT_MISC_STYLE } from '@/views/chart/components/editor/util/chart'
|
||||
import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
@ -14,6 +15,10 @@ const props = withDefaults(
|
||||
{ themes: 'dark' }
|
||||
)
|
||||
|
||||
const toolTip = computed(() => {
|
||||
return props.themes === 'dark' ? 'ndark' : 'dark'
|
||||
})
|
||||
|
||||
const predefineColors = COLOR_PANEL
|
||||
|
||||
const state = reactive({
|
||||
@ -57,6 +62,9 @@ const init = () => {
|
||||
}
|
||||
if (customStyle.xAxis) {
|
||||
state.miscForm = customStyle.misc
|
||||
if (!state.miscForm.axisValue) {
|
||||
state.miscForm.axisValue = JSON.parse(JSON.stringify(DEFAULT_MISC_STYLE)).axisValue
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -138,6 +146,89 @@ onMounted(() => {
|
||||
@change="changeMiscStyle('axisColor')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<template v-if="showProperty('axisValue')">
|
||||
<div
|
||||
style="display: flex; flex-direction: row; justify-content: space-between; padding: 8px 0"
|
||||
>
|
||||
<label class="custom-form-item-label" :class="'custom-form-item-label--' + themes">
|
||||
{{ t('chart.axis_value') }}
|
||||
<el-tooltip class="item" :effect="toolTip" placement="top">
|
||||
<template #content><span v-html="t('chart.axis_tip')"></span></template>
|
||||
<span style="vertical-align: middle">
|
||||
<el-icon style="cursor: pointer">
|
||||
<Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
|
||||
</el-icon>
|
||||
</span>
|
||||
</el-tooltip>
|
||||
</label>
|
||||
|
||||
<el-form-item class="form-item" :class="'form-item-' + themes">
|
||||
<el-checkbox
|
||||
size="small"
|
||||
:effect="props.themes"
|
||||
v-model="state.miscForm.axisValue.auto"
|
||||
@change="changeMiscStyle('axisValue.auto')"
|
||||
>
|
||||
{{ t('chart.axis_auto') }}
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<template v-if="showProperty('axisValue') && !state.miscForm.axisValue.auto">
|
||||
<el-row :gutter="8">
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
class="form-item"
|
||||
:class="'form-item-' + themes"
|
||||
:label="t('chart.axis_value_max')"
|
||||
>
|
||||
<el-input-number
|
||||
controls-position="right"
|
||||
:effect="props.themes"
|
||||
v-model.number="state.miscForm.axisValue.max"
|
||||
@change="changeMiscStyle('axisValue.max')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
class="form-item"
|
||||
:class="'form-item-' + themes"
|
||||
:label="t('chart.axis_value_min')"
|
||||
>
|
||||
<el-input-number
|
||||
:effect="props.themes"
|
||||
controls-position="right"
|
||||
v-model.number="state.miscForm.axisValue.min"
|
||||
@change="changeMiscStyle('axisValue.min')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<label class="custom-form-item-label" :class="'custom-form-item-label--' + themes">
|
||||
{{ t('chart.axis_value_split_count') }}
|
||||
<el-tooltip class="item" :effect="toolTip" placement="top">
|
||||
<template #content>期望的坐标轴刻度数量，非最终结果。</template>
|
||||
<span style="vertical-align: middle">
|
||||
<el-icon style="cursor: pointer">
|
||||
<Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
|
||||
</el-icon>
|
||||
</span>
|
||||
</el-tooltip>
|
||||
</label>
|
||||
|
||||
<el-form-item class="form-item" :class="'form-item-' + themes">
|
||||
<el-input-number
|
||||
style="width: 100%"
|
||||
:effect="props.themes"
|
||||
controls-position="right"
|
||||
v-model.number="state.miscForm.axisValue.splitCount"
|
||||
@change="changeMiscStyle('axisValue.splitCount')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</template>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
@ -145,4 +236,17 @@ onMounted(() => {
|
||||
.form-item-checkbox {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.custom-form-item-label {
|
||||
margin-bottom: 4px;
|
||||
line-height: 20px;
|
||||
color: #646a73;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
padding: 2px 12px 0 0;
|
||||
|
||||
&.custom-form-item-label--dark {
|
||||
color: #a6a6a6;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -731,6 +731,13 @@ export const DEFAULT_MISC_STYLE: ChartMiscStyle = {
|
||||
},
|
||||
splitArea: {
|
||||
show: true
|
||||
},
|
||||
axisValue: {
|
||||
auto: true,
|
||||
min: 10,
|
||||
max: 100,
|
||||
split: 10,
|
||||
splitCount: 10
|
||||
}
|
||||
}
|
||||
export const DEFAULT_FUNCTION_CFG: ChartFunctionCfg = {
|
||||
|
||||
@ -27,7 +27,7 @@ export class Radar extends G2PlotChartView<RadarOptions, G2Radar> {
|
||||
'basic-style-selector': ['colors', 'alpha', 'radarShape', 'seriesColor'],
|
||||
'label-selector': ['seriesLabelFormatter'],
|
||||
'tooltip-selector': ['color', 'fontSize', 'backgroundColor', 'seriesTooltipFormatter', 'show'],
|
||||
'misc-style-selector': ['showName', 'color', 'fontSize', 'axisColor'],
|
||||
'misc-style-selector': ['showName', 'color', 'fontSize', 'axisColor', 'axisValue'],
|
||||
'title-selector': [
|
||||
'show',
|
||||
'title',
|
||||
@ -213,6 +213,22 @@ export class Radar extends G2PlotChartView<RadarOptions, G2Radar> {
|
||||
}
|
||||
}
|
||||
}
|
||||
const axisValue = misc.axisValue
|
||||
if (!axisValue?.auto) {
|
||||
const axisYAxis = {
|
||||
...yAxis,
|
||||
min: axisValue.min,
|
||||
max: axisValue.max,
|
||||
minLimit: axisValue.min,
|
||||
maxLimit: axisValue.max,
|
||||
tickCount: axisValue.splitCount
|
||||
}
|
||||
return {
|
||||
...options,
|
||||
xAxis,
|
||||
yAxis: axisYAxis
|
||||
}
|
||||
}
|
||||
return {
|
||||
...options,
|
||||
xAxis,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user