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

feat(图表-象限图): 恒线支持设置小数以及负数

core/core-frontend/src/views/chart/components/editor/editor-style/components/QuadrantSelector.vue

@@ -33,14 +33,14 @@ const labels = []
 const isDashboard = dvMainStore.dvInfo.type === 'dashboard'
 for (let i = 0; i < 4; i++) {
   regionStyle.push({
-    fill: isDashboard ? '#fdfcfc' : 'rgb(2,4,8,1)',
-    fillOpacity: 1
+    fill: isDashboard ? '#ffffff' : 'rgb(2,4,8,1,1)',
+    fillOpacity: '1.0'
   })
   labels.push({
     content: '',
     style: {
-      fill: isDashboard ? 'rgb(2,4,8,1)' : '#fdfcfc',
-      fillOpacity: 0.5,
+      fill: isDashboard ? 'rgb(2,4,8,1,1)' : '#ffffff',
+      fillOpacity: '0.5',
       fontSize: 14
     }
   })
@@ -108,6 +108,14 @@ const init = () => {
     if (customAttr.quadrant) {
       state.quadrantForm = customAttr.quadrant
     } else {
+      // 新增图表
+      state.quadrantForm = {
+        ...JSON.parse(JSON.stringify(DEFAULT_QUADRANT_STYLE)),
+        regionStyle,
+        labels
+      }
+      state.quadrantForm.xBaseline = undefined
+      state.quadrantForm.yBaseline = undefined
       changeStyle()
     }
   }
@@ -188,8 +196,8 @@ onMounted(() => {
             style="width: 100%"
             :effect="props.themes"
             v-model="state.quadrantForm.xBaseline"
-            :precision="0"
-            :min="0"
+            :precision="2"
+            :step="0.01"
             size="small"
             @change="changeStyle()"
           />
@@ -205,8 +213,8 @@ onMounted(() => {
             style="width: 100%"
             :effect="props.themes"
             v-model="state.quadrantForm.yBaseline"
-            :precision="0"
-            :min="0"
+            :precision="2"
+            :step="0.01"
             size="small"
             @change="changeStyle()"
           />

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

@@ -167,30 +167,16 @@ export class Quadrant extends G2PlotChartView<ScatterOptions, G2Scatter> {
       data.push(tmpData)
     }
     // x轴基准线 默认值
-    const xBaseline = (
-      (data.reduce((valueSoFar, currentItem) => {
-        return Math.max(valueSoFar, currentItem[xFieldObj.name])
-      }, 0) +
-        data.reduce((valueSoFar, currentItem) => {
-          return Math.min(valueSoFar, currentItem[xFieldObj.name])
-        }, Infinity)) /
-      2
-    ).toFixed()
+    const xValues = data.map(item => item[xFieldObj.name])
+    const xBaseline = ((Math.max(...xValues) + Math.min(...xValues)) / 2).toFixed()
     // y轴基准线 默认值
-    const yBaseline = (
-      (data.reduce((valueSoFar, currentItem) => {
-        return Math.max(valueSoFar, currentItem[yFieldObj.name])
-      }, 0) +
-        data.reduce((valueSoFar, currentItem) => {
-          return Math.min(valueSoFar, currentItem[yFieldObj.name])
-        }, Infinity)) /
-      2
-    ).toFixed()
+    const yValues = data.map(item => item[yFieldObj.name])
+    const yBaseline = ((Math.max(...yValues) + Math.min(...yValues)) / 2).toFixed()
     const defaultBaselineQuadrant = {
       ...chart.customAttr['quadrant']
     }
     // 新建图表
-    if (!defaultBaselineQuadrant.xBaseline) {
+    if (defaultBaselineQuadrant.xBaseline === undefined) {
       // 默认基准线值
       defaultBaselineQuadrant.xBaseline = xBaseline
       defaultBaselineQuadrant.yBaseline = yBaseline
@@ -215,6 +201,7 @@ export class Quadrant extends G2PlotChartView<ScatterOptions, G2Scatter> {
     const newChart = new G2Scatter(container, options)
     newChart.on('point:click', action)
     newChart.on('click', () => quadrantDefaultBaseline(defaultBaselineQuadrant))
+    newChart.on('afterrender', () => quadrantDefaultBaseline(defaultBaselineQuadrant))
     return newChart
   }