feat(视图):图表类型新增：gauge

frontend/src/icons/svg/gauge.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="1620973439943" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="859" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M284.281905 870.936381c-85.162667-74.532571-134.339048-184.58819-134.339048-300.592762 0-215.79581 168.082286-391.168 374.881524-391.168s374.808381 175.37219 374.808381 391.168c0.073143 116.150857-49.371429 226.304-134.924191 300.592762L839.68 975.238095C952.124952 879.420952 1024 733.988571 1024 570.343619 1024 282.160762 800.329143 48.761905 524.166095 48.761905 248.003048 48.761905 24.380952 282.185143 24.380952 570.343619 24.84419 727.405714 92.696381 876.007619 209.334857 975.238095l74.971429-104.301714z" p-id="860"></path><path d="M148.821333 570.343619c0-215.79581 167.375238-391.168 373.321143-391.168 77.141333 0 148.699429 24.746667 208.432762 66.486857L804.571429 140.678095C723.72419 82.651429 626.639238 48.761905 522.142476 48.761905 247.125333 48.761905 24.380952 282.185143 24.380952 570.343619 24.380952 733.379048 95.963429 879.420952 207.945143 975.238095l74.654476-104.301714c-84.821333-74.532571-133.802667-184.58819-133.778286-300.592762z" p-id="861"></path><path d="M569.61219 627.492571c5.022476-7.119238 8.777143-15.11619 11.093334-23.576381L731.428571 268.190476 470.503619 523.873524a80.700952 80.700952 0 0 0-18.285714 18.139428c-23.113143 32.914286-15.408762 79.09181 16.822857 102.64381 32.256 23.576381 77.507048 15.725714 100.62019-17.164191h-0.048762z" p-id="862"></path></svg>

frontend/src/icons/svg/scatter.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="1620974835472" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="863" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M84.94909 930.182095V70.265905A40.521143 40.521143 0 0 0 44.671756 28.769524 40.521143 40.521143 0 0 0 4.370042 70.290286v901.193143c0 22.869333 17.16419 43.641905 39.936 43.641904h906.044952a42.130286 42.130286 0 0 0 41.155048-42.422857c0-22.869333-18.407619-42.398476-41.155048-42.398476H84.94909v-0.121905z" p-id="864"></path><path d="M44.306042 1019.367619c-24.380952 0-44.30019-21.528381-44.300191-48.030476V70.265905a45.348571 45.348571 0 0 1 12.702477-32.182857A45.543619 45.543619 0 0 1 44.647375 24.380952c12.092952 0.121905 23.771429 5.12 32.109715 13.677715 8.338286 8.582095 12.921905 20.406857 12.678095 32.329143V925.988571h861.037714c25.112381 0 45.519238 20.894476 45.519238 46.762667a46.665143 46.665143 0 0 1-45.397333 46.738286L44.306042 1019.367619z m0.243809-986.282667c-9.581714 0.121905-19.017143 4.096-25.746285 11.068953a36.425143 36.425143 0 0 0-10.191238 26.112v901.217524c0 21.625905 15.920762 39.277714 35.547428 39.277714h906.069334a37.936762 37.936762 0 0 0 36.815238-37.912381c0-21.016381-16.554667-38.058667-36.815238-38.058667H80.60928V70.265905c0.24381-9.703619-3.486476-19.260952-10.191238-26.233905a37.156571 37.156571 0 0 0-25.868191-10.947048zM877.939566 781.897143c-40.521143 0-73.362286-33.206857-73.362286-73.996191C804.57728 666.989714 837.418423 633.904762 877.963947 633.904762c40.521143 0 73.362286 33.084952 73.362285 73.99619 0 40.911238-32.841143 73.99619-73.386666 73.996191zM661.119756 394.630095c-63.146667 0-114.395429-51.736381-114.395428-115.395047 0-63.536762 51.346286-115.273143 114.395428-115.273143 63.049143 0 114.41981 51.736381 114.41981 115.273143 0 63.658667-51.370667 115.395048-114.41981 115.395047z" p-id="865"></path><path d="M479.115947 469.577143c-78.57981 0-142.506667 64.414476-142.506667 143.62819a143.262476 143.262476 0 0 0 142.384762 143.628191 140.921905 140.921905 0 0 0 86.479238-29.574095 143.896381 143.896381 0 0 0 55.905524-114.054096c0.121905-79.238095-63.780571-143.62819-142.262857-143.62819zM195.29728 855.04C154.727375 855.04 121.910613 821.833143 121.910613 781.04381 121.910613 740.132571 154.751756 707.047619 195.29728 707.047619c40.521143 0 73.362286 33.084952 73.362286 73.996191 0 40.911238-32.963048 73.99619-73.386667 73.99619z" p-id="866"></path></svg>

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>

frontend/src/lang/zh.js

