diff --git a/core/core-frontend/src/models/chart/editor.d.ts b/core/core-frontend/src/models/chart/editor.d.ts index b2e21a1170..4f1ea392d8 100644 --- a/core/core-frontend/src/models/chart/editor.d.ts +++ b/core/core-frontend/src/models/chart/editor.d.ts @@ -88,6 +88,10 @@ declare type AxisSpec = { * 轴提示 */ tooltip?: string + /** + * 允许为空 + */ + allowEmpty?: boolean } /** * 图表编辑表单 diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/TooltipSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/TooltipSelector.vue index a70f4be409..174f6fec9c 100644 --- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/TooltipSelector.vue +++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/TooltipSelector.vue @@ -250,7 +250,7 @@ const init = () => { const showProperty = prop => { const instance = chartViewManager.getChartView(props.chart.render, props.chart.type) if (instance) { - return instance.propertyInner['tooltip-selector'].includes(prop) + return instance.propertyInner['tooltip-selector']?.includes(prop) } return props.propertyInner?.includes(prop) } diff --git a/core/core-frontend/src/views/chart/components/editor/index.vue b/core/core-frontend/src/views/chart/components/editor/index.vue index 05236592d4..b4a6cd0a84 100644 --- a/core/core-frontend/src/views/chart/components/editor/index.vue +++ b/core/core-frontend/src/views/chart/components/editor/index.vue @@ -836,6 +836,7 @@ const calcData = (view, resetDrill = false, updateQuery = '') => { const updateChartData = view => { curComponent.value['state'] = 'ready' + useEmitt().emitter.emit('checkFieldIsAllowEmpty', allFields.value) calcData(view, true, 'updateQuery') } diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/horizontal-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/horizontal-bar.ts index caad5f4406..d2ea51b2c6 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/horizontal-bar.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/horizontal-bar.ts @@ -31,6 +31,10 @@ const DEFAULT_DATA = [] export class HorizontalBar extends G2PlotChartView { axisConfig = { ...this['axisConfig'], + xAxis: { + name: `${t('chart.drag_block_type_axis')} / ${t('chart.dimension')}`, + type: 'd' + }, yAxis: { name: `${t('chart.drag_block_value_axis')} / ${t('chart.quota')}`, type: 'q' @@ -301,6 +305,14 @@ export class HorizontalBar extends G2PlotChartView { * 堆叠条形图 */ export class HorizontalStackBar extends HorizontalBar { + axisConfig = { + ...this['axisConfig'], + extStack: { + name: `${t('chart.stack_item')} / ${t('chart.dimension')}`, + type: 'd', + limit: 1 + } + } propertyInner = { ...this['propertyInner'], 'label-selector': ['color', 'fontSize', 'hPosition', 'labelFormatter'], diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/progress-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/progress-bar.ts index da6bb8f13d..41b6079b35 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/progress-bar.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/progress-bar.ts @@ -15,7 +15,6 @@ const { t } = useI18n() export class ProgressBar extends G2PlotChartView { axisConfig = { - ...this['axisConfig'], xAxis: { name: `${t('chart.form_type')} / ${t('chart.dimension')}`, type: 'd', diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/range-bar.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/range-bar.ts index 68a0badfea..9abe42d2bc 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/range-bar.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/range-bar.ts @@ -23,7 +23,6 @@ const DEFAULT_DATA = [] */ export class RangeBar extends G2PlotChartView { axisConfig = { - ...this['axisConfig'], yAxis: { name: `${t('chart.drag_block_value_start')} / ${t('chart.time_dimension_or_quota')}`, limit: 1, diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/waterfall.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/waterfall.ts index f8d694b5c1..d1dfaef39a 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/bar/waterfall.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/bar/waterfall.ts @@ -4,6 +4,8 @@ import { flow, hexColorToRGBA, parseJson } from '../../../util' import { valueFormatter } from '../../../formatter' import { getPadding, getTooltipSeriesTotalMap, setGradientColor } from '../../common/common_antv' import { isEmpty } from 'lodash-es' +import { useI18n } from '@/hooks/web/useI18n' +const { t } = useI18n() /** * 瀑布图 @@ -62,6 +64,17 @@ export class Waterfall extends G2PlotChartView { ] } axis: AxisType[] = ['xAxis', 'yAxis', 'filter', 'drill', 'extLabel', 'extTooltip'] + axisConfig = { + xAxis: { + name: `${t('chart.drag_block_type_axis')} / ${t('chart.dimension')}`, + type: 'd' + }, + yAxis: { + name: `${t('chart.drag_block_value_axis')} / ${t('chart.quota')}`, + type: 'q', + limit: 1 + } + } async drawChart(drawOptions: G2PlotDrawOptions): Promise { const { chart, container, action } = drawOptions if (!chart.data?.data) { diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/line/area.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/line/area.ts index ad002acae1..d3d9c4689e 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/line/area.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/line/area.ts @@ -44,6 +44,10 @@ export class Area extends G2PlotChartView { axis: AxisType[] = [...LINE_AXIS_TYPE] axisConfig = { ...this['axisConfig'], + xAxis: { + name: `${t('chart.drag_block_type_axis')} / ${t('chart.dimension')}`, + type: 'd' + }, yAxis: { name: `${t('chart.drag_block_value_axis')} / ${t('chart.quota')}`, type: 'q' @@ -289,6 +293,14 @@ export class StackArea extends Area { 'label-selector': ['fontSize', 'color', 'labelFormatter'], 'tooltip-selector': ['fontSize', 'color', 'tooltipFormatter', 'show'] } + axisConfig = { + ...this['axisConfig'], + extStack: { + name: `${t('chart.stack_item')} / ${t('chart.dimension')}`, + type: 'd', + limit: 1 + } + } protected configLabel(chart: Chart, options: AreaOptions): AreaOptions { const customAttr = parseJson(chart.customAttr) const labelAttr = customAttr.label diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/line/line.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/line/line.ts index 69a2e2b63e..8ea273032d 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/line/line.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/line/line.ts @@ -42,6 +42,15 @@ export class Line extends G2PlotChartView { axis: AxisType[] = [...LINE_AXIS_TYPE, 'xAxisExt'] axisConfig = { ...this['axisConfig'], + xAxis: { + name: `${t('chart.drag_block_type_axis')} / ${t('chart.dimension')}`, + type: 'd' + }, + xAxisExt: { + name: `${t('chart.chart_group')} / ${t('chart.dimension')}`, + type: 'd', + limit: 1 + }, yAxis: { name: `${t('chart.drag_block_value_axis')} / ${t('chart.quota')}`, type: 'q' diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/line/stock-line.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/line/stock-line.ts index 60138ebb2c..1508c06d8e 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/line/stock-line.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/line/stock-line.ts @@ -46,7 +46,6 @@ export class StockLine extends G2PlotChartView { } axis: AxisType[] = ['xAxis', 'yAxis', 'filter', 'extLabel', 'extTooltip'] axisConfig = { - ...this['axisConfig'], xAxis: { name: `日期 / ${t('chart.dimension')}`, limit: 1, diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/map/flow-map.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/map/flow-map.ts index c4758a46a3..8f741e2aa1 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/map/flow-map.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/map/flow-map.ts @@ -47,18 +47,21 @@ export class FlowMap extends L7ChartView { flowMapStartName: { name: `起点名称 / ${t('chart.dimension')}`, type: 'd', - limit: 1 + limit: 1, + allowEmpty: true }, flowMapEndName: { name: `终点名称 / ${t('chart.dimension')}`, type: 'd', - limit: 1 + limit: 1, + allowEmpty: true }, yAxis: { name: `线条粗细 / ${t('chart.quota')}`, type: 'q', limit: 1, - tooltip: '该指标生效时，样式中线条配置的线条宽度属性将失效' + tooltip: '该指标生效时，样式中线条配置的线条宽度属性将失效', + allowEmpty: true } } constructor() { diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/map/symbolic-map.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/map/symbolic-map.ts index f24309b64b..f8758830bc 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/map/symbolic-map.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/map/symbolic-map.ts @@ -52,13 +52,15 @@ export class SymbolicMap extends L7ChartView { xAxisExt: { name: `颜色 / ${t('chart.dimension')}`, type: 'd', - limit: 1 + limit: 1, + allowEmpty: true }, extBubble: { name: `${t('chart.bubble_size')} / ${t('chart.quota')}`, type: 'q', limit: 1, - tooltip: '该指标生效时，样式基础样式中的大小属性将失效' + tooltip: '该指标生效时，样式基础样式中的大小属性将失效', + allowEmpty: true } } constructor() { diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/others/quadrant.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/others/quadrant.ts index cc1400b945..bd20834404 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/quadrant.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/quadrant.ts @@ -88,11 +88,11 @@ export class Quadrant extends G2PlotChartView { 'extTooltip' ] axisConfig: AxisConfig = { - ...this['axisConfig'], extBubble: { name: `${t('chart.bubble_size')} / ${t('chart.quota')}`, type: 'q', - limit: 1 + limit: 1, + allowEmpty: true }, xAxis: { name: `${t('chart.form_type')} / ${t('chart.dimension')}`, @@ -413,7 +413,7 @@ export class Quadrant extends G2PlotChartView { if (!(xAxis?.length && yAxis?.length && yAxisExt?.length)) { return [] } - const tmp = data[0].data + const tmp = data?.[0]?.data return setUpSingleDimensionSeriesColor(chart, tmp) } protected setupOptions(chart: Chart, options: ScatterOptions) { diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/others/sankey.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/others/sankey.ts index d8facd28c2..1b215ff71e 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/sankey.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/sankey.ts @@ -24,7 +24,6 @@ const DEFAULT_DATA = [] */ export class RangeBar extends G2PlotChartView { axisConfig = { - ...this['axisConfig'], xAxis: { name: `${t('chart.drag_block_type_axis_start')} / ${t('chart.dimension')}`, limit: 1, diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/others/scatter.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/others/scatter.ts index ea2633b899..d0d9e2cef6 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/scatter.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/scatter.ts @@ -75,7 +75,10 @@ export class Scatter extends G2PlotChartView { } axis: AxisType[] = ['xAxis', 'yAxis', 'extBubble', 'filter', 'drill', 'extLabel', 'extTooltip'] axisConfig: AxisConfig = { - ...this['axisConfig'], + xAxis: { + name: `${t('chart.drag_block_type_axis')} / ${t('chart.dimension')}`, + type: 'd' + }, yAxis: { ...this['axisConfig'].yAxis, limit: undefined @@ -83,7 +86,8 @@ export class Scatter extends G2PlotChartView { extBubble: { name: `${t('chart.bubble_size')} / ${t('chart.quota')}`, type: 'q', - limit: 1 + limit: 1, + allowEmpty: true } } async drawChart(drawOptions: G2PlotDrawOptions): Promise { diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-info.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-info.ts index d0aa043688..9ea25e826f 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-info.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-info.ts @@ -73,7 +73,7 @@ export class TableInfo extends S2ChartView { const containerDom = document.getElementById(container) // fields - let fields = chart.data.fields + let fields = chart.data?.fields ?? [] const columns = [] const meta = [] const axisMap = chart.xAxis.reduce((pre, cur) => { diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-pivot.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-pivot.ts index 08367a5a42..0f34e137a3 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-pivot.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/table/table-pivot.ts @@ -107,7 +107,8 @@ export class TablePivot extends S2ChartView { }, xAxisExt: { name: `${t('chart.drag_block_table_data_column')} / ${t('chart.dimension')}`, - type: 'd' + type: 'd', + allowEmpty: true }, yAxis: { name: `${t('chart.drag_block_table_data_column')} / ${t('chart.quota')}`, diff --git a/core/core-frontend/src/views/chart/components/js/panel/types/index.ts b/core/core-frontend/src/views/chart/components/js/panel/types/index.ts index b9e55b2430..c68f2a8bbf 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/types/index.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/types/index.ts @@ -80,22 +80,26 @@ export abstract class AntVAbstractChartView extends AbstractChartView { axisConfig: AxisConfig = { xAxis: { name: `${t('chart.drag_block_type_axis')} / ${t('chart.dimension')}`, - type: 'd' + type: 'd', + allowEmpty: true }, xAxisExt: { name: `${t('chart.chart_group')} / ${t('chart.dimension')}`, type: 'd', - limit: 1 + limit: 1, + allowEmpty: true }, extStack: { name: `${t('chart.stack_item')} / ${t('chart.dimension')}`, type: 'd', - limit: 1 + limit: 1, + allowEmpty: true }, yAxis: { name: `${t('chart.drag_block_value_axis')} / ${t('chart.quota')}`, type: 'q', - limit: 1 + limit: 1, + allowEmpty: true } } selectorSpec: EditorSelectorSpec = { diff --git a/core/core-frontend/src/views/chart/components/views/index.vue b/core/core-frontend/src/views/chart/components/views/index.vue index 913e832f46..dc59e7f983 100644 --- a/core/core-frontend/src/views/chart/components/views/index.vue +++ b/core/core-frontend/src/views/chart/components/views/index.vue @@ -573,13 +573,74 @@ onBeforeMount(() => { const listenerEnable = computed(() => { return !showPosition.value.includes('viewDialog') }) +const showEmpty = ref(false) +const checkFieldIsAllowEmpty = (allField?) => { + showEmpty.value = false + if (view.value?.render && view.value?.type) { + const chartView = chartViewManager.getChartView(view.value.render, view.value.type) + const axisConfigMap = new Map(Object.entries(chartView.axisConfig)) + // 验证拖入的字段是否包含在当前数据集字段中，如果一个都不在数据集字段中，则显示空图表 + let includeDatasetField = false + if (allField && allField.length > 0) { + axisConfigMap.forEach((value, key) => { + if (view.value?.[key]?.length > 0) { + view.value[key].forEach(item => { + if (!allField.find(field => field.id === item.id)) { + includeDatasetField = true + return false + } + }) + if (includeDatasetField) { + return false + } + } + }) + } + if (includeDatasetField) { + showEmpty.value = true + return + } + axisConfigMap.forEach((value, key) => { + // 不允许为空,并且没限制长度 + if (!value['allowEmpty'] && !value['limit'] && view.value?.[key]?.length === 0) { + showEmpty.value = true + return false + } + // 不允许为空， 限制长度 + if ( + !value['allowEmpty'] && + value['limit'] && + view.value?.[key]?.length < parseInt(value['limit']) + ) { + showEmpty.value = true + return false + } + if (view.value?.type === 'table-info' && view.value?.[key]?.length === 0) { + showEmpty.value = true + return false + } + }) + } +} +const changeChartType = () => { + checkFieldIsAllowEmpty() +} +const changeDataset = () => { + checkFieldIsAllowEmpty() +} onMounted(() => { if (!view.value.isPlugin) { - queryData(true && !showPosition.value.includes('viewDialog')) + queryData(!showPosition.value.includes('viewDialog')) } if (!listenerEnable.value) { return } + useEmitt({ + name: 'checkFieldIsAllowEmpty', + callback: allField => checkFieldIsAllowEmpty(allField) + }) + useEmitt({ name: 'chart-type-change', callback: changeChartType }) + useEmitt({ name: 'dataset-change', callback: changeDataset }) useEmitt({ name: 'clearPanelLinkage', callback: function (param) { @@ -913,7 +974,7 @@ const loadPluginCategory = data => { -
+
{ />