Merge pull request #12557 from dataease/pr@dev-v2@chart-show-style

style(图表): 当切换图表类型时，如果图表缺字段展示不出来而显示空白时,那么显示当前图表类型的图标

core/core-frontend/src/models/chart/editor.d.ts

@@ -88,6 +88,10 @@ declare type AxisSpec = {
    * 轴提示
    */
   tooltip?: string
+  /**
+   * 允许为空
+   */
+  allowEmpty?: boolean
 }
 /**
  * 图表编辑表单

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)
 }

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')
 }
 

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<BarOptions, Bar> {
   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<BarOptions, Bar> {
  * 堆叠条形图
  */
 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'],

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<BarOptions, G2Progress> {
   axisConfig = {
-    ...this['axisConfig'],
     xAxis: {
       name: `${t('chart.form_type')} / ${t('chart.dimension')}`,
       type: 'd',

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<BarOptions, Bar> {
   axisConfig = {
-    ...this['axisConfig'],
     yAxis: {
       name: `${t('chart.drag_block_value_start')} / ${t('chart.time_dimension_or_quota')}`,
       limit: 1,

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<WaterfallOptions, G2Waterfall> {
     ]
   }
   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<G2Waterfall>): Promise<G2Waterfall> {
     const { chart, container, action } = drawOptions
     if (!chart.data?.data) {

core/core-frontend/src/views/chart/components/js/panel/charts/line/area.ts

@@ -44,6 +44,10 @@ export class Area extends G2PlotChartView<AreaOptions, G2Area> {
   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

core/core-frontend/src/views/chart/components/js/panel/charts/line/line.ts

@@ -42,6 +42,15 @@ export class Line extends G2PlotChartView<LineOptions, G2Line> {
   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'

core/core-frontend/src/views/chart/components/js/panel/charts/line/stock-line.ts

@@ -46,7 +46,6 @@ export class StockLine extends G2PlotChartView<MixOptions, Mix> {
   }
   axis: AxisType[] = ['xAxis', 'yAxis', 'filter', 'extLabel', 'extTooltip']
   axisConfig = {
-    ...this['axisConfig'],
     xAxis: {
       name: `日期 / ${t('chart.dimension')}`,
       limit: 1,

core/core-frontend/src/views/chart/components/js/panel/charts/map/flow-map.ts

@@ -47,18 +47,21 @@ export class FlowMap extends L7ChartView<Scene, L7Config> {
     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() {

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

@@ -52,13 +52,15 @@ export class SymbolicMap extends L7ChartView<Scene, L7Config> {
     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() {

core/core-frontend/src/views/chart/components/js/panel/charts/others/quadrant.ts

@@ -88,11 +88,11 @@ export class Quadrant extends G2PlotChartView<ScatterOptions, G2Scatter> {
     '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<ScatterOptions, G2Scatter> {
     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) {

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<SankeyOptions, Sankey> {
   axisConfig = {
-    ...this['axisConfig'],
     xAxis: {
       name: `${t('chart.drag_block_type_axis_start')} / ${t('chart.dimension')}`,
       limit: 1,

core/core-frontend/src/views/chart/components/js/panel/charts/others/scatter.ts

@@ -75,7 +75,10 @@ export class Scatter extends G2PlotChartView<ScatterOptions, G2Scatter> {
   }
   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<ScatterOptions, G2Scatter> {
     extBubble: {
       name: `${t('chart.bubble_size')} / ${t('chart.quota')}`,
       type: 'q',
-      limit: 1
+      limit: 1,
+      allowEmpty: true
     }
   }
   async drawChart(drawOptions: G2PlotDrawOptions<G2Scatter>): Promise<G2Scatter> {

core/core-frontend/src/views/chart/components/js/panel/charts/table/table-info.ts

@@ -73,7 +73,7 @@ export class TableInfo extends S2ChartView<TableSheet> {
     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) => {

core/core-frontend/src/views/chart/components/js/panel/charts/table/table-pivot.ts

@@ -107,7 +107,8 @@ export class TablePivot extends S2ChartView<PivotSheet> {
     },
     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')}`,

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 = {

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 => {
       </transition>
     </div>
     <!--这里去渲染不同图库的图表-->
-    <div v-if="chartAreaShow" style="flex: 1; overflow: hidden">
+    <div v-if="chartAreaShow && !showEmpty" style="flex: 1; overflow: hidden">
       <plugin-component
         v-if="view.plugin?.isPlugin"
         :jsname="view.plugin.staticMap['index']"
@@ -991,7 +1052,7 @@ const loadPluginCategory = data => {
       />
     </div>
     <chart-empty-info
-      v-if="!chartAreaShow"
+      v-if="!chartAreaShow || showEmpty"
       :themes="canvasStyleData.dashboard.themeColor"
       :view-icon="view.type"
     ></chart-empty-info>