@@ -706,7 +706,9 @@ export default {
     table_header_bg: '表头背景',
     table_item_bg: '表格背景',
     table_item_font_color: '字体颜色',
-    stripe: '斑马纹'
+    stripe: '斑马纹',
+    start_angle: '起始角度',
+    end_angle: '结束角度'
   },
   dataset: {
     datalist: '数据集',

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

@@ -24,14 +24,19 @@ export const DEFAULT_SIZE = {
   funnelWidth: 80,
   radarShape: 'polygon',
   tableTitleFontSize: 12,
-  tableItemFontSize: 12
+  tableItemFontSize: 12,
+  gaugeMin: 0,
+  gaugeMax: 100,
+  gaugeStartAngle: 225,
+  gaugeEndAngle: -45
 }
 export const DEFAULT_LABEL = {
   show: false,
   position: 'top',
   color: '#909399',
   fontSize: '10',
-  formatter: '{c}'
+  formatter: '{c}',
+  gaugeFormatter: '{value}'
 }
 export const DEFAULT_TOOLTIP = {
   show: true,
@@ -297,3 +302,39 @@ export const BASE_RADAR = {
     data: []
   }]
 }
+
+export const BASE_GAUGE = {
+  title: {
+    text: ''
+  },
+  // grid: {
+  //   containLabel: true
+  // },
+  tooltip: {},
+  legend: {
+    show: true,
+    type: 'scroll',
+    itemWidth: 10,
+    itemHeight: 10,
+    icon: 'rect'
+  },
+  series: [
+    {
+      name: '',
+      type: 'gauge',
+      startAngle: 225,
+      endAngle: -45,
+      min: 0,
+      max: 100,
+      progress: {
+        show: true
+      },
+      detail: {
+        show: true,
+        valueAnimation: true,
+        formatter: '{value}'
+      },
+      data: []
+    }
+  ]
+}

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

+import { componentStyle } from '../common/common'
+import { hexColorToRGBA } from '@/views/chart/chart/util'
+
+export function baseGaugeOption(chart_option, chart) {
+  // 处理shape attr
+  let customAttr = {}
+  if (chart.customAttr) {
+    customAttr = JSON.parse(chart.customAttr)
+    if (customAttr.color) {
+      chart_option.color = customAttr.color.colors
+    }
+    // tooltip
+    if (customAttr.tooltip) {
+      const tooltip = JSON.parse(JSON.stringify(customAttr.tooltip))
+      const reg = new RegExp('\n', 'g')
+      tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
+      chart_option.tooltip = tooltip
+    }
+  }
+  // 处理data
+  if (chart.data) {
+    chart_option.title.text = chart.title
+    if (chart.data.series.length > 0) {
+      chart_option.series[0].name = chart.data.series[0].name
+      // size
+      if (customAttr.size) {
+        chart_option.series[0].min = customAttr.size.gaugeMin
+        chart_option.series[0].max = customAttr.size.gaugeMax
+        chart_option.series[0].startAngle = customAttr.size.gaugeStartAngle
+        chart_option.series[0].endAngle = customAttr.size.gaugeEndAngle
+      }
+      // 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].type = 'gauge'
+      // color
+      chart_option.series[0].itemStyle = {
+        color: hexColorToRGBA(customAttr.color.colors[0], customAttr.color.alpha)
+      }
+      // data只取第一个
+      const y = {
+        name: chart.data.x[0],
+        value: chart.data.series[0].data[0]
+      }
+      chart_option.series[0].data.push(y)
+    }
+  }
+  // console.log(chart_option);
+  componentStyle(chart_option, chart)
+  return chart_option
+}

frontend/src/views/chart/components/ChartComponent.vue

@@ -5,12 +5,13 @@
 </template>
 
 <script>
-import { BASE_BAR, BASE_LINE, HORIZONTAL_BAR, BASE_PIE, BASE_FUNNEL, BASE_RADAR } from '../chart/chart'
+import { BASE_BAR, BASE_LINE, HORIZONTAL_BAR, BASE_PIE, BASE_FUNNEL, BASE_RADAR, BASE_GAUGE } from '../chart/chart'
 import { baseBarOption, stackBarOption, horizontalBarOption, horizontalStackBarOption } from '../chart/bar/bar'
 import { baseLineOption, stackLineOption } from '../chart/line/line'
 import { basePieOption, rosePieOption } from '../chart/pie/pie'
 import { baseFunnelOption } from '../chart/funnel/funnel'
 import { baseRadarOption } from '../chart/radar/radar'
+import { baseGaugeOption } from '../chart/gauge/gauge'
 import eventBus from '@/components/canvas/utils/eventBus'
 import { uuid } from 'vue-uuid'
 
@@ -91,6 +92,8 @@ export default {
         chart_option = baseFunnelOption(JSON.parse(JSON.stringify(BASE_FUNNEL)), chart)
       } else if (chart.type === 'radar') {
         chart_option = baseRadarOption(JSON.parse(JSON.stringify(BASE_RADAR)), chart)
+      } else if (chart.type === 'gauge') {
+        chart_option = baseGaugeOption(JSON.parse(JSON.stringify(BASE_GAUGE)), chart)
       }
       this.myEcharts(chart_option)
     },

frontend/src/views/chart/components/shape-attr/LabelSelector.vue

