From d2a12087e2f09280905eb2968d99ab4b3f5df619 Mon Sep 17 00:00:00 2001
From: qianming <isqianming@163.com>
Date: Fri, 24 Mar 2023 17:04:45 +0800
Subject: [PATCH] =?UTF-8?q?feat--=E5=88=BB=E5=BA=A6=E5=B0=BA=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 report-ui/src/mixins/queryform.js             |   3 +-
 .../scaleCharts/widget-scale-horizontal.js    | 506 ++++++++++++++++
 ...dget-scale.js => widget-scale-vertical.js} |  34 +-
 .../bigscreenDesigner/designer/tools/main.js  |   6 +-
 .../widget/scale/widgetScaleHorizontal.vue    | 557 ++++++++++++++++++
 ...idgetScale.vue => widgetScaleVertical.vue} |  47 +-
 .../designer/widget/temp.vue                  |   6 +-
 .../designer/widget/widget.vue                |   6 +-
 8 files changed, 1136 insertions(+), 29 deletions(-)
 create mode 100644 report-ui/src/views/bigscreenDesigner/designer/tools/configure/scaleCharts/widget-scale-horizontal.js
 rename report-ui/src/views/bigscreenDesigner/designer/tools/configure/scaleCharts/{widget-scale.js => widget-scale-vertical.js} (95%)
 create mode 100644 report-ui/src/views/bigscreenDesigner/designer/widget/scale/widgetScaleHorizontal.vue
 rename report-ui/src/views/bigscreenDesigner/designer/widget/scale/{widgetScale.vue => widgetScaleVertical.vue} (92%)

