图例功能更新

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

@@ -170,6 +170,88 @@ export const widgetBarchart = {
             },
           ],
         },
+        {
+          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: [
@@ -484,79 +566,6 @@ export const widgetBarchart = {
             },
           ],
         },
-        {
-          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: ''
-            },
-            {
-              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/tools/configure/widget-gradient-barchart.js

@@ -9,7 +9,7 @@
 export const widgetGradientBarchart = {
   code: 'widget-gradient-color-barchart',
   type: 'chart',
-  label: '柱形图-渐变色',
+  label: '柱状图-渐变色',
   icon: 'iconzhuzhuangtu',
   options: {
     // 配置
@@ -162,6 +162,88 @@ export const widgetGradientBarchart = {
             },
           ],
         },
+        {
+          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: [

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

@@ -258,11 +258,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,
@@ -270,6 +270,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;
@@ -331,6 +350,10 @@ export default {
       if (series[0].type == "bar") {
         series[0].data = data;
       }
+      const legendName = [];
+      legendName.push('销售量')
+      this.options.legend['data'] = legendName;
+      this.setOptionsLegendName(legendName);
     },
     // 动态数据
     dynamicDataFn(val, refreshTime, optionsSetup) {
@@ -365,11 +388,16 @@ export default {
       }
       // series
       const series = this.options.series;
+      const legendName = [];
       for (const i in series) {
         if (series[i].type == "bar") {
+          series[i].name = val.series[i].name;
           series[i].data = val.series[i].data;
         }
+        legendName.push(val.series[i].name);
       }
+      this.options.legend['data'] = legendName;
+      this.setOptionsLegendName(legendName);
     }
   }
 };

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

@@ -167,6 +167,7 @@ export default {
       this.setOptionsX();
       this.setOptionsY();
       this.setOptionsTop();
+      this.setOptionsLegend();
       this.setOptionsMargin();
       this.setOptionsColor();
       this.setOptionsData();
@@ -323,11 +324,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,
@@ -335,6 +336,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;
@@ -416,6 +436,10 @@ export default {
       if (series[0].type == "bar") {
         series[0].data = data;
       }
+      const legendName = [];
+      legendName.push('销售量')
+      this.options.legend['data'] = legendName;
+      this.setOptionsLegendName(legendName);
     },
     // 动态数据
     dynamicDataFn(val, refreshTime, optionsSetup) {
@@ -451,11 +475,16 @@ export default {
 
       // series
       const series = this.options.series;
+      const legendName = [];
       for (const i in series) {
         if (series[i].type == "bar") {
+          series[i].name = val.series[i].name;
           series[i].data = val.series[i].data;
         }
+        legendName.push(val.series[i].name);
       }
+      this.options.legend['data'] = legendName;
+      this.setOptionsLegendName(legendName);
     }
   }
 };

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

@@ -363,9 +363,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,
@@ -373,6 +373,7 @@ export default {
       };
       legend.itemWidth = optionsSetup.lengedWidth;
     },
+    // 图例名称设置
     setOptionsLegendName(name){
       const optionsSetup = this.optionsSetup;
       const series = this.options.series;
@@ -560,8 +561,8 @@ export default {
         }
         legendName.push(val.series[i].name);
       }
-      this.options.legend['data'] = legendName;
       this.options.series = series;
+      this.options.legend['data'] = legendName;
       this.setOptionsLegendName(legendName);
     },
   }