对比图更新

report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-bar-stack.js

@@ -1,6 +1,6 @@
 /*
  * @Descripttion: 柱状堆叠图
- * @version: 
+ * @version:
  * @Author: qianlishi
  * @Date: 2021-08-29 07:37:09
  * @LastEditors: qianlishi
@@ -350,7 +350,8 @@ export const widgetBarStack =  {
                 required: false,
                 placeholder: '',
                 value: '#fff',
-              }, {
+              },
+              {
                 type: 'el-switch',
                 label: '分割线显示',
                 name: 'isShowSplitLineY',
@@ -364,7 +365,6 @@ export const widgetBarStack =  {
                 required: false,
                 placeholder: '',
                 value: '#fff',
-
               }
             ],
           },

report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-line-compare.js

@@ -160,13 +160,29 @@ export const widgetLineCompare = {
               value: true,
             },
             {
-              type: 'el-input-number',
-              label: '数值间隔',
-              name: 'splitNumberX',
+              type: 'el-input-text',
+              label: '坐标名',
+              name: 'xName',
               required: false,
               placeholder: '',
               value: ''
             },
+            {
+              type: 'vue-color',
+              label: '坐标名颜色',
+              name: 'nameColorX',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '坐标字号',
+              name: 'nameFontSizeX',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
             {
               type: 'el-switch',
               label: '数值居中',
@@ -191,6 +207,14 @@ export const widgetLineCompare = {
               placeholder: '',
               value: 14,
             },
+            {
+              type: 'el-input-number',
+              label: '数值间隔',
+              name: 'splitNumberX',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
             {
               type: 'el-switch',
               label: '刻度线',
@@ -228,9 +252,40 @@ export const widgetLineCompare = {
               placeholder: '',
               value: true,
             },
+            {
+              type: 'el-input-text',
+              label: '坐标名',
+              name: 'textNameYTop',
+              require: false,
+              placeholder: '',
+              value: ''
+            },{
+              type: 'vue-color',
+              label: '坐标名颜色',
+              name: 'nameColorYTop',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
             {
               type: 'el-input-number',
-              label: '数值间隔',
+              label: '坐标字号',
+              name: 'namefontSizeYTop',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'el-switch',
+              label: '缩放',
+              name: 'scaleYTop',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-number',
+              label: '数值切分',
               name: 'splitNumberYTop',
               required: false,
               placeholder: '',
@@ -239,7 +294,7 @@ export const widgetLineCompare = {
             {
               type: 'vue-color',
               label: '数值颜色',
-              name: 'XcolorRight',
+              name: 'colorYTop',
               required: false,
               placeholder: '',
               value: '#fff',
@@ -247,7 +302,7 @@ export const widgetLineCompare = {
             {
               type: 'el-input-number',
               label: '数值字号',
-              name: 'fontSizeXRight',
+              name: 'fontSizeYTop',
               required: false,
               placeholder: '',
               value: 14,
@@ -255,31 +310,31 @@ export const widgetLineCompare = {
             {
               type: 'el-switch',
               label: '刻度线',
-              name: 'tickLineRight',
+              name: 'tickLineYTop',
               require: false,
               placeholder: '',
-              value: false,
+              value: true,
             },
             {
               type: 'el-switch',
-              label: 'X轴线',
-              name: 'xLineRight',
+              label: 'y轴线',
+              name: 'lineYTop',
               require: false,
               placeholder: '',
-              value: false,
+              value: true,
             },
             {
               type: 'vue-color',
               label: '轴颜色',
-              name: 'lineColorXRight',
+              name: 'lineColorYTop',
               required: false,
               placeholder: '',
               value: '#fff',
             },
             {
               type: 'el-switch',
-              label: '竖分割线',
-              name: 'SplitLineRight',
+              label: '分割线',
+              name: 'splitLineYTop',
               require: false,
               placeholder: '',
               value: false,
@@ -287,7 +342,7 @@ export const widgetLineCompare = {
             {
               type: 'vue-color',
               label: '分割线颜色',
-              name: 'SplitLineColorRight',
+              name: 'splitLineColorYTop',
               required: false,
               placeholder: '',
               value: '#fff',
@@ -295,85 +350,127 @@ export const widgetLineCompare = {
             {
               type: 'el-input-number',
               label: '分割线宽度',
-              name: 'SplitLinefontSizeRight',
+              name: 'splitLinefontSizeYTop',
               required: false,
               placeholder: '',
               value: 1,
             },
-            {
-              type: 'el-switch',
-              label: '边框线',
-              name: 'frameLineRight',
-              require: false,
-              placeholder: '',
-              value: false,
-            },
           ],
         },
         {
-          name: '下Y轴设置',
+          name: '下y轴设置',
           list: [
             {
               type: 'el-switch',
               label: '显示',
-              name: 'hideY',
+              name: 'isShowYBottom',
               required: false,
               placeholder: '',
               value: true,
             },
             {
+              type: 'el-input-text',
+              label: '坐标名',
+              name: 'textNameYBottom',
+              require: false,
+              placeholder: '',
+              value: ''
+            },{
               type: 'vue-color',
-              label: '数值颜色',
-              name: 'colorY',
+              label: '坐标名颜色',
+              name: 'nameColorYBottom',
               required: false,
               placeholder: '',
               value: '#fff',
             },
             {
               type: 'el-input-number',
-              label: '数值字号',
-              name: 'fontSizeY',
+              label: '坐标字号',
+              name: 'namefontSizeYBottom',
               required: false,
               placeholder: '',
               value: 14,
             },
             {
-              type: 'el-select',
-              label: '数值对齐',
-              name: 'textAlign',
+              type: 'el-switch',
+              label: '缩放',
+              name: 'scaleYBottom',
               required: false,
               placeholder: '',
-              selectOptions: [
-                {code: 'center', name: '居中'},
-                {code: 'left', name: '左对齐'},
-                {code: 'right', name: '右对齐'},
-              ],
-              value: 'center'
+              value: true,
+            },
+            {
+              type: 'el-input-number',
+              label: '数值切分',
+              name: 'splitNumberYBottom',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '数值颜色',
+              name: 'colorYBottom',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '数值字号',
+              name: 'fontSizeYBottom',
+              required: false,
+              placeholder: '',
+              value: 14,
             },
             {
               type: 'el-switch',
               label: '刻度线',
-              name: 'tickLineY',
+              name: 'tickLineYBottom',
               require: false,
               placeholder: '',
-              value: false,
+              value: true,
             },
             {
               type: 'el-switch',
-              label: 'Y轴线',
-              name: 'lineY',
+              label: 'y轴线',
+              name: 'lineYBottom',
               require: false,
               placeholder: '',
-              value: false,
+              value: true,
             },
             {
               type: 'vue-color',
               label: '轴颜色',
-              name: 'lineColorY',
+              name: 'lineColorYBottom',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-switch',
+              label: '分割线',
+              name: 'splitLineYBottom',
+              require: false,
+              placeholder: '',
+              value: false,
+            },
+            {
+              type: 'vue-color',
+              label: '分割线颜色',
+              name: 'splitLineColorYBottom',
               required: false,
               placeholder: '',
               value: '#fff',
             },
+            {
+              type: 'el-input-number',
+              label: '分割线宽度',
+              name: 'splitLinefontSizeYBottom',
+              required: false,
+              placeholder: '',
+              value: 1,
+            },
           ],
         },
         {
@@ -444,11 +541,19 @@ export const widgetLineCompare = {
           list: [
             {
               type: 'el-slider',
-              label: '左右边距(像素)',
-              name: 'marginLeftRight',
+              label: '左边距(像素)',
+              name: 'marginLeft',
               required: false,
               placeholder: '',
-              value: 10,
+              value: 20,
+            },
+            {
+              type: 'el-slider',
+              label: '右边距(像素)',
+              name: 'marginRight',
+              required: false,
+              placeholder: '',
+              value: 50,
             },
             {
               type: 'el-slider',
@@ -464,7 +569,7 @@ export const widgetLineCompare = {
               name: 'marginBottom',
               required: false,
               placeholder: '',
-              value: 10,
+              value: 40,
             },
           ],
         },

report-ui/src/views/report/bigscreen/designer/widget/line/widgetLineCompareChart.vue

@@ -265,11 +265,11 @@ export default {
     editorOptions() {
       this.setOptionsTitle();
       this.setOptionsX();
-      // this.setOptionsXRight();
-      // this.setOptionsY();
+      this.setOptionsYTop();
+      this.setOptionsYBottom();
       // this.setOptionsTop();
       // this.setOptionsTooltip();
-      // this.setOptionsGrid();
+      this.setOptionsGrid();
       // this.setOptionsLegend();
       // this.setOptionsColor();
       this.setOptionsData();
@@ -294,6 +294,11 @@ export default {
       const xAxis0 = {
         gridIndex: 0,
         show: optionsSetup.isShowX,
+        name: optionsSetup.xName, // 坐标轴名称
+        nameTextStyle: {
+          color: optionsSetup.nameColorX,
+          fontSize: optionsSetup.nameFontSizeX
+        },
         type: 'category',
         boundaryGap: optionsSetup.boundaryX, // 值居中
         axisLine: { //x轴线
@@ -337,64 +342,90 @@ export default {
       this.options.xAxis[0] = xAxis0;
       this.options.xAxis[1] = xAxis1;
     },
-    // 右X轴设置
-    setOptionsXRight() {
+    // 上y轴设置
+    setOptionsYTop() {
       const optionsSetup = this.optionsSetup;
-      const xAxisRight = {
-        gridIndex: 2,
-        splitNumber: optionsSetup.splitNumberRight,
-        type: 'value',
-        axisLine: {//X轴线
-          show: optionsSetup.xLineRight,
-          lineStyle: {
-            color: optionsSetup.lineColorXRight,
+      const yAxis = {
+        gridIndex: 0,
+        splitNumber: optionsSetup.splitNumberYTop,
+        show: optionsSetup.isShowYTop,
+        scale: optionsSetup.scaleYTop, // 缩放
+        name: optionsSetup.textNameYTop, // 坐标轴名称
+        nameTextStyle: {
+          color: optionsSetup.nameColorYTop,
+          fontSize: optionsSetup.namefontSizeYTop
+        },
+        axisLabel: {
+          show: true,
+          textStyle: {
+            color: optionsSetup.colorYTop,
+            fontSize: optionsSetup.fontSizeYTop,
           },
         },
-        axisTick: {
-          show: optionsSetup.tickLineRight,
+        axisTick: { // 刻度
+          show: optionsSetup.tickLineYTop,
         },
-        position: 'bottom',
-        axisLabel: { // x轴
-          show: optionsSetup.hideXRight,
-          textStyle: {
-            color: optionsSetup.XcolorRight,
-            fontSize: optionsSetup.fontSizeXRight
-          }
+        axisLine: { // 轴线
+          show: optionsSetup.lineYTop,
+          lineStyle: {
+            color: optionsSetup.lineColorYTop,
+          },
         },
-        splitLine: { // 分割线
-          show: optionsSetup.SplitLineRight,
+        splitLine: {
+          show: optionsSetup.splitLineYTop,
           lineStyle: {
-            color: optionsSetup.SplitLineColorRight,
-            width: optionsSetup.SplitLinefontSizeRight,
-            type: 'solid'
-          }
-        }
+            width: optionsSetup.splitLinefontSizeYTop,
+            color: optionsSetup.splitLineColorYTop,
+          },
+        },
+        axisPointer: {
+          snap: true
+        },
       }
-      this.options.xAxis[2] = xAxisRight;
+      this.options.yAxis[0] = yAxis
     },
-    // Y轴设置
-    setOptionsY() {
+    // 下Y轴设置
+    setOptionsYBottom() {
       const optionsSetup = this.optionsSetup;
-      const axisLine = {
-        show: optionsSetup.lineY,
-        lineStyle: {
-          color: optionsSetup.lineColorY
-        }
-      };
-      const axisTick = {
-        show: optionsSetup.tickLineY
-      };
-      const axisLabel = {
-        show: optionsSetup.hideY,
-        textStyle: {
-          align: optionsSetup.textAlign,
-          color: optionsSetup.colorY,
-          fontSize: optionsSetup.fontSizeY,
-        }
-      };
-      this.options.yAxis[1]['axisLine'] = axisLine;
-      this.options.yAxis[1]['axisTick'] = axisTick;
-      this.options.yAxis[1]['axisLabel'] = axisLabel;
+      const yAxis = {
+        gridIndex: 1,
+        splitNumber: optionsSetup.splitNumberYBottom,
+        show: optionsSetup.isShowYBottom,
+        scale: optionsSetup.scaleYBottom, // 缩放
+        name: optionsSetup.textNameYBottom, // 坐标轴名称
+        nameTextStyle: {
+          color: optionsSetup.nameColorYBottom,
+          fontSize: optionsSetup.namefontSizeYBottom
+        },
+        inverse: true, // 翻转
+        axisLabel: {
+          show: true,
+          textStyle: {
+            color: optionsSetup.colorYBottom,
+            fontSize: optionsSetup.fontSizeYBottom,
+          },
+        },
+        axisTick: { // 刻度
+          show: optionsSetup.tickLineYBottom,
+        },
+        axisLine: { // 轴线
+          show: optionsSetup.lineYBottom,
+          lineStyle: {
+            color: optionsSetup.lineColorYBottom,
+          },
+        },
+        splitLine: {
+          show: optionsSetup.splitLineYBottom,
+          lineStyle: {
+            width: optionsSetup.splitLinefontSizeYBottom,
+            color: optionsSetup.splitLineColorYBottom,
+          },
+        },
+        axisPointer: {
+          snap: true
+        },
+      }
+      this.options.yAxis[1] = yAxis
     },
     // 数值设定、柱体设置
     setOptionsTop() {
@@ -450,41 +481,22 @@ export default {
       this.options.tooltip = tooltip;
     },
     // 边距设置
-    getOptionsBottom() {
-      const optionsSetup = this.optionsSetup;
-      let bottom = optionsSetup.marginBottom;
-      if (optionsSetup.hideXLeft) {
-        bottom = optionsSetup.marginBottom + 15
-      } else if (optionsSetup.hideXRight) {
-        bottom = optionsSetup.marginBottom + 15
-      }
-      return bottom
-    },
     setOptionsGrid() {
       const optionsSetup = this.optionsSetup;
       const grid = [
-        {//左
-          show: optionsSetup.frameLineLeft,
-          left: optionsSetup.marginLeftRight,
+        {// 上
+          left: optionsSetup.marginLeft,
+          right: optionsSetup.marginRight,
           top: optionsSetup.marginTop,
-          bottom: optionsSetup.marginBottom,
           containLabel: true,
-          width: '40%'
+          bottom: '50%',
         },
-        {//中间字体位置
-          show: false,
-          left: "51%",
-          top: optionsSetup.marginTop,
-          bottom: this.getOptionsBottom(),
-          width: '0%'
-        },
-        {//右
-          show: optionsSetup.frameLineRight,
-          right: optionsSetup.marginLeftRight,
-          top: optionsSetup.marginTop,
-          bottom: optionsSetup.marginBottom,
+        { // 下
+          left: optionsSetup.marginLeft,
+          right: optionsSetup.marginRight,
           containLabel: true,
-          width: '40%'
+          top: '51%',
+          bottom: optionsSetup.marginBottom,
         },
       ]
       this.options.grid = grid;