diff --git a/report-ui/src/mixins/queryform.js b/report-ui/src/mixins/queryform.js
index c013fac1..4004384c 100644
--- a/report-ui/src/mixins/queryform.js
+++ b/report-ui/src/mixins/queryform.js
@@ -122,7 +122,8 @@ export default {
         return this.barOrLineChartFn(params.chartProperties, data);
       } else if (
         chartType == "widget-piechart" ||
-        chartType == "widget-funnel"
+        chartType == "widget-funnel" ||
+        chartType == "widget-scale"
       ) {
         return this.piechartFn(params.chartProperties, data);
       } else if (chartType == "widget-text") {
diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/scaleCharts/widget-scale-horizontal.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/scaleCharts/widget-scale-horizontal.js
new file mode 100644
index 00000000..9a2f7d01
--- /dev/null
+++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/scaleCharts/widget-scale-horizontal.js
@@ -0,0 +1,506 @@
+
+export const widgetScaleHorizontal = {
+  code: 'widget-scale-horizontal',
+  type: 'scaleCharts',
+  tabName: '刻度尺',
+  label: '横刻度尺',
+  icon: 'iconicon_tubiao_bingtu',
+  options: {
+    // 配置
+    setup: [
+      {
+        type: 'el-input-text',
+        label: '图层名称',
+        name: 'layerName',
+        required: false,
+        placeholder: '',
+        value: '横刻度尺',
+      },
+      {
+        type: 'vue-color',
+        label: '背景颜色',
+        name: 'background',
+        required: false,
+        placeholder: '',
+        value: ''
+      },
+      [
+        {
+          name: '标题设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '标题显示',
+              name: 'isNoTitle',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: '标题名',
+              name: 'titleText',
+              required: false,
+              placeholder: '',
+              value: '',
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'textColor',
+              required: false,
+              placeholder: '',
+              value: '#FFD700'
+            },
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'textFontSize',
+              required: false,
+              placeholder: '',
+              value: 20
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'textFontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'normal', name: '正常' },
+                { code: 'bold', name: '粗体' },
+                { code: 'bolder', name: '特粗体' },
+                { code: 'lighter', name: '细体' }
+              ],
+              value: 'normal'
+            },
+            {
+              type: 'el-select',
+              label: '字体风格',
+              name: 'textFontStyle',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'normal', name: '正常' },
+                { code: 'italic', name: 'italic斜体' },
+                { code: 'oblique', name: 'oblique斜体' },
+              ],
+              value: 'normal'
+            },
+            {
+              type: 'el-select',
+              label: '字体位置',
+              name: 'textAlign',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'center', name: '居中' },
+                { code: 'left', name: '左对齐' },
+                { code: 'right', name: '右对齐' },
+              ],
+              value: 'center'
+            },
+            {
+              type: 'el-input-text',
+              label: '副标题名',
+              name: 'subText',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'subTextColor',
+              required: false,
+              placeholder: '',
+              value: 'rgba(30, 144, 255, 1)'
+            },
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'subTextFontSize',
+              required: false,
+              placeholder: '',
+              value: 20
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'subTextFontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'normal', name: '正常' },
+                { code: 'bold', name: '粗体' },
+                { code: 'bolder', name: '特粗体' },
+                { code: 'lighter', name: '细体' }
+              ],
+              value: 'normal'
+            },
+            {
+              type: 'el-select',
+              label: '字体风格',
+              name: 'subTextFontStyle',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'normal', name: '正常' },
+                { code: 'italic', name: 'italic斜体' },
+                { code: 'oblique', name: 'oblique斜体' },
+              ],
+              value: 'normal'
+            },
+          ],
+        },
+        {
+          name: '刻度设定',
+          list: [
+            {
+              type: 'el-switch',
+              label: '刻度显示',
+              name: 'isShowScale',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-number',
+              label: '最大刻度',
+              name: 'maxScale',
+              require: false,
+              placeholder: '',
+              value: 100,
+            },
+            {
+              type: 'vue-color',
+              label: '刻度颜色',
+              name: 'scaleColor',
+              required: false,
+              placeholder: '',
+              value: 'rgba(56, 128, 138,1)'
+            },
+            {
+              type: 'el-input-number',
+              label: '刻度宽度',
+              name: 'scaleBarWidth',
+              required: false,
+              placeholder: '',
+              value: 2,
+            },
+            {
+              type: 'el-input-number',
+              label: '刻度值字号',
+              name: 'scaleFontSize',
+              required: false,
+              placeholder: '',
+              value: 16,
+            },
+            {
+              type: 'vue-color',
+              label: '刻度值颜色',
+              name: 'scaleDataColor',
+              required: false,
+              placeholder: '',
+              value: 'rgba(56, 128, 138,1)'
+            },
+            {
+              type: 'el-select',
+              label: '刻度值粗细',
+              name: 'scaleFontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'normal', name: '正常' },
+                { code: 'bold', name: '粗体' },
+                { code: 'bolder', name: '特粗体' },
+                { code: 'lighter', name: '细体' }
+              ],
+              value: 'normal'
+            },
+          ],
+        },
+        {
+          name: '外框设置',
+          list: [
+            {
+              type: 'el-input-number',
+              label: '宽度',
+              name: 'outBarWidth',
+              required: false,
+              placeholder: '',
+              value: 45,
+            },
+            {
+              type: 'vue-color',
+              label: '颜色',
+              name: 'outBarColor',
+              require: false,
+              placeholder: '',
+              value: '#00FEFF',
+            },
+            {
+              type: 'el-slider',
+              label: '圆角',
+              name: 'outBarRadius',
+              require: false,
+              placeholder: '',
+              value: 50,
+            },
+          ],
+        },
+        {
+          name: '内框设置',
+          list: [
+            {
+              type: 'el-input-number',
+              label: '宽度',
+              name: 'inBarWidth',
+              required: false,
+              placeholder: '',
+              value: 35,
+            },
+            {
+              type: 'vue-color',
+              label: '空白区颜色',
+              name: 'inBarColor',
+              require: false,
+              placeholder: '',
+              value: 'rgba(56, 128, 138,1)',
+            },
+            {
+              type: 'el-slider',
+              label: '圆角',
+              name: 'inBarRadius',
+              require: false,
+              placeholder: '',
+              value: 50,
+            },
+          ],
+        },
+        {
+          name: '数值设定',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShow',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-number',
+              label: '位置',
+              name: 'fontDistance',
+              required: false,
+              placeholder: '',
+              value: 20,
+            },
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'fontSize',
+              required: false,
+              placeholder: '',
+              value: 16,
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'fontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'normal', name: '正常' },
+                { code: 'bold', name: '粗体' },
+                { code: 'bolder', name: '特粗体' },
+                { code: 'lighter', name: '细体' }
+              ],
+              value: 'normal'
+            },
+          ],
+        },
+        {
+          name: '渐变色',
+          list: [
+            {
+              type: 'vue-color',
+              label: '0%',
+              name: 'bar0Color',
+              required: false,
+              placeholder: '',
+              value: '#00FEFF'
+            },
+            {
+              type: 'vue-color',
+              label: '30%',
+              name: 'bar30Color',
+              required: false,
+              placeholder: '',
+              value: '#93FE94'
+            },
+            {
+              type: 'vue-color',
+              label: '70%',
+              name: 'bar70Color',
+              required: false,
+              placeholder: '',
+              value: '#E4D225'
+            },
+            {
+              type: 'vue-color',
+              label: '100%',
+              name: 'bar100Color',
+              required: false,
+              placeholder: '',
+              value: '#E01F28'
+            },
+          ],
+        },
+        {
+          name: '提示语设置',
+          list: [
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'tipFontSize',
+              required: false,
+              placeholder: '',
+              value: 16
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'tipsColor',
+              required: false,
+              placeholder: '',
+              value: '#00FEFF'
+            },
+          ],
+        },
+        {
+          name: '坐标轴边距设置',
+          list: [
+            {
+              type: 'el-slider',
+              label: '左边距(像素)',
+              name: 'marginLeft',
+              required: false,
+              placeholder: '',
+              value: 10,
+            }, {
+              type: 'el-slider',
+              label: '顶边距(像素)',
+              name: 'marginTop',
+              required: false,
+              placeholder: '',
+              value: 0,
+            }, {
+              type: 'el-slider',
+              label: '右边距(像素)',
+              name: 'marginRight',
+              required: false,
+              placeholder: '',
+              value: 0,
+            }, {
+              type: 'el-slider',
+              label: '底边距(像素)',
+              name: 'marginBottom',
+              required: false,
+              placeholder: '',
+              value: 40,
+            },
+          ],
+        },
+      ],
+    ],
+    // 数据
+    data: [
+      {
+        type: 'el-radio-group',
+        label: '数据类型',
+        name: 'dataType',
+        require: false,
+        placeholder: '',
+        selectValue: true,
+        selectOptions: [
+          {
+            code: 'staticData',
+            name: '静态数据',
+          },
+          {
+            code: 'dynamicData',
+            name: '动态数据',
+          },
+        ],
+        value: 'staticData',
+      },
+      {
+        type: 'el-input-number',
+        label: '刷新时间(毫秒)',
+        name: 'refreshTime',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'dynamicData',
+        value: 5000
+      },
+      {
+        type: 'el-button',
+        label: '静态数据',
+        name: 'staticData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'staticData',
+        value: [{"num": 50 }]
+      },
+      {
+        type: 'dycustComponents',
+        label: '',
+        name: 'dynamicData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        chartType: 'widget-scale',
+        relactiveDomValue: 'dynamicData',
+        dictKey: 'TEXT_PROPERTIES',
+        value: '',
+      },
+    ],
+    // 坐标
+    position: [
+      {
+        type: 'el-input-number',
+        label: '左边距',
+        name: 'left',
+        required: false,
+        placeholder: '',
+        value: 0,
+      },
+      {
+        type: 'el-input-number',
+        label: '上边距',
+        name: 'top',
+        required: false,
+        placeholder: '',
+        value: 0,
+      },
+      {
+        type: 'el-input-number',
+        label: '宽度',
+        name: 'width',
+        required: false,
+        placeholder: '该容器在1920px大屏中的宽度',
+        value: 400,
+      },
+      {
+        type: 'el-input-number',
+        label: '高度',
+        name: 'height',
+        required: false,
+        placeholder: '该容器在1080px大屏中的高度',
+        value: 250,
+      },
+    ],
+  }
+}
diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/scaleCharts/widget-scale.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/scaleCharts/widget-scale-vertical.js
similarity index 95%
rename from report-ui/src/views/bigscreenDesigner/designer/tools/configure/scaleCharts/widget-scale.js
rename to report-ui/src/views/bigscreenDesigner/designer/tools/configure/scaleCharts/widget-scale-vertical.js
index 483f2960..35acd379 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/scaleCharts/widget-scale.js
+++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/scaleCharts/widget-scale-vertical.js
@@ -1,9 +1,9 @@
 