@@ -7,7 +7,7 @@
         trigger="click"
       >
         <el-col>
-          <el-form ref="labelForm" :model="labelForm" label-width="80px" size="mini">
+          <el-form v-show="chart.type && !chart.type.includes('gauge')" ref="labelForm" :model="labelForm" label-width="80px" size="mini">
             <el-form-item :label="$t('chart.show')" class="form-item">
               <el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>
             </el-form-item>
@@ -43,6 +43,28 @@
               <el-input v-model="labelForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr" />
             </el-form-item>
           </el-form>
+
+          <el-form v-show="chart.type && chart.type.includes('gauge')" ref="labelForm" :model="labelForm" label-width="80px" size="mini">
+            <el-form-item :label="$t('chart.show')" class="form-item">
+              <el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>
+            </el-form-item>
+            <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
+              <el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr">
+                <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.text_color')" class="form-item">
+              <colorPicker v-model="labelForm.color" style="margin-top: 6px;cursor: pointer;z-index: 999;border: solid 1px black" @change="changeLabelAttr" />
+            </el-form-item>
+            <el-form-item class="form-item">
+              <span slot="label">
+                <span class="span-box">
+                  <span>{{ $t('chart.content_formatter') }}</span>
+                </span>
+              </span>
+              <el-input v-model="labelForm.gaugeFormatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr" />
+            </el-form-item>
+          </el-form>
         </el-col>
 
         <el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.label') }}<i class="el-icon-setting el-icon--right" /></el-button>

frontend/src/views/chart/components/shape-attr/SizeSelector.vue

@@ -98,6 +98,21 @@
               </el-select>
             </el-form-item>
           </el-form>
+
+          <el-form v-show="chart.type && chart.type.includes('gauge')" ref="sizeFormGauge" :model="sizeForm" label-width="100px" size="mini">
+            <el-form-item :label="$t('chart.min')" class="form-item form-item-slider">
+              <el-input-number v-model="sizeForm.gaugeMin" size="mini" @change="changeBarSizeCase" />
+            </el-form-item>
+            <el-form-item :label="$t('chart.max')" class="form-item form-item-slider">
+              <el-input-number v-model="sizeForm.gaugeMax" size="mini" @change="changeBarSizeCase" />
+            </el-form-item>
+            <el-form-item :label="$t('chart.start_angle')" class="form-item form-item-slider">
+              <el-slider v-model="sizeForm.gaugeStartAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase" />
+            </el-form-item>
+            <el-form-item :label="$t('chart.end_angle')" class="form-item form-item-slider">
+              <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-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

@@ -100,23 +100,24 @@
                 @change="save(true)"
               >
                 <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
+                  <el-radio value="table-normal" label="table-normal"><svg-icon icon-class="table-normal" class="chart-icon" /></el-radio>
+                  <el-radio value="text" label="text"><svg-icon icon-class="text" class="chart-icon" /></el-radio>
                   <el-radio value="bar" label="bar"><svg-icon icon-class="bar" class="chart-icon" /></el-radio>
                   <el-radio value="bar-stack" label="bar-stack"><svg-icon icon-class="bar-stack" class="chart-icon" /></el-radio>
                   <el-radio value="bar-horizontal" label="bar-horizontal"><svg-icon icon-class="bar-horizontal" class="chart-icon" /></el-radio>
-                  <el-radio value="bar-stack-horizontal" label="bar-stack-horizontal"><svg-icon icon-class="bar-stack-horizontal" class="chart-icon" /></el-radio>
-                  <el-radio value="line" label="line"><svg-icon icon-class="line" class="chart-icon" /></el-radio>
                 </div>
                 <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
+                  <el-radio value="bar-stack-horizontal" label="bar-stack-horizontal"><svg-icon icon-class="bar-stack-horizontal" class="chart-icon" /></el-radio>
+                  <el-radio value="line" label="line"><svg-icon icon-class="line" class="chart-icon" /></el-radio>
                   <el-radio value="line-stack" label="line-stack"><svg-icon icon-class="line-stack" class="chart-icon" /></el-radio>
                   <el-radio value="pie" label="pie"><svg-icon icon-class="pie" class="chart-icon" /></el-radio>
                   <el-radio value="pie-rose" label="pie-rose"><svg-icon icon-class="pie-rose" class="chart-icon" /></el-radio>
+                </div>
+                <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
                   <el-radio value="funnel" label="funnel"><svg-icon icon-class="funnel" class="chart-icon" /></el-radio>
                   <el-radio value="radar" label="radar"><svg-icon icon-class="radar" class="chart-icon" /></el-radio>
-                </div>
-                <div>
-                  <el-radio value="table-normal" label="table-normal"><svg-icon icon-class="table-normal" class="chart-icon" /></el-radio>
-                  <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
-                  <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
+                  <el-radio value="gauge" label="gauge"><svg-icon icon-class="gauge" class="chart-icon" /></el-radio>
+                  <!--                  <el-radio value="scatter" label="scatter"><svg-icon icon-class="scatter" class="chart-icon" /></el-radio>-->
                   <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
                   <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
                 </div>