feat(视图):增加标题文字图标

2026-05-23 13:58:26 +08:00 · 2021-05-17 12:14:27 +08:00
parent f8e1a1a7a3
commit e27baac6fd
8 changed files with 205 additions and 14 deletions
--- a/frontend/src/views/chart/components/normal/LabelNormal.vue
+++ b/frontend/src/views/chart/components/normal/LabelNormal.vue
@@ -0,0 +1,139 @@
+<template>
+  <div ref="tableContainer" :style="bg_class">
+    <p v-show="title_show" ref="title" :style="title_class">{{ chart.title }}</p>
+    <div
+      v-if="chart.data && chart.data.x && chart.data.x.length > 0 && chart.data.series && chart.data.series.length > 0 && chart.data.series[0].data && chart.data.series[0].data.length > 0"
+      id="label-content"
+      :style="content_class"
+    >
+      <p :style="label_class">
+        {{ chart.data.x[0] }}
+      </p>
+      <span :style="label_space">
+        <p v-for="item in chart.data.series" :key="item.name" :style="label_content_class">
+          {{ item.data[0] }}
+        </p>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { hexColorToRGBA } from '../../chart/util'
+
+export default {
+  name: 'LabelNormal',
+  props: {
+    chart: {
+      type: Object,
+      required: true
+    },
+    filter: {
+      type: Object,
+      required: false,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      height: 'auto',
+      splitHeight: '10px',
+      title_class: {
+        margin: '0 0',
+        width: '100%',
+        fontSize: '18px',
+        color: '#303133',
+        textAlign: 'left',
+        fontStyle: 'normal'
+      },
+      content_class: {
+        display: 'flex',
+        flex: 1,
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: 'auto'
+      },
+      label_class: {
+        margin: 0
+      },
+      label_content_class: {
+        margin: 0
+      },
+      label_space: {
+        marginTop: '10px',
+        textAlign: 'center'
+      },
+      bg_class: {
+        background: hexColorToRGBA('#ffffff', 0)
+      },
+      title_show: true
+    }
+  },
+  watch: {
+    chart() {
+      this.init()
+      this.calcHeight()
+    }
+  },
+  mounted() {
+    this.init()
+    this.calcHeight()
+  },
+  methods: {
+    init() {
+      const that = this
+      this.initStyle()
+      window.onresize = function() {
+        that.calcHeight()
+      }
+    },
+    calcHeight() {
+      const that = this
+      setTimeout(function() {
+        // const currentHeight = document.documentElement.clientHeight
+        // const tableMaxHeight = currentHeight - 56 - 40 - 84 - that.$refs.title.offsetHeight - 20
+        const currentHeight = that.$refs.tableContainer.offsetHeight
+        const contentHeight = currentHeight - that.$refs.title.offsetHeight
+        that.height = contentHeight + 'px'
+        that.content_class.height = that.height
+      }, 10)
+    },
+    initStyle() {
+      if (this.chart.customAttr) {
+        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
+        }
+        if (customAttr.size) {
+          this.label_class.fontSize = customAttr.size.dimensionFontSize + 'px'
+          this.label_content_class.fontSize = customAttr.size.quotaFontSize + 'px'
+          this.label_space.marginTop = customAttr.size.spaceSplit + 'px'
+        }
+      }
+      if (this.chart.customStyle) {
+        const customStyle = JSON.parse(this.chart.customStyle)
+        if (customStyle.text) {
+          this.title_show = customStyle.text.show
+          this.title_class.fontSize = customStyle.text.fontSize + 'px'
+          this.title_class.color = customStyle.text.color
+          this.title_class.textAlign = customStyle.text.hPosition
+          this.title_class.fontStyle = customStyle.text.isItalic ? 'italic' : 'normal'
+        }
+        if (customStyle.background) {
+          this.bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .table-class>>>.body--wrapper{
+    background: rgba(1,1,1,0);
+  }
+</style>
--- a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
@@ -9,7 +9,7 @@
        <el-col>
          <el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">
            <div v-if="sourceType==='view' || sourceType==='panelEchart'">
-              <el-form-item v-show="chart.type && !chart.type.includes('table')" :label="$t('chart.color_case')" class="form-item">
+              <el-form-item v-show="chart.type && !chart.type.includes('table') && !chart.type.includes('text')" :label="$t('chart.color_case')" class="form-item">
                <el-select v-model="colorForm.value" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorCase">
                  <el-option v-for="option in colorCases" :key="option.value" :label="option.name" :value="option.value" style="display: flex;align-items: center;">
                    <div style="float: left">
@@ -19,6 +19,13 @@
                  </el-option>
                </el-select>
              </el-form-item>
+
+              <el-form-item v-show="(chart.type && chart.type.includes('text')) || sourceType==='panelTable'" :label="$t('chart.dimension_color')" class="form-item">
+                <colorPicker v-model="colorForm.dimensionColor" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeColorCase" />
+              </el-form-item>
+              <el-form-item v-show="(chart.type && chart.type.includes('text')) || sourceType==='panelTable'" :label="$t('chart.quota_color')" class="form-item">
+                <colorPicker v-model="colorForm.quotaColor" style="margin-top: 6px;cursor: pointer;z-index: 1003;border: solid 1px black" @change="changeColorCase" />
+              </el-form-item>
            </div>
            <div v-if="sourceType==='view' || sourceType==='panelTable'">
              <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_header_bg')" class="form-item">
@@ -35,7 +42,7 @@
              </el-form-item>
            </div>

-            <el-form-item  :label="$t('chart.not_alpha')" class="form-item form-item-slider">
+            <el-form-item v-show="chart.type && !chart.type.includes('text')" :label="$t('chart.not_alpha')" class="form-item form-item-slider">
              <el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeColorCase" />
            </el-form-item>
          </el-form>
--- a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
@@ -113,6 +113,22 @@
              <el-slider v-model="sizeForm.gaugeEndAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase" />
            </el-form-item>
          </el-form>
+
+          <el-form v-show="chart.type && chart.type.includes('text')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">
+            <el-form-item :label="$t('chart.dimension_font_size')" class="form-item">
+              <el-select v-model="sizeForm.dimensionFontSize" :placeholder="$t('chart.dimension_font_size')" @change="changeBarSizeCase">
+                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+              </el-select>
+            </el-form-item>
+            <el-form-item :label="$t('chart.quota_font_size')" class="form-item">
+              <el-select v-model="sizeForm.quotaFontSize" :placeholder="$t('chart.quota_font_size')" @change="changeBarSizeCase">
+                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+              </el-select>
+            </el-form-item>
+            <el-form-item :label="$t('chart.space_split')" class="form-item">
+              <el-input-number v-model="sizeForm.spaceSplit" size="mini" @change="changeBarSizeCase" />
+            </el-form-item>
+          </el-form>
        </el-col>

        <el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.size') }}<i class="el-icon-setting el-icon--right" /></el-button>