-export const widgetScale = {
-  code: 'widget-scale',
+export const widgetScaleVertical = {
+  code: 'widget-scale-vertical',
   type: 'scaleCharts',
   tabName: '刻度尺',
-  label: '刻度尺',
+  label: '竖刻度尺',
   icon: 'iconicon_tubiao_bingtu',
   options: {
     // 配置
@@ -14,15 +14,7 @@ export const widgetScale = {
         name: 'layerName',
         required: false,
         placeholder: '',
-        value: '刻度尺',
-      },
-      {
-        type: 'el-switch',
-        label: '竖展示',
-        name: 'verticalShow',
-        required: false,
-        placeholder: '',
-        value: false,
+        value: '竖刻度尺',
       },
       {
         type: 'vue-color',
@@ -164,6 +156,14 @@ export const widgetScale = {
         {
           name: '刻度设定',
           list: [
+            {
+              type: 'el-switch',
+              label: '刻度显示',
+              name: 'isShowScale',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
             {
               type: 'el-input-number',
               label: '最大刻度',
@@ -289,6 +289,14 @@ export const widgetScale = {
               placeholder: '',
               value: true,
             },
+            {
+              type: 'el-input-number',
+              label: '位置',
+              name: 'fontDistance',
+              required: false,
+              placeholder: '',
+              value: 0,
+            },
             {
               type: 'el-input-number',
               label: '字体字号',
@@ -456,7 +464,7 @@ export const widgetScale = {
         chartType: 'widget-scale',
         relactiveDomValue: 'dynamicData',
         dictKey: 'TEXT_PROPERTIES',
-        value: '',
+        value: null,
       },
     ],
     // 坐标
diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/main.js b/report-ui/src/views/bigscreenDesigner/designer/tools/main.js
index 288a466f..a0532f86 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/tools/main.js
+++ b/report-ui/src/views/bigscreenDesigner/designer/tools/main.js
@@ -41,7 +41,8 @@ import { widgetBarLineStack } from "./configure/barlineCharts/widget-bar-line-st
 import { widgetSelect } from "./configure/form/widget-select";
 import { widgetInput } from "./configure/form/widget-input";
 import { widgetFormTime } from "./configure/form/widget-form-time";
-import {widgetScale} from "./configure/scaleCharts/widget-scale";
+import {widgetScaleVertical} from "./configure/scaleCharts/widget-scale-vertical";
+import {widgetScaleHorizontal} from "./configure/scaleCharts/widget-scale-horizontal"
 
 export const widgetTool = [
   // type=html类型的组件
@@ -76,7 +77,8 @@ export const widgetTool = [
   widgetHeatmap,
   widgetRadar,
   widgetBarLineStack,
-  widgetScale,
+  widgetScaleVertical,
+  widgetScaleHorizontal,
   widgetSelect,
   widgetInput,
   widgetFormTime
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/scale/widgetScaleHorizontal.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/scale/widgetScaleHorizontal.vue
new file mode 100644
index 00000000..5d5a521b
--- /dev/null
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/scale/widgetScaleHorizontal.vue
@@ -0,0 +1,557 @@
+<template>
+  <div :style="styleObj">
+    <v-chart :options="options" autoresize/>
+  </div>
+</template>
+
+<script>
+import echarts from "echarts";
+import {eventBusParams} from "@/utils/screen";
+
+let scale = [];
+let max;
+let min;
+let Gradient = [];
+
+export default {
+  name: "widgetScaleHorizontal",
+  components: {},
+  props: {
+    value: Object,
+    ispreview: Boolean,
+  },
+  data() {
+    return {
+      options: {
+        yAxis: [
+          {
+            show: false,
+            min: -10,
+            max: 10,
+            data: []
+          },
+          {
+            show: false,
+            min: -10,
+            max: 10,
+            data: []
+          },
+          {
+            show: false,
+            min: -10,
+            max: 10,
+            data: []
+          },
+          { // 刻度位置
+            show: false,
+            min: -3,
+            max: 10,
+            splitLine: {
+              lineStyle: {
+                color: 'rgba(56, 128, 138,1)',
+              }
+            }
+          },
+        ],
+        xAxis: [
+          {
+            type: "value",
+            show: false,
+            min: 0,
+            max: max,
+            data: []
+          }, {
+            type: "value",
+            show: false,
+            min: 0,
+            max: max,
+            data: []
+          }, {
+            type: "value",
+            show: false,
+            min: 0,
+            max: max,
+            data: []
+          },
+          {
+            show: false,
+            data: [],
+            min: 0,
+            max: max,
+            axisLine: {
+              show: false
+            },
+          },
+          {
+            show: false,
+            min: 0,
+            max: max,
+          },
+        ],
+        series: [
+          {
+            name: "值",
+            type: "bar",
+            yAxisIndex : 0,
+            barWidth: 35,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, Gradient),
+                barBorderRadius: 50,
+              }
+            },
+            z: 2,
+            data: [
+              {
+                label: {
+                  normal: {
+                    show: true,
+                    position: "bottom",
+                    backgroundColor: {},
+                    width: 10,
+                    height: 50,
+                    rich: {
+                      back: {
+                        align: 'center',
+                        lineHeight: 50,
+                        fontSize: 16,
+                        fontFamily: 'digifacewide',
+                      },
+                    }
+                  }
+                }
+              }
+            ],
+          },
+          {
+            name: '白框',
+            type: 'bar',
+            yAxisIndex : 1,
+            barGap: '-100%',
+            data: [max - 1],
+            barWidth: 35,
+            itemStyle: {
+              normal: {
+                color: '#0C2F6F',
+                barBorderRadius: 50,
+              }
+            },
+            z: 1
+          },
+          {
+            name: '外框',
+            type: 'bar',
+            yAxisIndex: 2,
+            barGap: '-100%',
+            data: [max],
+            barWidth: 45,
+            itemStyle: {
+              normal: {
+                color: 'rgba(56, 128, 138,1)',
+                barBorderRadius: 50,
+              }
+            },
+            z: 0
+          },
+          {
+            name: '刻度',
+            type: 'bar',
+            yAxisIndex: 3,
+            xAxisIndex: 3,
+            label: {
+              normal: {
+                show: true,
+                position: 'top',
+                distance: 10,
+                color: 'rgba(56, 128, 138,1)',
+                fontSize: 16,
+                fontWeight: 'normal',
+                formatter: function (params) {
+                  if (params.dataIndex % 10 === 0) {
+                    return params.dataIndex;
+                  } else if (params.dataIndex == max) {
+                    return params.dataIndex;
+                  } else {
+                    return ""
+                  }
+                }
+              }
+            },
+            barGap: '-40%',
+            data: scale,
+            barWidth: 2,
+            itemStyle: {
+              normal: {
+                color: 'rgba(56, 128, 138,1)',
+              }
+            },
+            z: 0
+          }
+        ],
+      },
+      optionsStyle: {}, // 样式
+      optionsData: {}, // 数据
+      optionsCollapse: {}, // 图标属性
+      optionsSetup: {},
+    };
+  },
+  computed: {
+    styleObj() {
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        width: this.optionsStyle.width + "px",
+        height: this.optionsStyle.height + "px",
+        left: this.optionsStyle.left + "px",
+        top: this.optionsStyle.top + "px",
+        background: this.optionsSetup.background,
+      };
+    },
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.optionsStyle = val.position;
+        this.optionsData = val.data;
+        this.optionsCollapse = val.collapse;
+        this.optionsSetup = val.setup;
+        this.editorOptions();
+      },
+      deep: true,
+    },
+  },
+  created() {
+    this.optionsStyle = this.value.position;
+    this.optionsData = this.value.data;
+    this.optionsCollapse = this.value.collapse;
+    this.optionsSetup = this.value.setup;
+    this.editorOptions();
+    eventBusParams(
+      this.optionsSetup,
+      this.optionsData,
+      (dynamicData, optionsSetup) => {
+        this.getEchartData(dynamicData, optionsSetup);
+      }
+    );
+  },
+  methods: {
+    // 修改图标options属性
+    editorOptions() {
+      this.setOptionsTitle();
+      this.setOptionsMaxScale();
+      this.setOptionsXAxis();
+      this.setOptionsScale();
+      this.setOptionsOutBar();
+      this.setOptionsMargin();
+      this.setOptionsData();
+      this.setOptionsInBar();
+    },
+    // 标题设置
+    setOptionsTitle() {
+      const optionsSetup = this.optionsSetup;
+      const title = {};
+      title.text = optionsSetup.titleText;
+      title.show = optionsSetup.isNoTitle;
+      title.left = optionsSetup.textAlign;
+      title.textStyle = {
+        color: optionsSetup.textColor,
+        fontSize: optionsSetup.textFontSize,
+        fontWeight: optionsSetup.textFontWeight,
+        fontStyle: optionsSetup.textFontStyle,
+      };
+      title.subtext = optionsSetup.subText;
+      title.subtextStyle = {
+        color: optionsSetup.subTextColor,
+        fontWeight: optionsSetup.subTextFontWeight,
+        fontSize: optionsSetup.subTextFontSize,
+        fontStyle: optionsSetup.subTextFontStyle,
+      };
+      this.options.title = title;
+    },
+    // 最大刻度设置
+    setOptionsMaxScale() {
+      const optionsSetup = this.optionsSetup;
+      max = optionsSetup.maxScale;
+      scale = this.setScale(max);
+    },
+    setScale(max) {
+      let scale = [];
+      for (let i = 0; i <= max; i++) {
+        if (i <= 0 || i >= max) {
+          scale.push('-2')
+        } else {
+          if ((i - 10) % 20 === 0) {
+            scale.push('-2');
+          } else if ((i - 10) % 4 === 0) {
+            scale.push('-1');
+          } else {
+            scale.push('');
+          }
+        }
+      }
+      return scale;
+    },
+    setOptionsXAxis() {
+      this.options.xAxis[0].max = max;
+      this.options.xAxis[1].max = max;
+      this.options.xAxis[2].max = max;
+      this.options.xAxis[3].max = max;
+      this.options.xAxis[4].max = max;
+    },
+    // 刻度设定
+    setOptionsScale() {
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series[3];
+      // 刻度
+      // 显示
+      if (optionsSetup.isShowScale) {
+        series.data = scale;
+      }else {
+        series.data = 0;
+      }
+      series.barWidth = optionsSetup.scaleBarWidth;
+      series.itemStyle = {
+        normal: {
+          color: optionsSetup.scaleColor,
+        }
+      };
+      //刻度值
+      series.label = {
+        normal: {
+          show: true,
+          position: 'bottom',
+          distance: 10,
+          fontSize: optionsSetup.scaleFontSize,
+          color: optionsSetup.scaleDataColor,
+          fontWeight: optionsSetup.scaleFontWeight,
+          formatter: function (params) {
+            if (params.dataIndex % 10 === 0) {
+              return params.dataIndex;
+            } else if (params.dataIndex == max) {
+              return params.dataIndex;
+            } else {
+              return ""
+            }
+          }
+        }
+      };
+    },
+    // 外框设置
+    setOptionsOutBar() {
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series[2];
+      series.barWidth = optionsSetup.outBarWidth;
+      series.itemStyle = {
+        normal: {
+          color: optionsSetup.outBarColor,
+          barBorderRadius: optionsSetup.outBarRadius,
+        }
+      };
+      series.data = [max];
+    },
+    // 内框设置
+    setOptionsInBar() {
+      const optionsSetup = this.optionsSetup;
+      const series1 = this.options.series[1];
+      series1.barWidth = optionsSetup.inBarWidth;
+      series1.itemStyle = {
+        normal: {
+          color: optionsSetup.inBarColor,
+          barBorderRadius: optionsSetup.inBarRadius,
+        }
+      };
+      series1.data = [max - 1];
+      const series0 = this.options.series[0];
+      series0.barWidth = optionsSetup.inBarWidth;
+      series0.itemStyle = {
+        normal: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, Gradient),
+          barBorderRadius: optionsSetup.inBarRadius,
+        }
+      };
+    },
+    // 渐变色设置
+    setOptionsColor(inputValue, max) {
+      const optionsSetup = this.optionsSetup;
+      let gradient = [];
+      if (inputValue > (max * 0.7)) {
+        gradient.push(
+          {
+            offset: 0,
+            color: optionsSetup.bar0Color,
+          },
+          {
+            offset: 0.3,
+            color: optionsSetup.bar30Color,
+          },
+          {
+            offset: 0.7,
+            color: optionsSetup.bar70Color,
+          },
+          {
+            offset: 1,
+            color: optionsSetup.bar100Color,
+          })
+      } else if (inputValue > (max * 0.3)) {
+        gradient.push(
+          {
+            offset: 0,
+            color: optionsSetup.bar0Color,
+          },
+          {
+            offset: 0.5,
+            color: optionsSetup.bar30Color,
+          },
+          {
+            offset: 1,
+            color: optionsSetup.bar70Color,
+          })
+      } else {
+        gradient.push(
+          {
+            offset: 0,
+            color: optionsSetup.bar0Color,
+          },
+          {
+            offset: 1,
+            color: optionsSetup.bar30Color,
+          })
+      }
+      return gradient;
+    },
+    setShowValue(inputValue, max) {
+      let showValue = inputValue;
+      if (inputValue > max) {
+        showValue = max
+      } else {
+        if (inputValue < 0) {
+          showValue = 0
+        } else {
+          showValue = inputValue
+        }
+      }
+      return showValue;
+    },
+    // 提示语设置 tooltip
+    setOptionsTooltip() {
+      const optionsSetup = this.optionsSetup;
+      const tooltip = {
+        trigger: "item",
+        show: true,
+        textStyle: {
+          color: optionsSetup.lineColor,
+          fontSize: optionsSetup.tipFontSize,
+        },
+      };
+      this.options.tooltip = tooltip;
+    },
+    // 边距设置
+    setOptionsMargin() {
+      const optionsSetup = this.optionsSetup;
+      const grid = {
+        left: optionsSetup.marginLeft,
+        right: optionsSetup.marginRight,
+        bottom: optionsSetup.marginBottom,
+        top: optionsSetup.marginTop,
+        containLabel: true,
+      };
+      this.options.grid = grid;
+    },
+    setOptionsData() {
+      const optionsData = this.optionsData; // 数据类型 静态 or 动态
+      optionsData.dataType == "staticData"
+        ? this.staticDataFn(optionsData.staticData)
+        : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
+    },
+    // 静态数据
+    staticDataFn(val) {
+      const optionsSetup = this.optionsSetup;
+      const num = val[0]["num"];
+      // 渐变色
+      const gradient = this.setOptionsColor(num, optionsSetup.maxScale);
+      Gradient = gradient;
+      // 数值设定
+      const series = this.options.series[0];
+      const data = {
+        value: this.setShowValue(num, optionsSetup.maxScale),
+        label: {
+          normal: {
+            show: optionsSetup.isShow,
+            position: "right",
+            distance: optionsSetup.fontDistance,
+            width: 10,
+            height: 50,
+            formatter: '{back| ' + num + ' }',
+            rich: {
+              back: {
+                align: 'center',
+                lineHeight: 50,
+                fontSize: optionsSetup.fontSize,
+                fontWeight: optionsSetup.fontWeight,
+                color: gradient[gradient.length - 1].color,
+              },
+            }
+          }
+        }
+      }
+      series.data[0] = data;
+    },
+    dynamicDataFn(val, refreshTime) {
+      if (!val) return;
+      if (this.ispreview) {
+        this.getEchartData(val);
+        this.flagInter = setInterval(() => {
+          this.getEchartData(val);
+        }, refreshTime);
+      } else {
+        this.getEchartData(val);
+      }
+    },
+    getEchartData(val) {
+      const data = this.queryEchartsData(val);
+      data.then((res) => {
+        this.renderingFn(res);
+      });
+    },
+    renderingFn(val) {
+      const optionsSetup = this.optionsSetup;
+      const num = val[0].value;
+      // 渐变色
+      const gradient = this.setOptionsColor(num, optionsSetup.maxScale);
+      Gradient = gradient;
+      // 数值设定
+      const series = this.options.series;
+      const data = {
+        value: this.setShowValue(num, optionsSetup.maxScale),
+        label: {
+          normal: {
+            show: optionsSetup.isShow,
+            position: "right",
+            distance: optionsSetup.fontDistance,
+            width: 10,
+            height: 50,
+            formatter: '{back| ' + num + ' }',
+            rich: {
+              back: {
+                align: 'center',
+                lineHeight: 50,
+                fontSize: optionsSetup.fontSize,
+                fontWeight: optionsSetup.fontWeight,
+                color: gradient[gradient.length - 1].color,
+              },
+            }
+          }
+        }
+      }
+      series[0].data[0] = data;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.echarts {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/scale/widgetScale.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/scale/widgetScaleVertical.vue
similarity index 92%
rename from report-ui/src/views/bigscreenDesigner/designer/widget/scale/widgetScale.vue
rename to report-ui/src/views/bigscreenDesigner/designer/widget/scale/widgetScaleVertical.vue
index 7160ca46..9b21bd2c 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/scale/widgetScale.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/scale/widgetScaleVertical.vue
@@ -289,8 +289,13 @@ export default {
     setOptionsScale() {
       const optionsSetup = this.optionsSetup;
       const series = this.options.series[3];
-      //刻度
-      series.data = scale;
+      // 刻度
+      // 显示
+      if (optionsSetup.isShowScale) {
+        series.data = scale;
+      }else {
+        series.data = 0;
+      }
       series.barWidth = optionsSetup.scaleBarWidth;
       series.itemStyle = {
         normal: {
@@ -453,14 +458,14 @@ export default {
       const gradient = this.setOptionsColor(num, optionsSetup.maxScale);
       Gradient = gradient;
       // 数值设定
-      const series = this.options.series;
+      const series = this.options.series[0];
       const data = {
         value: this.setShowValue(num, optionsSetup.maxScale),
         label: {
           normal: {
             show: optionsSetup.isShow,
             position: "top",
-            backgroundColor: {},
+            distance: optionsSetup.fontDistance,
             width: 10,
             height: 50,
             formatter: '{back| ' + num + ' }',
@@ -470,14 +475,13 @@ export default {
                 lineHeight: 50,
                 fontSize: optionsSetup.fontSize,
                 fontWeight: optionsSetup.fontWeight,
-                fontFamily: 'digifacewide',
                 color: gradient[gradient.length - 1].color,
               },
             }
           }
         }
       }
-      series[0].data[0] = data;
+      series.data[0] = data;
     },
     dynamicDataFn(val, refreshTime) {
       if (!val) return;
@@ -497,11 +501,36 @@ export default {
       });
     },
     renderingFn(val) {
-      for (const key in this.options.series) {
-        if (this.options.series[key].type == "pie") {
-          this.options.series[key].data = val;
+      const optionsSetup = this.optionsSetup;
+      const num = val[0].value;
+      // 渐变色
+      const gradient = this.setOptionsColor(num, optionsSetup.maxScale);
+      Gradient = gradient;
+      // 数值设定
+      const series = this.options.series;
+      const data = {
+        value: this.setShowValue(num, optionsSetup.maxScale),
+        label: {
+          normal: {
+            show: optionsSetup.isShow,
+            position: "top",
+            distance: optionsSetup.fontDistance,
+            width: 10,
+            height: 50,
+            formatter: '{back| ' + num + ' }',
+            rich: {
+              back: {
+                align: 'center',
+                lineHeight: 50,
+                fontSize: optionsSetup.fontSize,
+                fontWeight: optionsSetup.fontWeight,
+                color: gradient[gradient.length - 1].color,
+              },
+            }
+          }
         }
       }
+      series[0].data[0] = data;
     },
   },
 };
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/temp.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/temp.vue
index 64ab0ddc..9f81ee1b 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/temp.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/temp.vue
@@ -43,7 +43,8 @@ import widgetBarLineStackChart from "./barline/widgetBarLineStackChart";
 import widgetSelect from "./form/widgetSelect";
 import widgetInput from "./form/widgetInput.vue";
 import widgetFormTime from "./form/widgetFormTime.vue";
-import widgetScale from "./scale/widgetScale.vue";
+import widgetScaleVertical from "./scale/widgetScaleVertical.vue";
+import widgetScaleHorizontal from "./scale/widgetScaleHorizontal.vue";
 
 export default {
   name: "WidgetTemp",
@@ -78,7 +79,8 @@ export default {
     widgetHeatmap,
     widgetRadar,
     widgetBarLineStackChart,
-    widgetScale,
+    widgetScaleVertical,
+    widgetScaleHorizontal,
     widgetSelect,
     widgetInput,
     widgetFormTime,
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue
index ce2f4d5f..9c0f16cc 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue
@@ -50,7 +50,8 @@ import widgetBarLineStackChart from "./barline/widgetBarLineStackChart";
 import widgetSelect from "./form/widgetSelect";
 import widgetInput from "./form/widgetInput.vue";
 import widgetFormTime from "./form/widgetFormTime.vue";
-import widgetScale from "./scale/widgetScale.vue";
+import widgetScaleVertical from "./scale/widgetScaleVertical.vue";
+import widgetScaleHorizontal from "./scale/widgetScaleHorizontal.vue";
 
 export default {
   name: "Widget",
@@ -85,7 +86,8 @@ export default {
     widgetHeatmap,
     widgetRadar,
     widgetBarLineStackChart,
-    widgetScale,
+    widgetScaleVertical,
+    widgetScaleHorizontal,
     widgetSelect,
     widgetInput,
     widgetFormTime,