图表图例调整

report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-bar-compare.js

@@ -1,6 +1,6 @@
 /*
  * @Descripttion: 柱状对比图 json
- * @version: 
+ * @version:
  * @Author: qianlishi
  * @Date: 2021-08-29 07:39:35
  * @LastEditors: qianlishi
@@ -116,6 +116,88 @@ export const widgetBarCompare = {
               },
             ],
           },
+          {
+            name: '图例操作',
+            list: [
+              {
+                type: 'el-switch',
+                label: '图例显示',
+                name: 'isShowLegend',
+                required: false,
+                placeholder: '',
+                value: true,
+              },
+              {
+                type: 'el-input-text',
+                label: '图例名称',
+                name: 'legendName',
+                required: false,
+                placeholder: '多值以'|'隔开',
+                value: ''
+              },
+              {
+                type: 'vue-color',
+                label: '字体颜色',
+                name: 'lengedColor',
+                required: false,
+                placeholder: '',
+                value: '#fff',
+              },
+              {
+                type: 'el-input-number',
+                label: '字体字号',
+                name: 'lengedFontSize',
+                required: false,
+                placeholder: '',
+                value: 12,
+              },
+              {
+                type: 'el-input-number',
+                label: '图例宽度',
+                name: 'lengedWidth',
+                required: false,
+                placeholder: '',
+                value: 12,
+              },
+              {
+                type: 'el-select',
+                label: '横向位置',
+                name: 'lateralPosition',
+                required: false,
+                placeholder: '',
+                selectOptions: [
+                  {code: 'center', name: '居中'},
+                  {code: 'left', name: '左对齐'},
+                  {code: 'right', name: '右对齐'},
+                ],
+                value: 'center'
+              },
+              {
+                type: 'el-select',
+                label: '纵向位置',
+                name: 'longitudinalPosition',
+                required: false,
+                placeholder: '',
+                selectOptions: [
+                  {code: 'top', name: '顶部'},
+                  {code: 'bottom', name: '底部'},
+                ],
+                value: 'top'
+              },
+              {
+                type: 'el-select',
+                label: '布局前置',
+                name: 'layoutFront',
+                required: false,
+                placeholder: '',
+                selectOptions: [
+                  {code: 'vertical', name: '竖排'},
+                  {code: 'horizontal', name: '横排'},
+                ],
+                value: 'horizontal'
+              },
+            ],
+          },
           {
             name: '左X轴设置',
             list: [
@@ -460,80 +542,6 @@ export const widgetBarCompare = {
               },
             ],
           },
-          {
-            name: '图例操作',
-            list: [
-              {
-                type: 'el-switch',
-                label: '显示',
-                name: 'isShowLegend',
-                required: false,
-                placeholder: '',
-                value: true,
-              },
-              {
-                type: 'vue-color',
-                label: '字体颜色',
-                name: 'lengedColor',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              },
-              {
-                type: 'el-input-number',
-                label: '字体大小',
-                name: 'lengedFontSize',
-                required: false,
-                placeholder: '',
-                value: 16,
-              },
-              {
-                type: 'el-input-number',
-                label: '图例宽度',
-                name: 'lengedWidth',
-                required: false,
-                placeholder: '',
-                value: 15,
-              },
-              {
-                type: 'el-select',
-                label: '横向位置',
-                name: 'lateralPosition',
-                required: false,
-                placeholder: '',
-                selectOptions: [
-                  {code: 'center', name: '居中'},
-                  {code: 'left', name: '左对齐'},
-                  {code: 'right', name: '右对齐'},
-                ],
-                value: 'center'
-              },
-              {
-                type: 'el-select',
-                label: '纵向位置',
-                name: 'longitudinalPosition',
-                required: false,
-                placeholder: '',
-                selectOptions: [
-                  {code: 'top', name: '顶部'},
-                  {code: 'bottom', name: '底部'},
-                ],
-                value: 'top'
-              },
-              {
-                type: 'el-select',
-                label: '布局前置',
-                name: 'layoutFront',
-                required: false,
-                placeholder: '',
-                selectOptions: [
-                  {code: 'vertical', name: '竖排'},
-                  {code: 'horizontal', name: '横排'},
-                ],
-                value: 'horizontal'
-              },
-            ],
-          },
           {
             name: '自定义配色',
             list: [
@@ -635,7 +643,7 @@ export const widgetBarCompare = {
           name: 'width',
           required: false,
           placeholder: '该容器在1920px大屏中的宽度',
-          value: 400,
+          value: 500,
         },
         {
           type: 'el-input-number',
@@ -643,7 +651,7 @@ export const widgetBarCompare = {
           name: 'height',
           required: false,
           placeholder: '该容器在1080px大屏中的高度',
-          value: 200,
+          value: 250,
         },
       ],
     }

report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-bar-stack.js

@@ -174,6 +174,88 @@ export const widgetBarStack =  {
               },
             ],
           },
+          {
+            name: '图例操作',
+            list: [
+              {
+                type: 'el-switch',
+                label: '图例显示',
+                name: 'isShowLegend',
+                required: false,
+                placeholder: '',
+                value: true,
+              },
+              {
+                type: 'el-input-text',
+                label: '图例名称',
+                name: 'legendName',
+                required: false,
+                placeholder: '多值以'|'隔开',
+                value: ''
+              },
+              {
+                type: 'vue-color',
+                label: '字体颜色',
+                name: 'lengedColor',
+                required: false,
+                placeholder: '',
+                value: '#fff',
+              },
+              {
+                type: 'el-input-number',
+                label: '字体字号',
+                name: 'lengedFontSize',
+                required: false,
+                placeholder: '',
+                value: 12,
+              },
+              {
+                type: 'el-input-number',
+                label: '图例宽度',
+                name: 'lengedWidth',
+                required: false,
+                placeholder: '',
+                value: 12,
+              },
+              {
+                type: 'el-select',
+                label: '横向位置',
+                name: 'lateralPosition',
+                required: false,
+                placeholder: '',
+                selectOptions: [
+                  {code: 'center', name: '居中'},
+                  {code: 'left', name: '左对齐'},
+                  {code: 'right', name: '右对齐'},
+                ],
+                value: 'center'
+              },
+              {
+                type: 'el-select',
+                label: '纵向位置',
+                name: 'longitudinalPosition',
+                required: false,
+                placeholder: '',
+                selectOptions: [
+                  {code: 'top', name: '顶部'},
+                  {code: 'bottom', name: '底部'},
+                ],
+                value: 'top'
+              },
+              {
+                type: 'el-select',
+                label: '布局前置',
+                name: 'layoutFront',
+                required: false,
+                placeholder: '',
+                selectOptions: [
+                  {code: 'vertical', name: '竖排'},
+                  {code: 'horizontal', name: '横排'},
+                ],
+                value: 'horizontal'
+              },
+            ],
+          },
           {
             name: 'X轴设置',
             list: [
@@ -465,80 +547,6 @@ export const widgetBarStack =  {
               },
             ],
           },
-          {
-            name: '图例操作',
-            list: [
-              {
-                type: 'el-switch',
-                label: '显示',
-                name: 'isShowLegend',
-                required: false,
-                placeholder: '',
-                value: true,
-              },
-              {
-                type: 'vue-color',
-                label: '字体颜色',
-                name: 'lengedColor',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              },
-              {
-                type: 'el-input-number',
-                label: '字体大小',
-                name: 'lengedFontSize',
-                required: false,
-                placeholder: '',
-                value: 16,
-              },
-              {
-                type: 'el-input-number',
-                label: '图例宽度',
-                name: 'lengedWidth',
-                required: false,
-                placeholder: '',
-                value: 15,
-              },
-              {
-                type: 'el-select',
-                label: '横向位置',
-                name: 'lateralPosition',
-                required: false,
-                placeholder: '',
-                selectOptions: [
-                  {code: 'center', name: '居中'},
-                  {code: 'left', name: '左对齐'},
-                  {code: 'right', name: '右对齐'},
-                ],
-                value: 'center'
-              },
-              {
-                type: 'el-select',
-                label: '纵向位置',
-                name: 'longitudinalPosition',
-                required: false,
-                placeholder: '',
-                selectOptions: [
-                  {code: 'top', name: '顶部'},
-                  {code: 'bottom', name: '底部'},
-                ],
-                value: 'top'
-              },
-              {
-                type: 'el-select',
-                label: '布局前置',
-                name: 'layoutFront',
-                required: false,
-                placeholder: '',
-                selectOptions: [
-                  {code: 'vertical', name: '竖排'},
-                  {code: 'horizontal', name: '横排'},
-                ],
-                value: 'horizontal'
-              },
-            ],
-          },
           {
             name: '自定义配色',
             list: [
@@ -635,7 +643,7 @@ export const widgetBarStack =  {
           name: 'width',
           required: false,
           placeholder: '该容器在1920px大屏中的宽度',
-          value: 400,
+          value: 500,
         },
         {
           type: 'el-input-number',
@@ -643,7 +651,7 @@ export const widgetBarStack =  {
           name: 'height',
           required: false,
           placeholder: '该容器在1080px大屏中的高度',
-          value: 200,
+          value: 250,
         },
       ],
     }

report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-barlinechart.js

@@ -215,6 +215,88 @@ export const widgetBarlinechart = {
             },
           ],
         },
+        {
+          name: '图例操作',
+          list: [
+            {
+              type: 'el-switch',
+              label: '图例显示',
+              name: 'isShowLegend',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: '图例名称',
+              name: 'legendName',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'lengedColor',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'lengedFontSize',
+              required: false,
+              placeholder: '',
+              value: 12,
+            },
+            {
+              type: 'el-input-number',
+              label: '图例宽度',
+              name: 'lengedWidth',
+              required: false,
+              placeholder: '',
+              value: 12,
+            },
+            {
+              type: 'el-select',
+              label: '横向位置',
+              name: 'lateralPosition',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'center', name: '居中'},
+                {code: 'left', name: '左对齐'},
+                {code: 'right', name: '右对齐'},
+              ],
+              value: 'center'
+            },
+            {
+              type: 'el-select',
+              label: '纵向位置',
+              name: 'longitudinalPosition',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'top', name: '顶部'},
+                {code: 'bottom', name: '底部'},
+              ],
+              value: 'top'
+            },
+            {
+              type: 'el-select',
+              label: '布局前置',
+              name: 'layoutFront',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'vertical', name: '竖排'},
+                {code: 'horizontal', name: '横排'},
+              ],
+              value: 'horizontal'
+            },
+          ],
+        },
         {
           name: 'X轴设置',
           list: [
@@ -692,7 +774,7 @@ export const widgetBarlinechart = {
         name: 'width',
         required: false,
         placeholder: '该容器在1920px大屏中的宽度',
-        value: 400,
+        value: 500,
       },
       {
         type: 'el-input-number',
@@ -700,7 +782,7 @@ export const widgetBarlinechart = {
         name: 'height',
         required: false,
         placeholder: '该容器在1080px大屏中的高度',
-        value: 200,
+        value: 250,
       },
     ],
   }

report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-line-stack.js

@@ -194,6 +194,88 @@ export const widgetLineStack =   {
               },
             ],
           },
+          {
+            name: '图例操作',
+            list: [
+              {
+                type: 'el-switch',
+                label: '图例显示',
+                name: 'isShowLegend',
+                required: false,
+                placeholder: '',
+                value: true,
+              },
+              {
+                type: 'el-input-text',
+                label: '图例名称',
+                name: 'legendName',
+                required: false,
+                placeholder: '多值以'|'隔开',
+                value: ''
+              },
+              {
+                type: 'vue-color',
+                label: '字体颜色',
+                name: 'lengedColor',
+                required: false,
+                placeholder: '',
+                value: '#fff',
+              },
+              {
+                type: 'el-input-number',
+                label: '字体字号',
+                name: 'lengedFontSize',
+                required: false,
+                placeholder: '',
+                value: 12,
+              },
+              {
+                type: 'el-input-number',
+                label: '图例宽度',
+                name: 'lengedWidth',
+                required: false,
+                placeholder: '',
+                value: 12,
+              },
+              {
+                type: 'el-select',
+                label: '横向位置',
+                name: 'lateralPosition',
+                required: false,
+                placeholder: '',
+                selectOptions: [
+                  {code: 'center', name: '居中'},
+                  {code: 'left', name: '左对齐'},
+                  {code: 'right', name: '右对齐'},
+                ],
+                value: 'center'
+              },
+              {
+                type: 'el-select',
+                label: '纵向位置',
+                name: 'longitudinalPosition',
+                required: false,
+                placeholder: '',
+                selectOptions: [
+                  {code: 'top', name: '顶部'},
+                  {code: 'bottom', name: '底部'},
+                ],
+                value: 'top'
+              },
+              {
+                type: 'el-select',
+                label: '布局前置',
+                name: 'layoutFront',
+                required: false,
+                placeholder: '',
+                selectOptions: [
+                  {code: 'vertical', name: '竖排'},
+                  {code: 'horizontal', name: '横排'},
+                ],
+                value: 'horizontal'
+              },
+            ],
+          },
           {
             name: 'X轴设置',
             list: [
@@ -485,80 +567,6 @@ export const widgetLineStack =   {
               },
             ],
           },
-          {
-            name: '图例操作',
-            list: [
-              {
-                type: 'el-switch',
-                label: '显示',
-                name: 'isShowLegend',
-                required: false,
-                placeholder: '',
-                value: true,
-              },
-              {
-                type: 'vue-color',
-                label: '字体颜色',
-                name: 'lengedColor',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              },
-              {
-                type: 'el-input-number',
-                label: '字体大小',
-                name: 'lengedFontSize',
-                required: false,
-                placeholder: '',
-                value: 16,
-              },
-              {
-                type: 'el-input-number',
-                label: '图例宽度',
-                name: 'lengedWidth',
-                required: false,
-                placeholder: '',
-                value: 15,
-              },
-              {
-                type: 'el-select',
-                label: '横向位置',
-                name: 'lateralPosition',
-                required: false,
-                placeholder: '',
-                selectOptions: [
-                  {code: 'center', name: '居中'},
-                  {code: 'left', name: '左对齐'},
-                  {code: 'right', name: '右对齐'},
-                ],
-                value: 'center'
-              },
-              {
-                type: 'el-select',
-                label: '纵向位置',
-                name: 'longitudinalPosition',
-                required: false,
-                placeholder: '',
-                selectOptions: [
-                  {code: 'top', name: '顶部'},
-                  {code: 'bottom', name: '底部'},
-                ],
-                value: 'top'
-              },
-              {
-                type: 'el-select',
-                label: '布局前置',
-                name: 'layoutFront',
-                required: false,
-                placeholder: '',
-                selectOptions: [
-                  {code: 'vertical', name: '竖排'},
-                  {code: 'horizontal', name: '横排'},
-                ],
-                value: 'horizontal'
-              },
-            ],
-          },
           {
             name: '自定义配色',
             list: [
@@ -655,7 +663,7 @@ export const widgetLineStack =   {
           name: 'width',
           required: false,
           placeholder: '该容器在1920px大屏中的宽度',
-          value: 400,
+          value: 500,
         },
         {
           type: 'el-input-number',
@@ -663,7 +671,7 @@ export const widgetLineStack =   {
           name: 'height',
           required: false,
           placeholder: '该容器在1080px大屏中的高度',
-          value: 200,
+          value: 250,
         },
       ],
     }

report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-linechart.js

@@ -186,6 +186,88 @@ export const widgetLinechart = {
             },
           ],
         },
+        {
+          name: '图例操作',
+          list: [
+            {
+              type: 'el-switch',
+              label: '图例显示',
+              name: 'isShowLegend',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: '图例名称',
+              name: 'legendName',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'lengedColor',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'lengedFontSize',
+              required: false,
+              placeholder: '',
+              value: 12,
+            },
+            {
+              type: 'el-input-number',
+              label: '图例宽度',
+              name: 'lengedWidth',
+              required: false,
+              placeholder: '',
+              value: 12,
+            },
+            {
+              type: 'el-select',
+              label: '横向位置',
+              name: 'lateralPosition',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'center', name: '居中'},
+                {code: 'left', name: '左对齐'},
+                {code: 'right', name: '右对齐'},
+              ],
+              value: 'center'
+            },
+            {
+              type: 'el-select',
+              label: '纵向位置',
+              name: 'longitudinalPosition',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'top', name: '顶部'},
+                {code: 'bottom', name: '底部'},
+              ],
+              value: 'top'
+            },
+            {
+              type: 'el-select',
+              label: '布局前置',
+              name: 'layoutFront',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'vertical', name: '竖排'},
+                {code: 'horizontal', name: '横排'},
+              ],
+              value: 'horizontal'
+            },
+          ],
+        },
         {
           name: 'X轴设置',
           list: [
@@ -497,79 +579,6 @@ export const widgetLinechart = {
             },
           ],
         },
-        {
-          name: '图例操作',
-          list: [
-            {
-              type: 'el-switch',
-              label: '图例',
-              name: 'isShowLegend',
-              required: false,
-              placeholder: '',
-              value: true,
-            },
-            {
-              type: 'vue-color',
-              label: '字体颜色',
-              name: 'lengedColor',
-              required: false,
-              placeholder: '',
-              value: '#fff',
-            },
-            {
-              type: 'el-input-number',
-              label: '字体大小',
-              name: 'lengedFontSize',
-              required: false,
-              placeholder: '',
-              value: 16,
-            },
-            {
-              type: 'el-input-number',
-              label: '图例宽度',
-              name: 'lengedWidth',
-              required: false,
-              placeholder: '',
-              value: 15,
-            },
-            {
-              type: 'el-select',
-              label: '横向位置',
-              name: 'lateralPosition',
-              required: false,
-              placeholder: '',
-              selectOptions: [
-                {code: 'left', name: '左对齐'},
-                {code: 'right', name: '右对齐'},
-              ],
-              value: 'left'
-            },
-            {
-              type: 'el-select',
-              label: '纵向位置',
-              name: 'longitudinalPosition',
-              required: false,
-              placeholder: '',
-              selectOptions: [
-                {code: 'top', name: '顶部'},
-                {code: 'bottom', name: '底部'},
-              ],
-              value: ''
-            },
-            {
-              type: 'el-select',
-              label: '布局前置',
-              name: 'layoutFront',
-              required: false,
-              placeholder: '',
-              selectOptions: [
-                {code: 'vertical', name: '竖排'},
-                {code: 'horizontal', name: '横排'},
-              ],
-              value: ''
-            },
-          ],
-        },
         {
           name: '自定义配色',
           list: [

report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarCompareChart.vue

@@ -483,9 +483,9 @@ export default {
       const legend = this.options.legend;
       legend.show = optionsSetup.isShowLegend;
       legend.left = optionsSetup.lateralPosition;
-      legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";
+      legend.top = optionsSetup.longitudinalPosition;
       legend.bottom =
-        optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
+        optionsSetup.longitudinalPosition;
       legend.orient = optionsSetup.layoutFront;
       legend.textStyle = {
         color: optionsSetup.lengedColor,
@@ -493,6 +493,25 @@ export default {
       };
       legend.itemWidth = optionsSetup.lengedWidth;
     },
+    // 图例名称设置
+    setOptionsLegendName(name){
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series;
+      const legendName = optionsSetup.legendName;
+      // 图例没有手动写则显示原值，写了则显示新值
+      if (null == legendName || legendName == '') {
+        for (let i = 0; i < name.length; i++) {
+          series[i].name = name[i];
+        }
+        this.options.legend['data'] = name;
+      }else {
+        const arr = legendName.split('|');
+        for (let i = 0; i < arr.length; i++) {
+          series[i].name = arr[i];
+        }
+        this.options.legend['data'] = arr
+      }
+    },
     // 颜色修改、圆角修改
     setOptionsColor() {
       const optionsSetup = this.optionsSetup;
@@ -545,33 +564,37 @@ export default {
       let xAxisList = [];
       let yAxisList = [];
       let arrayList = [];
+      const legendName = [];
       for (const i in val) {
-        xAxisList[i] = val[i].axis
-        yAxisList[i] = val[i].name
+        xAxisList[i] = val[i].axis;
+        yAxisList[i] = val[i].name;
       }
-      xAxisList = this.setUnique(xAxisList)
-      yAxisList = this.setUnique(yAxisList)
+      xAxisList = this.setUnique(xAxisList);
+      yAxisList = this.setUnique(yAxisList);
       for (const i in yAxisList) {
-        const data = new Array(yAxisList.length).fill(0)
+        const data = new Array(yAxisList.length).fill(0);
         for (const j in xAxisList) {
           for (const k in val) {
             if (val[k].name == yAxisList[i]) {
               if (val[k].axis == xAxisList[j]) {
-                data[j] = val[k].data
+                data[j] = val[k].data;
               }
             }
           }
         }
         arrayList.push({
           name: yAxisList[i],
-          data: data
+          data: data,
         })
+        legendName.push(yAxisList[i]);
       }
-      this.options.series[0]['name'] = arrayList[0].name
-      this.options.series[0]['data'] = arrayList[0].data
-      this.options.series[1]['name'] = arrayList[1].name
-      this.options.series[1]['data'] = arrayList[1].data
-      this.options.yAxis[1]['data'] = xAxisList
+      this.options.series[0]['name'] = arrayList[0].name;
+      this.options.series[0]['data'] = arrayList[0].data;
+      this.options.series[1]['name'] = arrayList[1].name;
+      this.options.series[1]['data'] = arrayList[1].data;
+      this.options.yAxis[1]['data'] = xAxisList;
+      this.options.legend['data'] = legendName;
+      this.setOptionsLegendName(legendName);
     },
     // 动态数据
     dynamicDataFn(val, refreshTime, optionsSetup) {
@@ -592,13 +615,18 @@ export default {
       });
     },
     renderingFn(optionsSetup, val) {
-      this.options.yAxis[1]['data'] = val.xAxis
+      const legendName = [];
+      this.options.yAxis[1]['data'] = val.xAxis;
       if (val.series[0].type == "bar"){
-        this.options.series[0]['name'] = val.series[0].name
-        this.options.series[0]['data'] = val.series[0].data
-        this.options.series[1]['name'] = val.series[1].name
-        this.options.series[1]['data'] = val.series[1].data
+        this.options.series[0]['name'] = val.series[0].name;
+        this.options.series[0]['data'] = val.series[0].data;
+        this.options.series[1]['name'] = val.series[1].name;
+        this.options.series[1]['data'] = val.series[1].data;
+        legendName.push(val.series[0].name);
+        legendName.push(val.series[1].name);
       }
+      this.options.legend['data'] = legendName;
+      this.setOptionsLegendName(legendName);
     }
   }
 };

report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackChart.vue

@@ -234,9 +234,9 @@ export default {
       const legend = this.options.legend;
       legend.show = optionsSetup.isShowLegend;
       legend.left = optionsSetup.lateralPosition;
-      legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";
+      legend.top = optionsSetup.longitudinalPosition;
       legend.bottom =
-        optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
+        optionsSetup.longitudinalPosition;
       legend.orient = optionsSetup.layoutFront;
       legend.textStyle = {
         color: optionsSetup.lengedColor,
@@ -244,6 +244,25 @@ export default {
       };
       legend.itemWidth = optionsSetup.lengedWidth;
     },
+    // 图例名称设置
+    setOptionsLegendName(name){
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series;
+      const legendName = optionsSetup.legendName;
+      // 图例没有手动写则显示原值，写了则显示新值
+      if (null == legendName || legendName == '') {
+        for (let i = 0; i < name.length; i++) {
+          series[i].name = name[i];
+        }
+        this.options.legend['data'] = name;
+      }else {
+        const arr = legendName.split('|');
+        for (let i = 0; i < arr.length; i++) {
+          series[i].name = arr[i];
+        }
+        this.options.legend['data'] = arr
+      }
+    },
     // 数据解析
     setOptionsData() {
       const optionsSetup = this.optionsSetup;
@@ -285,21 +304,22 @@ export default {
       }
       //数据
       const series = [];
-      let xAxisList = []
-      let yAxisList = []
+      let xAxisList = [];
+      let yAxisList = [];
+      const legendName = [];
       for (const i in val) {
-        xAxisList[i] = val[i].axis
-        yAxisList[i] = val[i].name
+        xAxisList[i] = val[i].axis;
+        yAxisList[i] = val[i].name;
       }
-      xAxisList = this.setUnique(xAxisList)
-      yAxisList = this.setUnique(yAxisList)
+      xAxisList = this.setUnique(xAxisList);
+      yAxisList = this.setUnique(yAxisList);
       for (const i in yAxisList) {
-        const data = new Array(yAxisList.length).fill(0)
+        const data = new Array(yAxisList.length).fill(0);
         for (const j in xAxisList) {
           for (const k in val) {
-            if (val[k].name == yAxisList[i]) { // a = a
-              if (val[k].axis == xAxisList[j]) { // 0725
-                data[j] = val[k].data
+            if (val[k].name == yAxisList[i]) {
+              if (val[k].axis == xAxisList[j]) {
+                data[j] = val[k].data;
               }
             }
           }
@@ -317,7 +337,7 @@ export default {
             distance: 10,
             fontSize: optionsSetup.fontSize,
             color: optionsSetup.subTextColor,
-            fontWeight: optionsSetup.fontWeight
+            fontWeight: optionsSetup.fontWeight,
           },
           //颜色，圆角属性
           itemStyle: {
@@ -327,8 +347,9 @@ export default {
             }
           }
         })
+        legendName.push(yAxisList[i]);
       }
-      this.options.series = series
+      this.options.series = series;
       if (optionsSetup.verticalShow) {
         this.options.xAxis.data = [];
         this.options.yAxis.data = xAxisList;
@@ -340,6 +361,8 @@ export default {
         this.options.xAxis.type = "category";
         this.options.yAxis.type = "value";
       }
+      this.options.legend['data'] = legendName;
+      this.setOptionsLegendName(legendName);
     },
     // 动态数据
     dynamicDataFn(val, refreshTime, optionsSetup) {
@@ -379,6 +402,7 @@ export default {
         this.options.yAxis.type = "value";
       }
       const series = [];
+      const legendName = [];
       for (const i in val.series) {
         if (val.series[i].type == "bar") {
           series.push({
@@ -394,7 +418,7 @@ export default {
               distance: 10,
               fontSize: optionsSetup.fontSize,
               color: optionsSetup.subTextColor,
-              fontWeight: optionsSetup.fontWeight
+              fontWeight: optionsSetup.fontWeight,
             },
             //颜色，圆角属性
             itemStyle: {
@@ -405,8 +429,11 @@ export default {
             }
           })
         }
+        legendName.push(val.series[i].name);
       }
-      this.options.series = series
+      this.options.series = series;
+      this.options.legend['data'] = legendName;
+      this.setOptionsLegendName(legendName);
     }
   }
 };

report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarlinechart.vue

@@ -139,7 +139,7 @@ export default {
       this.setOptionsTooltip();
       this.setOptionsData();
       this.setOptionsMargin();
-      //this.setOptionsLegend();
+      this.setOptionsLegend();
       this.setOptionsColor();
     },
     // 标题修改
@@ -341,6 +341,40 @@ export default {
       };
       this.options.grid = grid;
     },
+    setOptionsLegend() {
+      const optionsSetup = this.optionsSetup;
+      const legend = this.options.legend;
+      legend.show = optionsSetup.isShowLegend;
+      legend.left = optionsSetup.lateralPosition;
+      legend.top = optionsSetup.longitudinalPosition;
+      legend.bottom =
+        optionsSetup.longitudinalPosition;
+      legend.orient = optionsSetup.layoutFront;
+      legend.textStyle = {
+        color: optionsSetup.lengedColor,
+        fontSize: optionsSetup.lengedFontSize
+      };
+      legend.itemWidth = optionsSetup.lengedWidth;
+    },
+    // 图例名称设置
+    setOptionsLegendName(name){
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series;
+      const legendName = optionsSetup.legendName;
+      // 图例没有手动写则显示原值，写了则显示新值
+      if (null == legendName || legendName == '') {
+        for (let i = 0; i < name.length; i++) {
+          series[i].name = name[i];
+        }
+        this.options.legend['data'] = name;
+      }else {
+        const arr = legendName.split('|');
+        for (let i = 0; i < arr.length; i++) {
+          series[i].name = arr[i];
+        }
+        this.options.legend['data'] = arr
+      }
+    },
     // 图例颜色修改
     setOptionsColor() {
       const optionsSetup = this.optionsSetup;
@@ -380,6 +414,11 @@ export default {
           series[i].data = line;
         }
       }
+      const legendName = [];
+      legendName.push('bar');
+      legendName.push('line');
+      this.options.legend['data'] = legendName;
+      this.setOptionsLegendName(legendName);
     },
     dynamicDataFn(val, refreshTime) {
       if (!val) return;
@@ -402,13 +441,17 @@ export default {
       this.options.xAxis.data = val.xAxis;
       // series
       const series = this.options.series;
+      const legendName = [];
       for (const i in series) {
         for (const j in val.series) {
           if (series[i].type == val.series[j].type) {
             series[i].data = val.series[j].data;
           }
         }
+        legendName.push(val.series[i].name);
       }
+      this.options.legend['data'] = legendName;
+      this.setOptionsLegendName(legendName);
     }
   }
 };

report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLineStackChart.vue

@@ -249,9 +249,9 @@ export default {
       const legend = this.options.legend;
       legend.show = optionsSetup.isShowLegend;
       legend.left = optionsSetup.lateralPosition;
-      legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";
+      legend.top = optionsSetup.longitudinalPosition;
       legend.bottom =
-        optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
+        optionsSetup.longitudinalPosition;
       legend.orient = optionsSetup.layoutFront;
       legend.textStyle = {
         color: optionsSetup.lengedColor,
@@ -259,6 +259,25 @@ export default {
       };
       legend.itemWidth = optionsSetup.lengedWidth;
     },
+    // 图例名称设置
+    setOptionsLegendName(name){
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series;
+      const legendName = optionsSetup.legendName;
+      // 图例没有手动写则显示原值，写了则显示新值
+      if (null == legendName || legendName == '') {
+        for (let i = 0; i < name.length; i++) {
+          series[i].name = name[i];
+        }
+        this.options.legend['data'] = name;
+      }else {
+        const arr = legendName.split('|');
+        for (let i = 0; i < arr.length; i++) {
+          series[i].name = arr[i];
+        }
+        this.options.legend['data'] = arr
+      }
+    },
     // 图例颜色修改
     setOptionsColor() {
       const optionsCollapse = this.optionsSetup;
@@ -303,21 +322,22 @@ export default {
       }
       //数据
       const series = [];
-      let xAxisList = []
-      let yAxisList = []
+      let xAxisList = [];
+      let yAxisList = [];
+      const legendName = [];
       for (const i in val) {
-        xAxisList[i] = val[i].axis
-        yAxisList[i] = val[i].name
+        xAxisList[i] = val[i].axis;
+        yAxisList[i] = val[i].name;
       }
-      xAxisList = this.setUnique(xAxisList)
-      yAxisList = this.setUnique(yAxisList)
+      xAxisList = this.setUnique(xAxisList);
+      yAxisList = this.setUnique(yAxisList);
       for (const i in yAxisList) {
-        const data = new Array(yAxisList.length).fill(0)
+        const data = new Array(yAxisList.length).fill(0);
         for (const j in xAxisList) {
           for (const k in val) {
             if (val[k].name == yAxisList[i]) {
               if (val[k].axis == xAxisList[j]) {
-                data[j] = val[k].data
+                data[j] = val[k].data;
               }
             }
           }
@@ -334,7 +354,7 @@ export default {
           // 线条
           lineStyle: {
             color: arrColor[i],
-            width: optionsSetup.lineWidth
+            width: optionsSetup.lineWidth,
           },
           //点
           itemStyle: {
@@ -348,11 +368,12 @@ export default {
             distance: 10,
             fontSize: optionsSetup.fontSize,
             color: optionsSetup.subTextColor,
-            fontWeight: optionsSetup.fontWeight
+            fontWeight: optionsSetup.fontWeight,
           },
         })
+        legendName.push(yAxisList[i]);
       }
-      this.options.series = series
+      this.options.series = series;
       if (optionsSetup.verticalShow) {
         this.options.xAxis.data = [];
         this.options.yAxis.data = xAxisList;
@@ -364,6 +385,8 @@ export default {
         this.options.xAxis.type = "category";
         this.options.yAxis.type = "value";
       }
+      this.options.legend['data'] = legendName;
+      this.setOptionsLegendName(legendName);
     },
     // 动态数据
     dynamicDataFn(val, refreshTime, optionsSetup) {
@@ -403,6 +426,7 @@ export default {
         this.options.yAxis.type = "value";
       }
       const series = [];
+      const legendName = [];
       for (const i in val.series) {
         if (val.series[i].type == "line") {
           series.push({
@@ -418,7 +442,7 @@ export default {
             // 线条
             lineStyle: {
               color: arrColor[i],
-              width: optionsSetup.lineWidth
+              width: optionsSetup.lineWidth,
             },
             //点
             itemStyle: {
@@ -432,12 +456,15 @@ export default {
               distance: 10,
               fontSize: optionsSetup.fontSize,
               color: optionsSetup.subTextColor,
-              fontWeight: optionsSetup.fontWeight
+              fontWeight: optionsSetup.fontWeight,
             },
           })
         }
+        legendName.push(val.series[i].name);
       }
-      this.options.series = series
+      this.options.series = series;
+      this.options.legend['data'] = legendName;
+      this.setOptionsLegendName(legendName);
     }
   }
 };

report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLinechart.vue

@@ -266,11 +266,11 @@ export default {
       const optionsSetup = this.optionsSetup;
       const legend = this.options.legend;
       legend.show = optionsSetup.isShowLegend;
-      legend.left = optionsSetup.lateralPosition == "left" ? 0 : "auto";
-      legend.right = optionsSetup.lateralPosition == "right" ? 0 : "auto";
-      legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";
+      legend.left = optionsSetup.lateralPosition;
+      legend.right = optionsSetup.lateralPosition;
+      legend.top = optionsSetup.longitudinalPosition;
       legend.bottom =
-        optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
+        optionsSetup.longitudinalPosition;
       legend.orient = optionsSetup.layoutFront;
       legend.textStyle = {
         color: optionsSetup.lengedColor,
@@ -278,6 +278,25 @@ export default {
       };
       legend.itemWidth = optionsSetup.lengedWidth;
     },
+    // 图例名称设置
+    setOptionsLegendName(name){
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series;
+      const legendName = optionsSetup.legendName;
+      // 图例没有手动写则显示原值，写了则显示新值
+      if (null == legendName || legendName == '') {
+        for (let i = 0; i < name.length; i++) {
+          series[i].name = name[i];
+        }
+        this.options.legend['data'] = name;
+      }else {
+        const arr = legendName.split('|');
+        for (let i = 0; i < arr.length; i++) {
+          series[i].name = arr[i];
+        }
+        this.options.legend['data'] = arr
+      }
+    },
     // 图例颜色修改
     setOptionsColor() {
       const optionsSetup = this.optionsSetup;
@@ -313,6 +332,10 @@ export default {
           series[i].data = data;
         }
       }
+      const legendName = [];
+      legendName.push('销售量')
+      this.options.legend['data'] = legendName;
+      this.setOptionsLegendName(legendName);
     },
     dynamicDataFn(val, refreshTime) {
       if (!val) return;
@@ -336,11 +359,15 @@ export default {
       this.options.xAxis.data = val.xAxis;
       // series
       const series = this.options.series;
+      const legendName = [];
       for (const i in series) {
         if (series[i].type == "line") {
           series[i].data = val.series[i].data;
         }
+        legendName.push(val.series[i].name);
       }
+      this.options.legend['data'] = legendName;
+      this.setOptionsLegendName(legendName);
     }
   }
 };