Browse Source

多柱线图调整

qianming 3 năm trước cách đây
mục cha
commit
690258ccab

+ 16 - 11
report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-more-bar-line.js

@@ -229,10 +229,10 @@ export const widgetMoreBarLine = {
             {
               type: 'el-input-text',
               label: '图例名称',
-              name: 'layerName',
+              name: 'legendName',
               required: false,
-              placeholder: '',
-              value: '',
+              placeholder: '多值以英文,隔开',
+              value: '成功,失败,终止,成功率'
             },
             {
               type: 'vue-color',
@@ -248,7 +248,7 @@ export const widgetMoreBarLine = {
               name: 'lengedFontSize',
               required: false,
               placeholder: '',
-              value: 16,
+              value: 12,
             },
             {
               type: 'el-input-number',
@@ -256,7 +256,7 @@ export const widgetMoreBarLine = {
               name: 'lengedWidth',
               required: false,
               placeholder: '',
-              value: 15,
+              value: 12,
             },
             {
               type: 'el-select',
@@ -268,7 +268,7 @@ export const widgetMoreBarLine = {
                 {code: 'left', name: '左对齐'},
                 {code: 'right', name: '右对齐'},
               ],
-              value: ''
+              value: 'left'
             },
             {
               type: 'el-select',
@@ -280,7 +280,7 @@ export const widgetMoreBarLine = {
                 {code: 'top', name: '顶部'},
                 {code: 'bottom', name: '底部'},
               ],
-              value: ''
+              value: 'top'
             },
             {
               type: 'el-select',
@@ -292,7 +292,7 @@ export const widgetMoreBarLine = {
                 {code: 'vertical', name: '竖排'},
                 {code: 'horizontal', name: '横排'},
               ],
-              value: '未销,核销,总共,比例'
+              value: 'horizontal'
             },
           ],
         },
@@ -655,7 +655,12 @@ export const widgetMoreBarLine = {
               label: '',
               name: 'customColor',
               required: false,
-              value: [{color: '#00F4FFFF'}, {color: '#e68b55'}],
+              value: [
+                {color: '#4bdfff'},
+                {color: '#5dc1fd'},
+                {color: '#55f49c'},
+                {color: '#ffa43a'},
+              ],
             },
           ],
         },
@@ -745,7 +750,7 @@ export const widgetMoreBarLine = {
         name: 'width',
         required: false,
         placeholder: '该容器在1920px大屏中的宽度',
-        value: 400,
+        value: 500,
       },
       {
         type: 'el-input-number',
@@ -753,7 +758,7 @@ export const widgetMoreBarLine = {
         name: 'height',
         required: false,
         placeholder: '该容器在1080px大屏中的高度',
-        value: 200,
+        value: 300,
       },
     ],
   }

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

@@ -134,7 +134,7 @@ export default {
       this.setOptionsTitle();
       this.setOptionsX();
       this.setOptionsY();
-      this.setOptionsTop();
+      this.setOptionsLine();
       this.setOptionsBar();
       this.setOptionsTooltip();
       this.setOptionsData();
@@ -262,7 +262,7 @@ export default {
       this.options.yAxis = yAxis;
     },
     // 折线设置 数值设置
-    setOptionsTop() {
+    setOptionsLine() {
       const optionsSetup = this.optionsSetup;
       const series = this.options.series;
       for (const key in series) {

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

@@ -172,7 +172,7 @@ export default {
             lineStyle: {
               color: "#ffa43a"
             },
-            data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5]
+            data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5, 2]
           }
         ]
       }
@@ -215,14 +215,15 @@ export default {
       this.setOptionsTitle();
       this.setOptionsX();
       this.setOptionsY();
-      /*
-      this.setOptionsTop();
+      this.setOptionsLegend();
+      this.setOptionsLine();
       this.setOptionsBar();
       this.setOptionsTooltip();
-      this.setOptionsData();
       this.setOptionsMargin();
-      this.setOptionsLegend();
-      this.setOptionsColor();*/
+      this.setOptionsColor();
+      /*
+      this.setOptionsData();
+      */
     },
     // 标题修改
     setOptionsTitle() {
@@ -340,6 +341,40 @@ export default {
       ];
       this.options.yAxis = yAxis;
     },
+    // 折线设置 数值设置
+    setOptionsLine() {
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series;
+      for (const key in series) {
+        if (series[key].type == "line") {
+          series[key].showSymbol = optionsSetup.markPoint;
+          series[key].symbolSize = optionsSetup.pointSize;
+          series[key].smooth = optionsSetup.smoothCurve;
+          if (optionsSetup.area) {
+            series[key].areaStyle = {
+              opacity: optionsSetup.areaThickness / 100
+            };
+          } else {
+            series[key].areaStyle = {
+              opacity: 0
+            };
+          }
+          series[key].lineStyle = {
+            width: optionsSetup.lineWidth
+          };
+          series[key].itemStyle.borderRadius = optionsSetup.radius;
+          series[key].label = {
+            show: optionsSetup.isShowLine,
+            position: "top",
+            distance: optionsSetup.distanceLine,
+            fontSize: optionsSetup.fontSizeLine,
+            color: optionsSetup.subTextColorLine,
+            fontWeight: optionsSetup.fontWeightLine
+          };
+        }
+      }
+      this.options.series = series;
+    },
     // 柱体设置 数值设置
     setOptionsBar() {
       const optionsSetup = this.optionsSetup;
@@ -389,6 +424,9 @@ export default {
     setOptionsLegend() {
       const optionsSetup = this.optionsSetup;
       const legend = this.options.legend;
+      let legendName = optionsSetup.legendName;
+      let arr = legendName.split(",")
+      legend.data = arr;
       legend.show = optionsSetup.isShowLegend;
       legend.left = optionsSetup.lateralPosition;
       legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";