diff --git a/core/core-frontend/src/models/chart/chart-style.d.ts b/core/core-frontend/src/models/chart/chart-style.d.ts index 46bdef3ab5..44aca1b55f 100644 --- a/core/core-frontend/src/models/chart/chart-style.d.ts +++ b/core/core-frontend/src/models/chart/chart-style.d.ts @@ -272,6 +272,10 @@ declare interface ChartMiscStyle { axisLabel: SplitAxisLabel splitLine: SplitAxisLine splitArea: SplitSplitArea + /** + * 轴值设置 + */ + axisValue: AxisValue } declare interface SplitLineStyle { color: string diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/MiscStyleSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/MiscStyleSelector.vue index ac1fa34151..7bc14cd5c1 100644 --- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/MiscStyleSelector.vue +++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/MiscStyleSelector.vue @@ -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')" /> + @@ -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; + } +} diff --git a/core/core-frontend/src/views/chart/components/editor/util/chart.ts b/core/core-frontend/src/views/chart/components/editor/util/chart.ts index 650bb1058e..f1fe0469d2 100644 --- a/core/core-frontend/src/views/chart/components/editor/util/chart.ts +++ b/core/core-frontend/src/views/chart/components/editor/util/chart.ts @@ -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 = { diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/others/radar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/others/radar.ts index 097c97d8e4..3e2571bc42 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/radar.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/radar.ts @@ -27,7 +27,7 @@ export class Radar extends G2PlotChartView { '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 { } } } + 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,