feat(视图): 数值格式化

frontend/src/views/chart/chart/waterfall/waterfall.js

@@ -7,6 +7,7 @@ import {
   getYAxis
 } from '@/views/chart/chart/common/common_antv'
 import { Waterfall } from '@antv/g2plot'
+import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter'
 
 export function baseWaterfallOptionAntV(plot, container, chart, action) {
   // theme
@@ -42,6 +43,7 @@ export function baseWaterfallOptionAntV(plot, container, chart, action) {
     yField: 'value',
     seriesField: 'category',
     appendPadding: getPadding(chart),
+    meta: getMeta(chart),
     label: label,
     tooltip: tooltip,
     legend: {
@@ -102,3 +104,24 @@ export function baseWaterfallOptionAntV(plot, container, chart, action) {
 
   return plot
 }
+
+function getMeta(chart) {
+  const meta = {}
+  const yaxis = JSON.parse(chart.yaxis)
+  if (yaxis && yaxis.length > 0) {
+    const f = yaxis[0]
+    meta.value = {
+      alias: f.name,
+      formatter: (value) => {
+        let res
+        if (f.formatterCfg) {
+          res = valueFormatter(value, f.formatterCfg)
+        } else {
+          res = valueFormatter(value, formatterItem)
+        }
+        return res
+      }
+    }
+  }
+  return meta
+}

frontend/src/views/chart/components/drag-item/QuotaExtItem.vue

@@ -100,7 +100,7 @@
           <el-dropdown-item icon="el-icon-files" :command="beforeClickItem('filter')">
             <span>{{ $t('chart.filter') }}...</span>
           </el-dropdown-item>
-          <el-dropdown-item v-if="chart.render === 'antv' && chart.type !== 'waterfall'" icon="el-icon-notebook-2" divided :command="beforeClickItem('formatter')">
+          <el-dropdown-item v-if="chart.render === 'antv'" icon="el-icon-notebook-2" divided :command="beforeClickItem('formatter')">
             <span>{{ $t('chart.value_formatter') }}...</span>
           </el-dropdown-item>
           <el-dropdown-item icon="el-icon-edit-outline" divided :command="beforeClickItem('rename')">

frontend/src/views/chart/components/drag-item/QuotaItem.vue

@@ -100,7 +100,7 @@
           <el-dropdown-item icon="el-icon-files" :command="beforeClickItem('filter')">
             <span>{{ $t('chart.filter') }}...</span>
           </el-dropdown-item>
-          <el-dropdown-item v-if="chart.render === 'antv' && chart.type !== 'waterfall'" icon="el-icon-notebook-2" divided :command="beforeClickItem('formatter')">
+          <el-dropdown-item v-if="chart.render === 'antv'" icon="el-icon-notebook-2" divided :command="beforeClickItem('formatter')">
             <span>{{ $t('chart.value_formatter') }}...</span>
           </el-dropdown-item>
           <el-dropdown-item icon="el-icon-edit-outline" divided :command="beforeClickItem('rename')">

frontend/src/views/chart/components/value-formatter/ValueFormatterEdit.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script>
-import { formatterType, unitList, valueFormatter } from '@/views/chart/chart/formatter'
+import { formatterItem, formatterType, unitList, valueFormatter } from '@/views/chart/chart/formatter'
 
 export default {
   name: 'ValueFormatterEdit',
@@ -54,10 +54,18 @@ export default {
       exampleResult: '20000000'
     }
   },
+  created() {
+    this.init()
+  },
   mounted() {
     this.getExampleValue()
   },
   methods: {
+    init() {
+      if (!this.formatterItem.formatterCfg) {
+        this.formatterItem.formatterCfg = formatterItem
+      }
+    },
     getExampleValue() {
       this.exampleResult = valueFormatter(20000000, this.formatterItem.formatterCfg)
     }