feat: 指标卡阈值设置

frontend/src/lang/en.js

@@ -1068,7 +1068,24 @@ export default {
     count_distinct: 'Distinct Count',
     table_page_mode: 'Page Mode',
     page_mode_page: 'Page',
-    page_mode_pull: 'Pull'
+    page_mode_pull: 'Pull',
+    exp_can_not_empty: 'Condition can not be empty',
+    value_formatter: 'Value Formatter',
+    value_formatter_type: 'Formatter Type',
+    value_formatter_auto: 'Auto',
+    value_formatter_value: 'Value',
+    value_formatter_percent: 'Percent',
+    value_formatter_unit: 'Unit',
+    value_formatter_decimal_count: 'Decimal Count',
+    value_formatter_suffix: 'Unit Suffix',
+    value_formatter_thousand_separator: 'Thousand Separator',
+    value_formatter_example: 'Example',
+    unit_none: 'None',
+    unit_thousand: 'Thousand',
+    unit_ten_thousand: 'Ten Thousand',
+    unit_million: 'Million',
+    unit_hundred_million: 'Hundred Million',
+    formatter_decimal_count_error: 'Range 0-10'
   },
   dataset: {
     sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',

frontend/src/lang/tw.js

@@ -1068,7 +1068,24 @@ export default {
     count_distinct: '去重計數',
     table_page_mode: '分頁模式',
     page_mode_page: '翻頁',
-    page_mode_pull: '下拉'
+    page_mode_pull: '下拉',
+    exp_can_not_empty: '條件不能為空',
+    value_formatter: '數值格式',
+    value_formatter_type: '格式類型',
+    value_formatter_auto: '自動',
+    value_formatter_value: '數值',
+    value_formatter_percent: '百分比',
+    value_formatter_unit: '數量單位',
+    value_formatter_decimal_count: '小數位數',
+    value_formatter_suffix: '單位後綴',
+    value_formatter_thousand_separator: '千分符',
+    value_formatter_example: '示例',
+    unit_none: '無',
+    unit_thousand: '千',
+    unit_ten_thousand: '萬',
+    unit_million: '百萬',
+    unit_hundred_million: '億',
+    formatter_decimal_count_error: '請輸入0-10的整數'
   },
   dataset: {
     sheet_warn: '有多個 Sheet 頁，默認抽取第一個',

frontend/src/lang/zh.js

@@ -1071,7 +1071,24 @@ export default {
     count_distinct: '去重计数',
     table_page_mode: '分页模式',
     page_mode_page: '翻页',
-    page_mode_pull: '下拉'
+    page_mode_pull: '下拉',
+    exp_can_not_empty: '条件不能为空',
+    value_formatter: '数值格式',
+    value_formatter_type: '格式类型',
+    value_formatter_auto: '自动',
+    value_formatter_value: '数值',
+    value_formatter_percent: '百分比',
+    value_formatter_unit: '数量单位',
+    value_formatter_decimal_count: '小数位数',
+    value_formatter_suffix: '单位后缀',
+    value_formatter_thousand_separator: '千分符',
+    value_formatter_example: '示例',
+    unit_none: '无',
+    unit_thousand: '千',
+    unit_ten_thousand: '万',
+    unit_million: '百万',
+    unit_hundred_million: '亿',
+    formatter_decimal_count_error: '请输入0-10的整数'
   },
   dataset: {
     sheet_warn: '有多个 Sheet 页，默认抽取第一个',

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

@@ -277,7 +277,8 @@ export const DEFAULT_FUNCTION_CFG = {
   sliderRange: [0, 10]
 }
 export const DEFAULT_THRESHOLD = {
-  gaugeThreshold: ''
+  gaugeThreshold: '',
+  labelThreshold: []
 }
 // chart config
 export const BASE_BAR = {

frontend/src/views/chart/chart/formatter.js

+export const formatterItem = {
+  type: 'auto', // auto,value,percent
+  unit: 1, // 换算单位
+  suffix: '', // 单位后缀
+  decimalCount: 2, // 小数位数
+  thousandSeparator: true// 千分符
+}
+
+// 单位list
+export const unitList = [
+  { name: 'unit_none', value: 1 },
+  { name: 'unit_thousand', value: 1000 },
+  { name: 'unit_ten_thousand', value: 10000 },
+  { name: 'unit_million', value: 1000000 },
+  { name: 'unit_hundred_million', value: 100000000 }
+]
+
+// 格式化方式
+export const formatterType = [
+  { name: 'value_formatter_auto', value: 'auto' },
+  { name: 'value_formatter_value', value: 'value' },
+  { name: 'value_formatter_percent', value: 'percent' }
+]
+
+export function valueFormatter(value, formatter) {
+  // 1.unit 2.decimal 3.thousand separator and suffix
+  let result
+  if (formatter.type === 'auto') {
+    result = transSeparatorAndSuffix(transUnit(value, formatter), formatter)
+  } else if (formatter.type === 'value') {
+    result = transSeparatorAndSuffix(transDecimal(transUnit(value, formatter), formatter), formatter)
+  } else if (formatter.type === 'percent') {
+    value = value * 100
+    result = transSeparatorAndSuffix(transDecimal(value, formatter), formatter)
+  } else {
+    result = value
+  }
+  return result
+}
+
+function transUnit(value, formatter) {
+  return value / formatter.unit
+}
+
+function transDecimal(value, formatter) {
+  return value.toFixed(formatter.decimalCount)
+}
+
+function transSeparatorAndSuffix(value, formatter) {
+  let str = value + ''
+  if (formatter.thousandSeparator) {
+    const thousandsReg = /(\d)(?=(\d{3})+$)/g
+    const numArr = str.split('.')
+    numArr[0] = numArr[0].replace(thousandsReg, '$1,')
+    str = numArr.join('.')
+  }
+  if (formatter.type === 'percent') {
+    str += '%'
+  } else {
+    if (formatter.unit === 1000) {
+      str += '千'
+    } else if (formatter.unit === 10000) {
+      str += '万'
+    } else if (formatter.unit === 1000000) {
+      str += '百万'
+    } else if (formatter.unit === 100000000) {
+      str += '亿'
+    }
+  }
+  return str + formatter.suffix.replace(/(^\s*)|(\s*$)/g, '')
+}

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

@@ -77,6 +77,9 @@
             </el-dropdown>
           </el-dropdown-item>
 
+          <el-dropdown-item v-if="chart.render === 'antv' && chart.type.includes('table')" 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')">
             <span>{{ $t('chart.show_name_set') }}</span>
           </el-dropdown-item>
@@ -92,6 +95,7 @@
 <script>
 import { getItemType } from '@/views/chart/components/drag-item/utils'
 import FieldErrorTips from '@/views/chart/components/drag-item/components/FieldErrorTips'
+import { formatterItem } from '@/views/chart/chart/formatter'
 
 export default {
   name: 'DimensionItem',
@@ -109,6 +113,10 @@ export default {
       type: Number,
       required: true
     },
+    chart: {
+      type: Object,
+      required: true
+    },
     dimensionData: {
       type: Array,
       required: true
@@ -120,7 +128,8 @@ export default {
   },
   data() {
     return {
-      tagType: 'success'
+      tagType: 'success',
+      formatterItem: formatterItem
     }
   },
   watch: {
@@ -132,8 +141,14 @@ export default {
     }
   },
   mounted() {
+    this.init()
   },
   methods: {
+    init() {
+      if (!this.item.formatterCfg) {
+        this.item.formatterCfg = JSON.parse(JSON.stringify(this.formatterItem))
+      }
+    },
     clickItem(param) {
       if (!param) {
         return
@@ -148,6 +163,9 @@ export default {
         case 'filter':
           this.editFilter()
           break
+        case 'formatter':
+          this.valueFormatter()
+          break
         default:
           break
       }
@@ -203,6 +221,12 @@ export default {
     },
     getItemTagType() {
       this.tagType = getItemType(this.dimensionData, this.quotaData, this.item)
+    },
+
+    valueFormatter() {
+      this.item.index = this.index
+      this.item.formatterType = 'quota'
+      this.$emit('valueFormatter', this.item)
     }
   }
 }

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

@@ -99,6 +99,9 @@
           <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.includes('table')" 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')">
             <span>{{ $t('chart.show_name_set') }}</span>
           </el-dropdown-item>
@@ -115,6 +118,7 @@
 import { compareItem } from '@/views/chart/chart/compare'
 import { getItemType } from '@/views/chart/components/drag-item/utils'
 import FieldErrorTips from '@/views/chart/components/drag-item/components/FieldErrorTips'
+import { formatterItem } from '@/views/chart/chart/formatter'
 
 export default {
   name: 'QuotaExtItem',
@@ -149,7 +153,8 @@ export default {
     return {
       compareItem: compareItem,
       disableEditCompare: false,
-      tagType: 'success'
+      tagType: 'success',
+      formatterItem: formatterItem
     }
   },
   watch: {
@@ -175,6 +180,9 @@ export default {
       if (!this.item.compareCalc) {
         this.item.compareCalc = JSON.parse(JSON.stringify(this.compareItem))
       }
+      if (!this.item.formatterCfg) {
+        this.item.formatterCfg = JSON.parse(JSON.stringify(this.formatterItem))
+      }
     },
     isEnableCompare() {
       let xAxis = null
@@ -207,6 +215,9 @@ export default {
         case 'filter':
           this.editFilter()
           break
+        case 'formatter':
+          this.valueFormatter()
+          break
         default:
           break
       }
@@ -291,6 +302,12 @@ export default {
     },
     getItemTagType() {
       this.tagType = getItemType(this.dimensionData, this.quotaData, this.item)
+    },
+
+    valueFormatter() {
+      this.item.index = this.index
+      this.item.formatterType = 'quota'
+      this.$emit('valueFormatter', this.item)
     }
   }
 }

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

@@ -99,6 +99,9 @@
           <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.includes('table')" 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')">
             <span>{{ $t('chart.show_name_set') }}</span>
           </el-dropdown-item>
@@ -115,6 +118,7 @@
 import { compareItem } from '@/views/chart/chart/compare'
 import { getItemType } from '@/views/chart/components/drag-item/utils'
 import FieldErrorTips from '@/views/chart/components/drag-item/components/FieldErrorTips'
+import { formatterItem } from '@/views/chart/chart/formatter'
 
 export default {
   name: 'QuotaItem',
@@ -149,7 +153,8 @@ export default {
     return {
       compareItem: compareItem,
       disableEditCompare: false,
-      tagType: 'success'
+      tagType: 'success',
+      formatterItem: formatterItem
     }
   },
   watch: {
@@ -172,6 +177,9 @@ export default {
       if (!this.item.compareCalc) {
         this.item.compareCalc = JSON.parse(JSON.stringify(this.compareItem))
       }
+      if (!this.item.formatterCfg) {
+        this.item.formatterCfg = JSON.parse(JSON.stringify(this.formatterItem))
+      }
     },
     isEnableCompare() {
       let xAxis = null
@@ -204,6 +212,9 @@ export default {
         case 'filter':
           this.editFilter()
           break
+        case 'formatter':
+          this.valueFormatter()
+          break
         default:
           break
       }
@@ -288,6 +299,12 @@ export default {
     },
     getItemTagType() {
       this.tagType = getItemType(this.dimensionData, this.quotaData, this.item)
+    },
+
+    valueFormatter() {
+      this.item.index = this.index
+      this.item.formatterType = 'quota'
+      this.$emit('valueFormatter', this.item)
     }
   }
 }

frontend/src/views/chart/components/normal/LabelNormal.vue

@@ -136,7 +136,8 @@ export default {
         const customAttr = JSON.parse(this.chart.customAttr)
         if (customAttr.color) {
           this.label_class.color = customAttr.color.dimensionColor
-          this.label_content_class.color = customAttr.color.quotaColor
+          // color threshold
+          this.colorThreshold(customAttr.color.quotaColor)
         }
         if (customAttr.size) {
           this.dimensionShow = customAttr.size.dimensionShow
@@ -168,6 +169,57 @@ export default {
     chartResize() {
       // 指定图表的配置项和数据
       this.calcHeight()
+    },
+
+    colorThreshold(valueColor) {
+      if (this.chart.senior) {
+        const senior = JSON.parse(this.chart.senior)
+        if (senior.threshold.labelThreshold && senior.threshold.labelThreshold.length > 0) {
+          const value = this.chart.data.series[0].data[0]
+          for (let i = 0; i < senior.threshold.labelThreshold.length; i++) {
+            let flag = false
+            const t = senior.threshold.labelThreshold[i]
+            if (t.term === 'eq') {
+              if (value === t.value) {
+                this.label_content_class.color = t.color
+                flag = true
+              }
+            } else if (t.term === 'not_eq') {
+              if (value !== t.value) {
+                this.label_content_class.color = t.color
+                flag = true
+              }
+            } else if (t.term === 'lt') {
+              if (value < t.value) {
+                this.label_content_class.color = t.color
+                flag = true
+              }
+            } else if (t.term === 'gt') {
+              if (value > t.value) {
+                this.label_content_class.color = t.color
+                flag = true
+              }
+            } else if (t.term === 'le') {
+              if (value <= t.value) {
+                this.label_content_class.color = t.color
+                flag = true
+              }
+            } else if (t.term === 'ge') {
+              if (value >= t.value) {
+                this.label_content_class.color = t.color
+                flag = true
+              }
+            }
+            if (flag) {
+              break
+            } else if (i === senior.threshold.labelThreshold.length - 1) {
+              this.label_content_class.color = valueColor
+            }
+          }
+        } else {
+          this.label_content_class.color = valueColor
+        }
+      }
     }
   }
 }

frontend/src/views/chart/components/senior/Threshold.vue

 <template>
   <div style="width: 100%">
+    <!--仪表盘-->
     <el-col v-if="chart.type && chart.type === 'gauge'">
       <el-form ref="thresholdForm" :model="thresholdForm" label-width="80px" size="mini">
         <el-form-item :label="$t('chart.threshold_range')+'(%)'" class="form-item">
           <span>0,</span>
-          <el-input v-model="thresholdForm.gaugeThreshold" style="width: 100px;margin: 0 10px;" :placeholder="$t('chart.threshold_range')" size="mini" clearable @change="changeThreshold" />
+          <el-input v-model="thresholdForm.gaugeThreshold" style="width: 100px;margin: 0 10px;" :placeholder="$t('chart.threshold_range')" size="mini" clearable @change="gaugeThresholdChange" />
           <span>,100</span>
           <el-tooltip class="item" effect="dark" placement="bottom">
             <div slot="content">
@@ -17,14 +18,65 @@
         </el-form-item>
       </el-form>
     </el-col>
+
+    <!--指标卡-->
+    <el-col v-if="chart.type && chart.type === 'text'">
+      <el-col>
+        <el-button
+          :title="$t('chart.edit')"
+          icon="el-icon-edit"
+          type="text"
+          size="small"
+          style="width: 24px;margin-left: 4px;"
+          @click="editLabelThreshold"
+        />
+        <el-col style="padding: 0 18px;">
+          <el-row v-for="(item,index) in thresholdForm.labelThreshold" :key="index" class="line-style">
+            <el-col :span="8">
+              <span v-if="item.term === 'eq'" :title="$t('chart.filter_eq')">{{ $t('chart.filter_eq') }}</span>
+              <span v-else-if="item.term === 'not_eq'" :title="$t('chart.filter_not_eq')">{{ $t('chart.filter_not_eq') }}</span>
+              <span v-else-if="item.term === 'lt'" :title="$t('chart.filter_lt')">{{ $t('chart.filter_lt') }}</span>
+              <span v-else-if="item.term === 'gt'" :title="$t('chart.filter_gt')">{{ $t('chart.filter_gt') }}</span>
+              <span v-else-if="item.term === 'le'" :title="$t('chart.filter_le')">{{ $t('chart.filter_le') }}</span>
+              <span v-else-if="item.term === 'ge'" :title="$t('chart.filter_ge')">{{ $t('chart.filter_ge') }}</span>
+            </el-col>
+            <el-col :span="8">
+              <span :title="item.value">{{ item.value }}</span>
+            </el-col>
+            <el-col :span="8">
+              <span :style="{width:'14px', height:'14px', backgroundColor: item.color}" />
+            </el-col>
+          </el-row>
+        </el-col>
+      </el-col>
+    </el-col>
+
+    <!--编辑阈值-->
+    <el-dialog
+      v-if="editLabelThresholdDialog"
+      v-dialogDrag
+      :title="$t('chart.threshold')"
+      :visible="editLabelThresholdDialog"
+      :show-close="false"
+      width="50%"
+      class="dialog-css"
+    >
+      <text-threshold-edit :threshold="thresholdForm.labelThreshold" @onLabelThresholdChange="thresholdChange" />
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="closeLabelThreshold">{{ $t('chart.cancel') }}</el-button>
+        <el-button type="primary" size="mini" @click="changeLabelThreshold">{{ $t('chart.confirm') }}</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import { DEFAULT_THRESHOLD } from '@/views/chart/chart/chart'
+import TextThresholdEdit from '@/views/chart/components/senior/dialog/TextThresholdEdit'
 
 export default {
   name: 'Threshold',
+  components: { TextThresholdEdit },
   props: {
     chart: {
       type: Object,
@@ -33,7 +85,9 @@ export default {
   },
   data() {
     return {
-      thresholdForm: JSON.parse(JSON.stringify(DEFAULT_THRESHOLD))
+      thresholdForm: JSON.parse(JSON.stringify(DEFAULT_THRESHOLD)),
+      editLabelThresholdDialog: false,
+      thresholdArr: []
     }
   },
   watch: {
@@ -58,12 +112,18 @@ export default {
         }
         if (senior.threshold) {
           this.thresholdForm = senior.threshold
+          if (!this.thresholdForm.labelThreshold) {
+            this.thresholdForm.labelThreshold = []
+          }
         } else {
           this.thresholdForm = JSON.parse(JSON.stringify(DEFAULT_THRESHOLD))
         }
       }
     },
     changeThreshold() {
+      this.$emit('onThresholdChange', this.thresholdForm)
+    },
+    gaugeThresholdChange() {
       // check input
       if (this.thresholdForm.gaugeThreshold) {
         const arr = this.thresholdForm.gaugeThreshold.split(',')
@@ -79,7 +139,49 @@ export default {
           }
         }
       }
-      this.$emit('onThresholdChange', this.thresholdForm)
+      this.changeThreshold()
+    },
+    editLabelThreshold() {
+      this.editLabelThresholdDialog = true
+    },
+    closeLabelThreshold() {
+      this.editLabelThresholdDialog = false
+    },
+    changeLabelThreshold() {
+      // check line config
+      for (let i = 0; i < this.thresholdArr.length; i++) {
+        const ele = this.thresholdArr[i]
+        if (!ele.term || ele.term === '') {
+          this.$message({
+            message: this.$t('chart.exp_can_not_empty'),
+            type: 'error',
+            showClose: true
+          })
+          return
+        }
+        if (!ele.value) {
+          this.$message({
+            message: this.$t('chart.value_can_not_empty'),
+            type: 'error',
+            showClose: true
+          })
+          return
+        }
+        if (parseFloat(ele.value).toString() === 'NaN') {
+          this.$message({
+            message: this.$t('chart.value_error'),
+            type: 'error',
+            showClose: true
+          })
+          return
+        }
+      }
+      this.thresholdForm.labelThreshold = JSON.parse(JSON.stringify(this.thresholdArr))
+      this.changeThreshold()
+      this.closeLabelThreshold()
+    },
+    thresholdChange(val) {
+      this.thresholdArr = val
     }
   }
 }
@@ -120,4 +222,25 @@ span{
   cursor: pointer;
   z-index: 1003;
 }
+
+.line-style >>> span{
+  display: inline-block;
+  width: 100%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  margin: 0 10px;
+}
+
+.dialog-css >>> .el-dialog__title {
+  font-size: 14px;
+}
+
+.dialog-css >>> .el-dialog__header {
+  padding: 20px 20px 0;
+}
+
+.dialog-css >>> .el-dialog__body {
+  padding: 10px 20px 20px;
+}
 </style>

frontend/src/views/chart/components/senior/dialog/TextThresholdEdit.vue

+<template>
+  <el-col>
+    <el-button icon="el-icon-plus" circle size="mini" style="margin-bottom: 10px;" @click="addThreshold" />
+    <div style="max-height: 50vh;overflow-y: auto;">
+      <el-row v-for="(item,index) in thresholdArr" :key="index" class="line-item">
+        <el-col :span="6">
+          <el-select v-model="item.term" size="mini" @change="changeThreshold">
+            <el-option-group
+              v-for="(group,idx) in valueOptions"
+              :key="idx"
+              :label="group.label"
+            >
+              <el-option
+                v-for="opt in group.options"
+                :key="opt.value"
+                :label="opt.label"
+                :value="opt.value"
+              />
+            </el-option-group>
+          </el-select>
+        </el-col>
+        <el-col :span="10" style="text-align: center;">
+          <el-input v-model="item.value" class="value-item" :placeholder="$t('chart.drag_block_label_value')" size="mini" clearable @change="changeThreshold" />
+        </el-col>
+        <el-col :span="4" style="text-align: center;">
+          <el-color-picker v-model="item.color" show-alpha class="color-picker-style" :predefine="predefineColors" @change="changeThreshold" />
+        </el-col>
+        <el-col :span="4">
+          <el-button type="text" icon="el-icon-delete" circle style="float: right" @click="removeThreshold(index)" />
+        </el-col>
+      </el-row>
+    </div>
+  </el-col>
+</template>
+
+<script>
+import { COLOR_PANEL } from '@/views/chart/chart/chart'
+
+export default {
+  name: 'TextThresholdEdit',
+  props: {
+    threshold: {
+      type: Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+      thresholdArr: [],
+      thresholdObj: {
+        term: 'eq',
+        value: '0',
+        color: '#ff0000ff'
+      },
+      valueOptions: [
+        {
+          label: '',
+          options: [{
+            value: 'eq',
+            label: this.$t('chart.filter_eq')
+          }, {
+            value: 'not_eq',
+            label: this.$t('chart.filter_not_eq')
+          }]
+        },
+        {
+          label: '',
+          options: [{
+            value: 'lt',
+            label: this.$t('chart.filter_lt')
+          }, {
+            value: 'gt',
+            label: this.$t('chart.filter_gt')
+          }]
+        },
+        {
+          label: '',
+          options: [{
+            value: 'le',
+            label: this.$t('chart.filter_le')
+          }, {
+            value: 'ge',
+            label: this.$t('chart.filter_ge')
+          }]
+        }
+      ],
+      predefineColors: COLOR_PANEL
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      this.thresholdArr = JSON.parse(JSON.stringify(this.threshold))
+    },
+    addThreshold() {
+      this.thresholdArr.push(JSON.parse(JSON.stringify(this.thresholdObj)))
+      this.changeThreshold()
+    },
+    removeThreshold(index) {
+      this.thresholdArr.splice(index, 1)
+      this.changeThreshold()
+    },
+
+    changeThreshold() {
+      this.$emit('onLabelThresholdChange', this.thresholdArr)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.line-item {
+  width: 100%;
+  border-radius: 4px;
+  border: 1px solid #DCDFE6;
+  padding: 4px 14px;
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: left;
+  align-items: center;
+}
+
+.form-item >>> .el-form-item__label {
+  font-size: 12px;
+}
+
+span {
+  font-size: 12px;
+}
+
+.value-item {
+  position: relative;
+  display: inline-block;
+  width: 200px !important;
+}
+
+.select-item {
+  position: relative;
+  display: inline-block;
+  width: 100px !important;
+}
+
+.el-select-dropdown__item {
+  padding: 0 20px;
+  font-size: 12px;
+}
+
+.color-picker-style{
+  cursor: pointer;
+  z-index: 1003;
+  width: 28px;
+  height: 28px;
+  margin-top: 6px;
+}
+
+.color-picker-style >>> .el-color-picker__trigger{
+  width: 28px;
+  height: 28px;
+}
+</style>

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

+<template>
+  <div>
+    <el-form ref="form" :model="formatterItem.formatterCfg" label-width="80px" size="mini" class="formatter-form">
+      <el-form-item :label="$t('chart.value_formatter_type')">
+        <el-radio-group v-model="formatterItem.formatterCfg.type" @change="getExampleValue">
+          <el-radio v-for="radio in typeList" :key="radio.value" :label="radio.value">{{ $t('chart.' + radio.name) }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item v-show="formatterItem.formatterCfg.type !== 'auto'" :label="$t('chart.value_formatter_decimal_count')">
+        <el-input-number v-model="formatterItem.formatterCfg.decimalCount" :min="0" :max="10" size="mini" @change="getExampleValue" />
+      </el-form-item>
+
+      <el-form-item v-show="formatterItem.formatterCfg.type !== 'percent'" :label="$t('chart.value_formatter_unit')">
+        <el-select v-model="formatterItem.formatterCfg.unit" :placeholder="$t('chart.pls_select_field')" size="mini" @change="getExampleValue">
+          <el-option v-for="item in unitList" :key="item.value" :label="$t('chart.' + item.name)" :value="item.value" />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item :label="$t('chart.value_formatter_suffix')">
+        <el-input v-model="formatterItem.formatterCfg.suffix" size="mini" clearable :placeholder="$t('commons.input_content')" @change="getExampleValue" />
+      </el-form-item>
+
+      <el-form-item :label="$t('chart.value_formatter_thousand_separator')">
+        <el-checkbox v-model="formatterItem.formatterCfg.thousandSeparator" @change="getExampleValue" />
+      </el-form-item>
+
+      <el-form-item :label="$t('chart.value_formatter_example')">
+        <span>{{ exampleResult }}</span>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { formatterType, unitList, valueFormatter } from '@/views/chart/chart/formatter'
+
+export default {
+  name: 'ValueFormatterEdit',
+  props: {
+    formatterItem: {
+      type: Object,
+      required: true
+    },
+    chart: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      typeList: formatterType,
+      unitList: unitList,
+      exampleResult: '20000000'
+    }
+  },
+  mounted() {
+    this.getExampleValue()
+  },
+  methods: {
+    getExampleValue() {
+      this.exampleResult = valueFormatter(20000000, this.formatterItem.formatterCfg)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-form-item{
+  margin-bottom: 10px!important;
+}
+.formatter-form >>> .el-form-item__label{
+  font-size: 12px!important;
+  font-weight: 400!important;
+}
+.formatter-form >>> .el-radio__label{
+  font-size: 12px!important;
+  font-weight: 400!important;
+}
+.el-select-dropdown__item >>> span{
+  font-size: 12px!important;
+}
+.exp-style{
+  color: #C0C4CC;
+  font-size: 12px;
+}
+</style>

frontend/src/views/chart/view/ChartEdit.vue

@@ -366,10 +366,12 @@
                             :item="item"
                             :dimension-data="dimension"
                             :quota-data="quota"
+                            :chart="chart"
                             @onDimensionItemChange="dimensionItemChange"
                             @onDimensionItemRemove="dimensionItemRemove"
                             @editItemFilter="showDimensionEditFilter"
                             @onNameEdit="showRename"
+                            @valueFormatter="valueFormatter"
                           />
                         </transition-group>
                       </draggable>
@@ -445,6 +447,7 @@
                             @editItemFilter="showQuotaEditFilter"
                             @onNameEdit="showRename"
                             @editItemCompare="showQuotaEditCompare"
+                            @valueFormatter="valueFormatter"
                           />
                         </transition-group>
                       </draggable>
@@ -893,7 +896,7 @@
         <el-tab-pane :label="$t('chart.senior')" class="padding-tab" style="width: 300px;">
           <el-row class="view-panel">
             <div
-              v-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('mix') || view.type.includes('gauge'))"
+              v-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('mix') || view.type.includes('gauge')) || view.type === 'text'"
               style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;"
               class="attr-style theme-border-class"
             >
@@ -913,7 +916,7 @@
                 </el-collapse>
               </el-row>
               <el-row
-                v-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('mix') || view.type.includes('gauge'))"
+                v-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('mix') || view.type.includes('gauge') || view.type === 'text')"
               >
                 <span class="padding-lr">{{ $t('chart.analyse_cfg') }}</span>
                 <el-collapse v-model="styleActiveNames" class="style-collapse">
@@ -930,7 +933,7 @@
                     />
                   </el-collapse-item>
                   <el-collapse-item
-                    v-if="view.type && (view.type.includes('gauge'))"
+                    v-if="view.type && (view.type.includes('gauge') || view.type === 'text')"
                     name="threshold"
                     :title="$t('chart.threshold')"
                   >
@@ -1116,6 +1119,7 @@
       </div>
     </el-dialog>
 
+    <!--同环比设置-->
     <el-dialog
       v-if="showEditQuotaCompare"
       v-dialogDrag
@@ -1131,6 +1135,23 @@
         <el-button type="primary" size="mini" @click="saveQuotaEditCompare">{{ $t('chart.confirm') }}</el-button>
       </div>
     </el-dialog>
+
+    <!--数值格式-->
+    <el-dialog
+      v-if="showValueFormatter"
+      v-dialogDrag
+      :title="$t('chart.value_formatter') + ' - ' + valueFormatterItem.name"
+      :visible="showValueFormatter"
+      :show-close="false"
+      width="600px"
+      class="dialog-css"
+    >
+      <value-formatter-edit :formatter-item="valueFormatterItem" :chart="chart" />
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="closeValueFormatter">{{ $t('chart.cancel') }}</el-button>
+        <el-button type="primary" size="mini" @click="saveValueFormatter">{{ $t('chart.confirm') }}</el-button>
+      </div>
+    </el-dialog>
   </el-row>
 </template>
 
@@ -1213,9 +1234,11 @@ import Threshold from '@/views/chart/components/senior/Threshold'
 import TotalCfg from '@/views/chart/components/shape-attr/TotalCfg'
 import LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
 import { pluginTypes } from '@/api/chart/chart'
+import ValueFormatterEdit from '@/views/chart/components/value-formatter/ValueFormatterEdit'
 export default {
   name: 'ChartEdit',
   components: {
+    ValueFormatterEdit,
     LabelNormalText,
     TotalCfg,
     Threshold,
@@ -1366,7 +1389,9 @@ export default {
       quotaItemCompare: {},
       showEditQuotaCompare: false,
       preChartId: '',
-      pluginRenderOptions: []
+      pluginRenderOptions: [],
+      showValueFormatter: false,
+      valueFormatterItem: {}
 
     }
   },
@@ -2273,11 +2298,11 @@ export default {
     },
     addXaxisExt(e) {
       if (this.view.type !== 'table-info') {
-        this.dragCheckType(this.view.xaxis, 'd')
+        this.dragCheckType(this.view.xaxisExt, 'd')
       }
-      this.dragMoveDuplicate(this.view.xaxis, e)
-      if ((this.view.type === 'map' || this.view.type === 'word-cloud') && this.view.xaxis.length > 1) {
-        this.view.xaxis = [this.view.xaxis[0]]
+      this.dragMoveDuplicate(this.view.xaxisExt, e)
+      if ((this.view.type === 'map' || this.view.type === 'word-cloud') && this.view.xaxisExt.length > 1) {
+        this.view.xaxisExt = [this.view.xaxisExt[0]]
       }
       this.calcData(true)
     },
@@ -2544,6 +2569,33 @@ export default {
           this.view.customAttr.label.position = 'middle'
         }
       }
+    },
+
+    valueFormatter(item) {
+      this.valueFormatterItem = JSON.parse(JSON.stringify(item))
+      this.showValueFormatter = true
+    },
+    closeValueFormatter() {
+      this.showValueFormatter = false
+    },
+    saveValueFormatter() {
+      const ele = this.valueFormatterItem.formatterCfg.decimalCount
+      if (ele === undefined || ele.toString().indexOf('.') > -1 || parseInt(ele).toString() === 'NaN' || parseInt(ele) < 0 || parseInt(ele) > 10) {
+        this.$message({
+          message: this.$t('chart.formatter_decimal_count_error'),
+          type: 'error',
+          showClose: true
+        })
+        return
+      }
+      // 更新指标
+      if (this.valueFormatterItem.formatterType === 'quota') {
+        this.view.yaxis[this.valueFormatterItem.index].formatterCfg = this.valueFormatterItem.formatterCfg
+      } else if (this.valueFormatterItem.formatterType === 'quotaExt') {
+        this.view.yaxisExt[this.valueFormatterItem.index].formatterCfg = this.valueFormatterItem.formatterCfg
+      }
+      this.calcData(true)
+      this.closeValueFormatter()
     }
   }
 }