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

frontend/src/icons/svg/text.svg

-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1620975566611" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10896" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M324.004571 749.44h278.729143c17.097143 0 27.830857-10.733714 27.830857-26.843429 0-16.091429-10.733714-27.172571-27.830857-27.172571H379.355429v-1.664l131.145142-128.457143c79.488-77.494857 103.314286-117.741714 103.314286-169.051428 0-77.147429-68.096-135.844571-158.994286-135.844572-71.442286 0-132.498286 38.912-152.96 97.938286-3.675429 11.062857-5.686857 20.790857-5.686857 29.184 0 16.768 10.057143 27.830857 26.496 27.830857 15.762286 0 22.473143-7.369143 27.501715-24.137143 2.688-10.404571 6.363429-20.114286 11.739428-28.525714 17.773714-30.171429 50.980571-48.969143 92.891429-48.969143 54.345143 0 97.609143 38.253714 97.609143 85.869714 0 38.582857-15.762286 64.402286-82.176 130.139429l-156.964572 156.982857c-14.08 13.750857-18.450286 22.454857-18.450286 34.541714 0 17.444571 11.410286 28.16 29.184 28.16z m523.574858 7.369143c102.637714 0 176.420571-60.032 176.420571-141.878857 0-66.413714-47.616-110.006857-124.105143-115.035429v-1.353143c63.725714-10.733714 103.314286-53.321143 103.314286-113.024 0-72.448-65.737143-125.110857-157.312-125.110857-68.754286 0-124.763429 30.537143-148.571429 80.493714a76.928 76.928 0 0 0-9.069714 36.900572c0 15.762286 10.733714 26.496 26.148571 26.496 15.104 0 22.162286-6.363429 27.190858-21.796572 14.409143-43.940571 51.309714-69.101714 102.290285-69.101714 60.050286 0 98.614857 31.524571 98.614857 79.835429 0 50.304-41.252571 83.510857-101.302857 83.510857h-36.882285c-15.762286 0-26.514286 9.728-26.514286 25.161143 0 15.085714 10.752 25.142857 26.514286 25.142857h37.558857c74.459429 0 118.729143 31.542857 118.729143 87.552 0 51.657143-46.262857 87.881143-112.694858 87.881143-57.691429 0-99.273143-25.490286-114.377142-69.778286-5.028571-14.409143-13.403429-21.12-27.501715-21.12-17.444571 0-28.836571 11.062857-28.836571 28.507429 0 11.739429 3.017143 22.473143 9.380571 34.194285 27.849143 53.010286 86.198857 82.523429 161.005715 82.523429z m-676.516572-0.658286c18.450286 0 30.848-12.068571 30.848-30.537143V296.96c0-21.796571-13.750857-33.865143-34.870857-33.865143-15.104 0-23.826286 4.699429-37.906286 13.750857L17.444571 349.293714C4.352 358.016 0 365.714286 0 376.795429c0 13.750857 10.057143 23.808 25.161143 23.808 8.722286 0 13.074286-2.669714 19.456-6.710858l95.250286-60.032h1.334857v391.753143c0 18.468571 11.410286 30.537143 29.860571 30.537143z" p-id="10897"></path></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1621224495563" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7328" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M376.795429 691.2c15.616 0 27.008-10.733714 27.008-27.337143v-46.848h1.316571c20.809143 45.878857 63.451429 74.514286 117.449143 74.514286 88.832 0 147.072-70.619429 147.072-179.620572s-58.569143-179.620571-146.413714-179.620571c-53.028571 0-96 28.964571-116.169143 74.203429h-1.627429v-166.290286c0-17.554286-11.062857-28.946286-27.337143-28.946286-16.274286 0-27.318857 11.373714-27.318857 28.946286v423.68c0 16.914286 10.422857 27.318857 26.020572 27.318857z m490.697142 0.329143c64.091429 0 118.765714-35.145143 137.325715-84.937143 1.938286-5.522286 2.925714-10.733714 2.925714-15.286857 0-13.988571-9.764571-23.753143-23.442286-23.753143-12.361143 0-18.870857 4.882286-26.020571 19.2-17.261714 37.101714-46.537143 57.270857-90.459429 57.270857-63.451429 0-105.106286-50.432-105.106285-131.785143 0-80.694857 41.654857-132.443429 105.106285-132.443428 41.965714 0 72.228571 19.858286 89.782857 57.929143 6.857143 13.659429 13.348571 18.541714 25.398858 18.541714 13.988571 0 23.753143-9.106286 23.753142-23.424 0-3.913143-0.969143-8.777143-2.267428-13.019429-16.274286-49.792-71.917714-87.533714-137.984-87.533714-96.950857 0-160.091429 71.259429-160.091429 180.278857 0 109.659429 63.780571 178.962286 161.078857 178.962286zM116.169143 691.2c49.444571 0 96.310857-27.008 115.84-68.662857h0.969143v42.313143c0.658286 15.926857 11.392 26.678857 26.697143 26.678857 15.597714 0 26.331429-10.733714 26.331428-27.977143v-215.405714c0-70.290286-51.401143-115.529143-133.394286-115.529143-60.854857 0-111.286857 26.697143-130.157714 68.022857-3.584 8.118857-5.851429 15.926857-5.851428 22.765714 0 14.317714 10.404571 23.424 24.722285 23.424 10.093714 0 17.554286-3.584 22.784-12.690285 17.554286-37.412571 45.220571-54.674286 87.204572-54.674286 50.102857 0 79.725714 27.977143 79.725714 73.216v27.337143l-103.808 5.851428C45.531429 491.428571 0 528.201143 0 588.068571 0 650.203429 47.506286 691.2 116.169143 691.2z m394.057143-47.177143c-61.184 0-104.777143-52.388571-104.777143-131.785143 0-79.725714 43.593143-132.114286 104.777143-132.114285 63.104 0 102.802286 51.090286 102.802285 131.785142 0 81.353143-39.68 132.114286-102.820571 132.114286z m-381.037715 1.956572c-43.611429 0-72.905143-23.771429-72.905142-58.898286 0-34.176 27.337143-56.630857 77.769142-60.196572l96.969143-6.180571v33.828571c0 51.419429-45.220571 91.428571-101.851428 91.428572z m700.891429 249.892571a39.168 39.168 0 0 0 39.04-39.058286 39.168 39.168 0 0 0-39.058286-39.04c-21.467429 0-39.04 17.572571-39.04 39.058286 0 21.467429 17.554286 39.04 39.058286 39.04z m154.88 0A39.168 39.168 0 0 0 1024 856.813714c0-21.467429-17.554286-39.04-39.04-39.04-21.485714 0-39.058286 17.572571-39.058286 39.058286 0 21.467429 17.572571 39.04 39.058286 39.04z m-309.76 0a38.948571 38.948571 0 0 0 39.04-39.058286 38.948571 38.948571 0 0 0-39.058286-39.04c-21.467429 0-39.04 17.572571-39.04 39.058286 0 21.467429 17.554286 39.04 39.04 39.04z m-154.898286 0a38.948571 38.948571 0 0 0 39.04-39.058286 38.948571 38.948571 0 0 0-39.04-39.04c-21.485714 0-39.058286 17.572571-39.058285 39.058286 0 21.467429 17.572571 39.04 39.058285 39.04z m-154.88 0a38.948571 38.948571 0 0 0 39.04-39.058286 38.948571 38.948571 0 0 0-39.058285-39.04c-21.467429 0-39.04 17.572571-39.04 39.058286 0 21.467429 17.572571 39.04 39.058285 39.04z m-154.88 0a39.241143 39.241143 0 0 0 39.350857-39.058286 39.222857 39.222857 0 0 0-78.409142 0c0 21.485714 17.554286 39.058286 39.04 39.058286z m-155.227428 0a38.948571 38.948571 0 0 0 39.04-39.058286 38.948571 38.948571 0 0 0-39.04-39.04c-21.467429 0-39.04 17.572571-39.04 39.058286 0 21.467429 17.554286 39.04 39.04 39.04z" p-id="7329"></path></svg>

