Merge pull request #9331 from dataease/pr@dev-v2@chart-quadrant-baseline

feat(图表-象限图): 支持可自定义设置轴恒线的位置
2024-04-25 13:26:47 +08:00 · 2024-04-25 13:26:47 +08:00 · 61d49b9327
commit 61d49b9327
parent c81be5fa1f 9e55472fbd
5 changed files with 90 additions and 25 deletions
--- a/core/core-frontend/src/models/chart/chart-attr.d.ts
+++ b/core/core-frontend/src/models/chart/chart-attr.d.ts
@ -710,6 +710,8 @@ declare interface MapCfg {
 * 象限属性
 */
 declare interface QuadrantAttr {
+  xBaseline?: number
+  yBaseline?: number
  lineStyle: QuadrantLineStyle
  regionStyle: QuadrantCommonStyle[]
  labels: QuadrantLabelConf[]
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/QuadrantSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/QuadrantSelector.vue
@ -1,8 +1,13 @@
 <script lang="tsx" setup>
-import { computed, onMounted, PropType, reactive, watch } from 'vue'
+import { computed, inject, onMounted, PropType, reactive, ref, watch } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { COLOR_PANEL, DEFAULT_QUADRANT_STYLE } from '@/views/chart/components/editor/util/chart'
-
+import { useEmitt } from '@/hooks/web/useEmitt'
+useEmitt({
+  name: 'quadrant-default-baseline',
+  callback: args => quadrantDefaultBaseline(args)
+})
+const quotaData = ref<Axis[]>(inject('quotaData'))
 const { t } = useI18n()

 const props = defineProps({
@ -63,6 +68,10 @@ const fillOpacityList = computed(() => {
 const changeStyle = () => {
  emit('onChangeQuadrantForm', state.quadrantForm)
 }
+const quadrantDefaultBaseline = quadrant => {
+  state.quadrantForm.xBaseline = quadrant.xBaseline
+  state.quadrantForm.yBaseline = quadrant.yBaseline
+}

 const init = () => {
  const chart = JSON.parse(JSON.stringify(props.chart))
@ -136,6 +145,42 @@ onMounted(() => {
          </el-tooltip>
        </el-form-item>
      </div>
+      <div style="display: flex">
+        <el-form-item
+          class="form-item"
+          label="X 轴恒线"
+          :class="'form-item-' + themes"
+          style="padding-left: 4px"
+        >
+          <el-input-number
+            controls-position="right"
+            style="width: 100%"
+            :effect="props.themes"
+            v-model="state.quadrantForm.xBaseline"
+            :precision="0"
+            :min="0"
+            size="small"
+            @change="changeStyle()"
+          />
+        </el-form-item>
+        <el-form-item
+          class="form-item"
+          label="Y 轴恒线"
+          :class="'form-item-' + themes"
+          style="padding-left: 4px"
+        >
+          <el-input-number
+            controls-position="right"
+            style="width: 100%"
+            :effect="props.themes"
+            v-model="state.quadrantForm.yBaseline"
+            :precision="0"
+            :min="0"
+            size="small"
+            @change="changeStyle()"
+          />
+        </el-form-item>
+      </div>
    </template>
    <div
      v-for="(l, index) in state.quadrantForm.labels"
--- 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
@ -7,7 +7,6 @@ import { flow, parseJson } from '../../../util'
 import { valueFormatter } from '../../../formatter'
 import { useI18n } from '@/hooks/web/useI18n'
 import { isEmpty } from 'lodash-es'
-import { Datum } from '@antv/g2plot/esm/types/common'
 import { DEFAULT_QUADRANT_STYLE } from '@/views/chart/components/editor/util/chart'

 const { t } = useI18n()
@ -31,7 +30,7 @@ export class Quadrant extends G2PlotChartView<ScatterOptions, G2Scatter> {
  ]
  propertyInner: EditorPropertyInner = {
    'basic-style-selector': ['colors', 'alpha', 'scatterSymbol', 'scatterSymbolSize'],
-    'label-selector': ['fontSize', 'color', 'labelFormatter'],
+    'label-selector': ['fontSize', 'color'],
    'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'seriesTooltipFormatter'],
    'x-axis-selector': [
      'position',
@ -118,7 +117,7 @@ export class Quadrant extends G2PlotChartView<ScatterOptions, G2Scatter> {
  }

  public drawChart(drawOptions: G2PlotDrawOptions<G2Scatter>) {
-    const { chart, container, action } = drawOptions
+    const { chart, container, action, quadrantDefaultBaseline } = drawOptions
    if (!chart.data?.data) {
      return
    }
@ -167,21 +166,33 @@ export class Quadrant extends G2PlotChartView<ScatterOptions, G2Scatter> {
      }
      data.push(tmpData)
    }
-    chart.customAttr['quadrant'].xBaseline = (
+    // x轴基准线 默认值
+    const xBaseline = (
      data.reduce((valueSoFar, currentItem) => {
-        return valueSoFar + currentItem[xFieldObj.name]
-      }, 0) / data.length
+        return Math.max(valueSoFar, currentItem[xFieldObj.name])
+      }, 0) / 2
    ).toFixed()
-    chart.customAttr['quadrant'].yBaseline = (
+    // y轴基准线 默认值
+    const yBaseline = (
      data.reduce((valueSoFar, currentItem) => {
-        return valueSoFar + currentItem[yFieldObj.name]
-      }, 0) / data.length
+        return Math.max(valueSoFar, currentItem[yFieldObj.name])
+      }, 0) / 2
    ).toFixed()
+    const defaultBaselineQuadrant = {
+      ...chart.customAttr['quadrant']
+    }
+    // 新建图表
+    if (!defaultBaselineQuadrant.xBaseline) {
+      // 默认基准线值
+      defaultBaselineQuadrant.xBaseline = xBaseline
+      defaultBaselineQuadrant.yBaseline = yBaseline
+    }
    const colorField = colorFieldObj.name ? { colorField: colorFieldObj.name } : {}
-    const quadrant = chart.customAttr['quadrant'] ? { quadrant: chart.customAttr['quadrant'] } : {}
    const baseOptions: ScatterOptions = {
      ...colorField,
-      ...quadrant,
+      quadrant: {
+        ...defaultBaselineQuadrant
+      },
      data: data,
      xField: xFieldObj.name,
      yField: yFieldObj.name,
@ -195,6 +206,7 @@ export class Quadrant extends G2PlotChartView<ScatterOptions, G2Scatter> {
    const options = this.setupOptions(chart, baseOptions)
    const newChart = new G2Scatter(container, options)
    newChart.on('point:click', action)
+    newChart.on('click', () => quadrantDefaultBaseline(defaultBaselineQuadrant))
    return newChart
  }

@ -205,7 +217,7 @@ export class Quadrant extends G2PlotChartView<ScatterOptions, G2Scatter> {
    if (chart.extBubble?.length) {
      return {
        ...options,
-        size: [5, 30],
+        size: [4, 30],
        sizeField: extBubbleObj.name,
        shape: basicStyle.scatterSymbol
      }
@ -283,18 +295,15 @@ export class Quadrant extends G2PlotChartView<ScatterOptions, G2Scatter> {
        const l = customAttr.label
        if (l.show) {
          label = {
-            position: l.position,
-            offsetY: 5,
+            offset: 0,
            style: {
              fill: l.color,
              fontSize: l.fontSize
            },
-            formatter: function (param: Datum, item) {
-              const text = String(param[chart.xAxis[0]?.['originName']])
-              const radius = item.size
-              const textWidth = text.length * 10
-              return textWidth > 2 * radius ? '' : param[chart.xAxis[0]?.['originName']]
-            }
+            content: datum => {
+              return datum[chart.xAxis[0]?.['originName']]
+            },
+            layout: [{ type: 'limit-in-shape' }]
          }
        } else {
          label = false
--- a/core/core-frontend/src/views/chart/components/js/panel/types/impl/g2plot.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/types/impl/g2plot.ts
@ -25,6 +25,11 @@ export interface G2PlotDrawOptions<O> extends AntVDrawOptions<O> {
   * 缩放比例
   */
  scale?: number
+  /**
+   * 特殊处理，象限图设置分割线的默认值
+   * @param args
+   */
+  quadrantDefaultBaseline?: (...args: any) => void
 }

 /**
--- a/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue
+++ b/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue
@ -16,10 +16,11 @@ import { BASE_VIEW_CONFIG } from '../../editor/util/chart'
 import { customAttrTrans, customStyleTrans, recursionTransObj } from '@/utils/canvasStyle'
 import { deepCopy } from '@/utils/utils'
 import { trackBarStyleCheck } from '@/utils/canvasUtils'
+import { useEmitt } from '@/hooks/web/useEmitt'

 const dvMainStore = dvMainStoreWithOut()
 const { nowPanelTrackInfo, nowPanelJumpInfo, mobileInPc } = storeToRefs(dvMainStore)
-
+const { emitter } = useEmitt()
 const props = defineProps({
  element: {
    type: Object,
@ -149,7 +150,8 @@ const renderG2Plot = (chart, chartView: G2PlotChartView<any, any>) => {
    container: containerId,
    chart: chart,
    scale: 1,
-    action
+    action,
+    quadrantDefaultBaseline
  })
  myChart?.render()
 }
@ -296,7 +298,9 @@ const trackMenu = computed(() => {
  }
  return trackMenuInfo
 })
-
+const quadrantDefaultBaseline = defaultQuadrant => {
+  emitter.emit('quadrant-default-baseline', defaultQuadrant)
+}
 defineExpose({
  calcData,
  renderChart,