frontend/src/lang/zh.js

@@ -710,7 +710,14 @@ export default {
     start_angle: '起始角度',
     end_angle: '结束角度',
     style_priority: '样式优先级',
-    dashboard: '仪表盘'
+    dashboard: '仪表盘',
+    dimension_color: '维度颜色',
+    quota_color: '指标颜色',
+    dimension_font_size: '维度字体大小',
+    quota_font_size: '指标字体大小',
+    space_split: '维度/指标间隔',
+    only_one_quota: '仅支持1个指标',
+    only_one_result: '仅显示第1个计算结果'
   },
   dataset: {
     datalist: '数据集',

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

@@ -5,7 +5,9 @@ export const DEFAULT_COLOR_CASE = {
   tableHeaderBgColor: '#4e81bb',
   tableItemBgColor: '#c6d9f0',
   tableFontColor: '#000000',
-  tableStripe: true
+  tableStripe: true,
+  dimensionColor: '#000000',
+  quotaColor: '#000000'
 }
 export const DEFAULT_SIZE = {
   barDefault: true,
@@ -28,7 +30,10 @@ export const DEFAULT_SIZE = {
   gaugeMin: 0,
   gaugeMax: 100,
   gaugeStartAngle: 225,
-  gaugeEndAngle: -45
+  gaugeEndAngle: -45,
+  dimensionFontSize: 18,
+  quotaFontSize: 18,
+  spaceSplit: 10
 }
 export const DEFAULT_LABEL = {
   show: false,

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

@@ -32,8 +32,10 @@ export function baseGaugeOption(chart_option, chart) {
       // detail
       if (customAttr.label) {
         const label = JSON.parse(JSON.stringify(customAttr.label))
-        label.formatter = label.gaugeFormatter
-        chart_option.series[0].detail = label
+        chart_option.series[0].detail.show = label.show
+        chart_option.series[0].detail.fontSize = label.fontSize
+        chart_option.series[0].detail.color = label.color
+        chart_option.series[0].detail.formatter = label.gaugeFormatter
       }
       chart_option.series[0].type = 'gauge'
       // color

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

+<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>

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>

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>

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

@@ -89,7 +89,7 @@
             </el-form-item>
           </el-form>
         </div>
-        <div style="height: 30%;overflow:auto" class="padding-lr">
+        <div style="height: 25%;overflow:auto" class="padding-lr">
           <span>{{ $t('chart.chart_type') }}</span>
           <el-row>
             <div class="chart-type">
@@ -125,6 +125,19 @@
             </div>
           </el-row>
         </div>
+        <el-row style="padding: 4px 6px;color: #909399;">
+          <span>
+            <span v-show="chart.type && (chart.type.includes('pie') || chart.type.includes('funnel'))">
+              Tips: {{ $t('chart.only_one_quota') }}
+            </span>
+            <span v-show="chart.type && (chart.type.includes('text'))">
+              Tips: {{ $t('chart.only_one_result') }}
+            </span>
+            <span v-show="chart.type && chart.type.includes('gauge')">
+              Tips: {{ $t('chart.only_one_quota') }},{{ $t('chart.only_one_result') }}
+            </span>
+          </span>
+        </el-row>
         <div style="height: 40%;overflow:hidden;border-top: 1px solid #e6e6e6">
           <el-row class="padding-lr">
             <span>{{ $t('chart.style_priority') }}</span>
@@ -137,12 +150,12 @@
             <el-tab-pane :label="$t('chart.shape_attr')" class="padding-lr">
               <color-selector class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
               <size-selector class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />
-              <label-selector v-show="!view.type.includes('table')" class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
-              <tooltip-selector v-show="!view.type.includes('table')" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
+              <label-selector v-show="!view.type.includes('table') && !view.type.includes('text')" class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
+              <tooltip-selector v-show="!view.type.includes('table') && !view.type.includes('text')" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
             </el-tab-pane>
             <el-tab-pane :label="$t('chart.module_style')" class="padding-lr">
               <title-selector class="attr-selector" :chart="chart" @onTextChange="onTextChange" />
-              <legend-selector v-show="!view.type.includes('table')" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
+              <legend-selector v-show="!view.type.includes('table') && !view.type.includes('text')" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
               <x-axis-selector v-show="view.type.includes('bar') || view.type.includes('line')" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
               <y-axis-selector v-show="view.type.includes('bar') || view.type.includes('line')" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
               <background-color-selector class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
@@ -203,8 +216,9 @@
             </el-row>
           </el-row>
           <div ref="imageWrapper" style="height: 100%">
-            <chart-component v-if="chart.type && !chart.type.includes('table')" :chart-id="chart.id" :chart="chart" class="chart-class" />
+            <chart-component v-if="chart.type && !chart.type.includes('table') && !chart.type.includes('text')" :chart-id="chart.id" :chart="chart" class="chart-class" />
             <table-normal v-if="chart.type && chart.type.includes('table')" :chart="chart" class="table-class" />
+            <label-normal v-if="chart.type && chart.type.includes('text')" :chart="chart" class="table-class" />
           </div>
         </el-row>
       </el-col>
@@ -289,11 +303,12 @@ import BackgroundColorSelector from '../components/component-style/BackgroundCol
 import QuotaFilterEditor from '../components/filter/QuotaFilterEditor'
 import DimensionFilterEditor from '../components/filter/DimensionFilterEditor'
 import TableNormal from '../components/table/TableNormal'
+import LabelNormal from '../components/normal/LabelNormal'
 import html2canvas from 'html2canvas'
 
 export default {
   name: 'ChartEdit',
-  components: { DimensionFilterEditor, TableNormal, DatasetChartDetail, QuotaFilterEditor, BackgroundColorSelector, FilterItem, XAxisSelector, YAxisSelector, TooltipSelector, LabelSelector, LegendSelector, TitleSelector, SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable },
+  components: { LabelNormal, DimensionFilterEditor, TableNormal, DatasetChartDetail, QuotaFilterEditor, BackgroundColorSelector, FilterItem, XAxisSelector, YAxisSelector, TooltipSelector, LabelSelector, LegendSelector, TitleSelector, SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable },
   props: {
     param: {
       type: Object,