feat--折线图系列优化

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

@@ -1,6 +1,6 @@
 <template>
   <div :style="styleObj">
-    <v-chart ref="myVChart" :options="options" autoresize />
+    <v-chart ref="myVChart" :options="options" autoresize/>
   </div>
 </template>
 
@@ -302,22 +302,27 @@ export default {
     // 标题修改
     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,
+      const title = {
+        text: optionsSetup.text,
+        show: optionsSetup.isShowTitle,
+        left: optionsSetup.titleLeft,
+        top: optionsSetup.titleTop + "%",
+        itemGap: optionsSetup.titleItemGap,
+        textStyle: {
+          color: optionsSetup.textColor,
+          fontSize: optionsSetup.textFontSize,
+          fontWeight: optionsSetup.textFontWeight,
+          fontStyle: optionsSetup.textFontStyle,
+          fontFamily: optionsSetup.textFontFamily,
+        },
+        subtext: optionsSetup.subtext,
+        subtextStyle: {
+          color: optionsSetup.subtextColor,
+          fontWeight: optionsSetup.subtextFontWeight,
+          fontSize: optionsSetup.subtextFontSize,
+          fontStyle: optionsSetup.subtextFontStyle,
+          fontFamily: optionsSetup.subtextFontFamily
+        },
       };
       this.options.title = title;
     },
@@ -326,32 +331,44 @@ export default {
       const optionsSetup = this.optionsSetup;
       const xAxis0 = {
         gridIndex: 0,
+        type: "category",
         show: optionsSetup.isShowX,
         name: optionsSetup.nameX, // 坐标轴名称
+        nameLocation: optionsSetup.nameLocationX,
         nameTextStyle: {
           color: optionsSetup.nameColorX,
           fontSize: optionsSetup.nameFontSizeX,
+          fontWeight: optionsSetup.nameFontWeightX,
+          fontStyle: optionsSetup.nameFontStyleX,
+          fontFamily: optionsSetup.nameFontFamilyX,
+        },
+        boundaryGap: true, // 值居中
+        axisLabel: {
+          // X轴数据
+          show: optionsSetup.isShowAxisLabelX,
+          interval: optionsSetup.textIntervalX,
+          textStyle: {
+            color: optionsSetup.textColorX,
+            fontSize: optionsSetup.textFontSizeX,
+            fontWeight: optionsSetup.textFontWeightX,
+            fontStyle: optionsSetup.textFontStyleX,
+            fontFamily: optionsSetup.textFontFamilyX,
+          },
         },
-        type: "category",
-        boundaryGap: optionsSetup.boundaryX, // 值居中
         axisLine: {
           //x轴线
-          show: optionsSetup.lineX,
+          show: optionsSetup.isShowAxisLineX,
           lineStyle: {
             color: optionsSetup.lineColorX,
+            width: optionsSetup.lineWidthX,
           },
         },
         axisTick: {
           // 刻度
-          show: optionsSetup.tickLineX,
-        },
-        axisLabel: {
-          // X轴数据
-          show: true,
-          interval: optionsSetup.splitNumberX,
-          textStyle: {
-            color: optionsSetup.colorX,
-            fontSize: optionsSetup.fontSizeX,
+          show: optionsSetup.isShowAxisLineX,
+          lineStyle: {
+            color: optionsSetup.lineColorX,
+            width: optionsSetup.lineWidthX,
           },
         },
       };
@@ -360,21 +377,25 @@ export default {
         show: optionsSetup.isShowX,
         type: "category",
         position: "top",
-        boundaryGap: optionsSetup.boundaryX, // 值居中
+        boundaryGap: true, // 值居中
+        axisLabel: {
+          show: false,
+        },
         axisLine: {
-          // x轴线
-          show: optionsSetup.lineX,
+          //x轴线
+          show: optionsSetup.isShowAxisLineX,
           lineStyle: {
             color: optionsSetup.lineColorX,
+            width: optionsSetup.lineWidthX,
           },
         },
         axisTick: {
           // 刻度
-          show: optionsSetup.tickLineX,
-        },
-        axisLabel: {
-          show: false,
-          interval: optionsSetup.splitNumberX,
+          show: optionsSetup.isShowAxisLineX,
+          lineStyle: {
+            color: optionsSetup.lineColorX,
+            width: optionsSetup.lineWidthX,
+          },
         },
       };
       this.options.xAxis[0] = xAxis0;
@@ -388,35 +409,52 @@ export default {
         gridIndex: 0,
         splitNumber: optionsSetup.splitNumberYTop,
         show: optionsSetup.isShowYTop,
-        scale: optionsSetup.scaleYTop, // 缩放
-        name: optionsSetup.textNameY, // 坐标轴名称
+        // 缩放
+        scale: optionsSetup.scaleYTop,
+        position: optionsSetup.positionYTop,
+        offset: optionsSetup.offsetYTop,
+        // 坐标轴名称
+        name: optionsSetup.textNameY,
+        nameLocation: "end",
         nameTextStyle: {
           color: optionsSetup.nameColorY,
           fontSize: optionsSetup.nameFontSizeY,
+          fontWeight: optionsSetup.nameFontWeightY,
+          fontStyle: optionsSetup.nameFontStyleY,
+          fontFamily: optionsSetup.nameFontFamilyY,
         },
         axisLabel: {
-          show: true,
+          show: optionsSetup.isShowAxisLabelYTop,
+          rotate: optionsSetup.textAngleYTop,
           textStyle: {
-            color: optionsSetup.colorYTop,
-            fontSize: optionsSetup.fontSizeYTop,
+            color: optionsSetup.textColorYTop,
+            fontSize: optionsSetup.textFontSizeYTop,
+            fontWeight: optionsSetup.textFontWeightYTop,
+            fontStyle: optionsSetup.textFontStyleYTop,
+            fontFamily: optionsSetup.textFontFamilyYTop,
           },
         },
-        axisTick: {
-          // 刻度
-          show: optionsSetup.tickLineYTop,
-        },
         axisLine: {
           // 轴线
-          show: optionsSetup.lineYTop,
+          show: optionsSetup.isShowAxisLineYTop,
+          lineStyle: {
+            color: optionsSetup.lineColorYTop,
+            width: optionsSetup.lineWidthYTop,
+          },
+        },
+        axisTick: {
+          // 刻度
+          show: optionsSetup.isShowAxisLineYTop,
           lineStyle: {
             color: optionsSetup.lineColorYTop,
+            width: optionsSetup.lineWidthYTop,
           },
         },
         splitLine: {
-          show: optionsSetup.splitLineYTop,
+          show: optionsSetup.isShowSplitLineYTop,
           lineStyle: {
-            width: optionsSetup.splitLineFontWidthYTop,
             color: optionsSetup.splitLineColorYTop,
+            width: optionsSetup.splitLineWidthYTop,
           },
         },
         axisPointer: {
@@ -433,36 +471,51 @@ export default {
         gridIndex: 1,
         splitNumber: optionsSetup.splitNumberYBottom,
         show: optionsSetup.isShowYBottom,
-        scale: optionsSetup.scaleYBottom, // 缩放
-        name: optionsSetup.textNameY, // 坐标轴名称
+        // 缩放
+        scale: optionsSetup.scaleYBottom,
+        // 坐标轴名称
+        name: optionsSetup.textNameY,
+        nameLocation: "end",
         nameTextStyle: {
           color: optionsSetup.nameColorY,
           fontSize: optionsSetup.nameFontSizeY,
+          fontWeight: optionsSetup.nameFontWeightY,
+          fontStyle: optionsSetup.nameFontStyleY,
+          fontFamily: optionsSetup.nameFontFamilyY,
         },
         inverse: true, // 翻转
         axisLabel: {
-          show: true,
+          show: optionsSetup.isShowAxisLabelYBottom,
+          rotate: optionsSetup.textAngleYBottom,
           textStyle: {
-            color: optionsSetup.colorYBottom,
-            fontSize: optionsSetup.fontSizeYBottom,
+            color: optionsSetup.textColorYBottom,
+            fontSize: optionsSetup.textFontSizeYBottom,
+            fontWeight: optionsSetup.textFontWeightYBottom,
+            fontStyle: optionsSetup.textFontStyleYBottom,
+            fontFamily: optionsSetup.textFontFamilyYBottom,
           },
         },
-        axisTick: {
-          // 刻度
-          show: optionsSetup.tickLineYBottom,
-        },
         axisLine: {
           // 轴线
-          show: optionsSetup.lineYBottom,
+          show: optionsSetup.isShowAxisLineYBottom,
+          lineStyle: {
+            color: optionsSetup.lineColorYBottom,
+            width: optionsSetup.lineWidthYBottom,
+          },
+        },
+        axisTick: {
+          // 刻度
+          show: optionsSetup.isShowAxisLineYBottom,
           lineStyle: {
             color: optionsSetup.lineColorYBottom,
+            width: optionsSetup.lineWidthYBottom,
           },
         },
         splitLine: {
-          show: optionsSetup.splitLineYBottom,
+          show: optionsSetup.isShowSplitLineYTop,
           lineStyle: {
-            width: optionsSetup.splitLineFontWidthYBottom,
             color: optionsSetup.splitLineColorYBottom,
+            width: optionsSetup.splitLineWidthYBottom,
           },
         },
         axisPointer: {
@@ -497,19 +550,23 @@ export default {
           position: "top",
           distance: optionsSetup.fontDistance,
           show: optionsSetup.isShow,
-          color: optionsSetup.dataColor,
+          color: optionsSetup.fontColor,
           fontSize: optionsSetup.fontSize,
           fontWeight: optionsSetup.fontWeight,
-          formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}'
+          formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}',
+          fontStyle: optionsSetup.fontStyle,
+          fontFamily: optionsSetup.fontFamily,
         };
         series[1].label = {
           position: "bottom",
           distance: optionsSetup.fontDistance,
           show: optionsSetup.isShow,
-          color: optionsSetup.dataColor,
+          color: optionsSetup.fontColor,
           fontSize: optionsSetup.fontSize,
           fontWeight: optionsSetup.fontWeight,
-          formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}'
+          formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}',
+          fontStyle: optionsSetup.fontStyle,
+          fontFamily: optionsSetup.fontFamily,
         };
       }
     },
@@ -573,17 +630,24 @@ export default {
     // 图例操作
     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.legendColor,
-        fontSize: optionsSetup.legendFontSize,
+      const legend = {
+        show: optionsSetup.isShowLegend,
+        left: optionsSetup.lateralPosition,
+        //right: optionsSetup.lateralPosition,
+        top: optionsSetup.longitudinalPosition,
+        //bottom: optionsSetup.longitudinalPosition,
+        orient: optionsSetup.layoutFront,
+        textStyle: {
+          color: optionsSetup.legendColor,
+          fontSize: optionsSetup.legendFontSize,
+          fontWeight: optionsSetup.legendFontWeight,
+          fontStyle: optionsSetup.legendFontStyle,
+          fontFamily: optionsSetup.legendFontFamily,
+        },
+        itemHeight: optionsSetup.legendHeight,
+        itemWidth: optionsSetup.legendWidth,
       };
-      legend.itemWidth = optionsSetup.legendWidth;
+      this.options.legend = legend;
     },
     // 图例名称设置
     setOptionsLegendName(name) {
@@ -650,10 +714,10 @@ export default {
       optionsData.dataType == "staticData"
         ? this.staticDataFn(optionsData.staticData, optionsSetup)
         : this.dynamicDataFn(
-            optionsData.dynamicData,
-            optionsData.refreshTime,
-            optionsSetup
-          );
+          optionsData.dynamicData,
+          optionsData.refreshTime,
+          optionsSetup
+        );
     },
     //去重
     setUnique(arr) {

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

@@ -110,22 +110,27 @@ export default {
     // 标题修改
     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,
+      const title = {
+        text: optionsSetup.text,
+        show: optionsSetup.isShowTitle,
+        left: optionsSetup.titleLeft,
+        top: optionsSetup.titleTop + "%",
+        itemGap: optionsSetup.titleItemGap,
+        textStyle: {
+          color: optionsSetup.textColor,
+          fontSize: optionsSetup.textFontSize,
+          fontWeight: optionsSetup.textFontWeight,
+          fontStyle: optionsSetup.textFontStyle,
+          fontFamily: optionsSetup.textFontFamily,
+        },
+        subtext: optionsSetup.subtext,
+        subtextStyle: {
+          color: optionsSetup.subtextColor,
+          fontWeight: optionsSetup.subtextFontWeight,
+          fontSize: optionsSetup.subtextFontSize,
+          fontStyle: optionsSetup.subtextFontStyle,
+          fontFamily: optionsSetup.subtextFontFamily
+        },
       };
       this.options.title = title;
     },
@@ -135,33 +140,52 @@ export default {
       const xAxis = {
         type: "category",
         // 坐标轴是否显示
-        show: optionsSetup.hideX,
+        show: optionsSetup.isShowX,
+        position: optionsSetup.positionX,
+        offset: optionsSetup.offsetX,
         // 坐标轴名称
         name: optionsSetup.nameX,
+        nameLocation: optionsSetup.nameLocationX,
         nameTextStyle: {
           color: optionsSetup.nameColorX,
           fontSize: optionsSetup.nameFontSizeX,
+          fontWeight: optionsSetup.nameFontWeightX,
+          fontStyle: optionsSetup.nameFontStyleX,
+          fontFamily: optionsSetup.nameFontFamilyX,
         },
         // 轴反转
         inverse: optionsSetup.reversalX,
         axisLabel: {
-          show: true,
-          interval: optionsSetup.textInterval,
+          show: optionsSetup.isShowAxisLabelX,
+          interval: optionsSetup.textIntervalX,
           // 文字角度
           rotate: optionsSetup.textAngleX,
           textStyle: {
             // 坐标文字颜色
-            color: optionsSetup.colorX,
-            fontSize: optionsSetup.fontSizeX,
+            color: optionsSetup.textColorX,
+            fontSize: optionsSetup.textFontSizeX,
+            fontWeight: optionsSetup.textFontWeightX,
+            fontStyle: optionsSetup.textFontStyleX,
+            fontFamily: optionsSetup.textFontFamilyX,
           },
         },
+        // X轴线
         axisLine: {
-          show: true,
+          show: optionsSetup.isShowAxisLineX,
+          lineStyle: {
+            color: optionsSetup.lineColorX,
+            width: optionsSetup.lineWidthX,
+          },
+        },
+        // X轴刻度线
+        axisTick: {
+          show: optionsSetup.isShowAxisLineX,
           lineStyle: {
             color: optionsSetup.lineColorX,
             width: optionsSetup.lineWidthX,
           },
         },
+        // X轴分割线
         splitLine: {
           show: optionsSetup.isShowSplitLineX,
           lineStyle: {
@@ -183,26 +207,43 @@ export default {
         splitNumber: optionsSetup.splitNumberY,
         // 坐标轴是否显示
         show: optionsSetup.isShowY,
+        position: optionsSetup.positionY,
+        offset: optionsSetup.offsetY,
         // 坐标轴名称
         name: optionsSetup.textNameY,
+        nameLocation: optionsSetup.nameLocationY,
         nameTextStyle: {
           color: optionsSetup.nameColorY,
           fontSize: optionsSetup.nameFontSizeY,
+          fontWeight: optionsSetup.nameFontWeightY,
+          fontStyle: optionsSetup.nameFontStyleY,
+          fontFamily: optionsSetup.nameFontFamilyY,
         },
         // 轴反转
         inverse: optionsSetup.reversalY,
         axisLabel: {
-          show: true,
+          show: optionsSetup.isShowAxisLabelY,
           // 文字角度
           rotate: optionsSetup.textAngleY,
+          //interval: optionsSetup.textIntervalY,
           textStyle: {
             // 坐标文字颜色
-            color: optionsSetup.colorY,
-            fontSize: optionsSetup.fontSizeY,
+            color: optionsSetup.textColorY,
+            fontSize: optionsSetup.textFontSizeY,
+            fontWeight: optionsSetup.textFontWeightY,
+            fontStyle: optionsSetup.textFontStyleY,
+            fontFamily: optionsSetup.textFontFamilyY,
           },
         },
         axisLine: {
-          show: true,
+          show: optionsSetup.isShowAxisLineY,
+          lineStyle: {
+            color: optionsSetup.lineColorY,
+            width: optionsSetup.lineWidthY,
+          },
+        },
+        axisTick: {
+          show: optionsSetup.isShowAxisLineY,
           lineStyle: {
             color: optionsSetup.lineColorY,
             width: optionsSetup.lineWidthY,
@@ -243,8 +284,11 @@ export default {
           type: optionsSetup.tooltipAxisPointerType,
         },
         textStyle: {
-          color: optionsSetup.tipsColor,
-          fontSize: optionsSetup.tipsFontSize,
+          color: optionsSetup.tooltipColor,
+          fontSize: optionsSetup.tooltipFontSize,
+          fontWeight: optionsSetup.tooltipFontWeight,
+          fontStyle: optionsSetup.tooltipFontStyle,
+          fontFamily: optionsSetup.tooltipFontFamily,
         },
       };
       this.options.tooltip = tooltip;
@@ -264,17 +308,24 @@ export default {
     // 图例操作 legend
     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.legendColor,
-        fontSize: optionsSetup.legendFontSize,
+      const legend = {
+        show: optionsSetup.isShowLegend,
+        left: optionsSetup.lateralPosition,
+        //right: optionsSetup.lateralPosition,
+        top: optionsSetup.longitudinalPosition,
+        //bottom: optionsSetup.longitudinalPosition,
+        orient: optionsSetup.layoutFront,
+        textStyle: {
+          color: optionsSetup.legendColor,
+          fontSize: optionsSetup.legendFontSize,
+          fontWeight: optionsSetup.legendFontWeight,
+          fontStyle: optionsSetup.legendFontStyle,
+          fontFamily: optionsSetup.legendFontFamily,
+        },
+        itemHeight: optionsSetup.legendHeight,
+        itemWidth: optionsSetup.legendWidth,
       };
-      legend.itemWidth = optionsSetup.legendWidth;
+      this.options.legend = legend;
     },
     // 图例名称设置
     setOptionsLegendName(name) {
@@ -401,9 +452,11 @@ export default {
             position: optionsSetup.fontPosition,
             distance: optionsSetup.fontDistance,
             fontSize: optionsSetup.fontSize,
-            color: optionsSetup.dataColor,
+            color: optionsSetup.fontColor,
             fontWeight: optionsSetup.fontWeight,
-            formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}'
+            formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}',
+            fontStyle: optionsSetup.fontStyle,
+            fontFamily: optionsSetup.fontFamily,
           },
         });
         legendName.push(yAxisList[i]);
@@ -421,16 +474,19 @@ export default {
         this.options.yAxis.type = "value";
       }
       // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
-      const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisList.length) / optionsSetup.fontSizeX);
+      const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisList.length) / optionsSetup.textFontSizeX);
       const axisLabel = {
-        show: true,
-        interval: optionsSetup.textInterval,
+        show: optionsSetup.isShowAxisLabelX,
+        interval: optionsSetup.textIntervalX,
         // 文字角度
         rotate: optionsSetup.textAngleX,
         textStyle: {
           // 坐标文字颜色
-          color: optionsSetup.colorX,
-          fontSize: optionsSetup.fontSizeX,
+          color: optionsSetup.textColorX,
+          fontSize: optionsSetup.textFontSizeX,
+          fontWeight: optionsSetup.textFontWeightX,
+          fontStyle: optionsSetup.textFontStyleX,
+          fontFamily: optionsSetup.textFontFamilyX,
         },
         // 自动换行
         formatter: function (value, index) {
@@ -516,9 +572,11 @@ export default {
               position: optionsSetup.fontPosition,
               distance: optionsSetup.fontDistance,
               fontSize: optionsSetup.fontSize,
-              color: optionsSetup.dataColor,
+              color: optionsSetup.fontColor,
               fontWeight: optionsSetup.fontWeight,
-              formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}'
+              formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}',
+              fontStyle: optionsSetup.fontStyle,
+              fontFamily: optionsSetup.fontFamily,
             },
           });
         }
@@ -526,16 +584,19 @@ export default {
       }
       // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
       const xAxisDataLength = val.length !== 0 ? val.xAxis.length : 1;
-      const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.fontSizeX);
+      const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.textFontSizeX);
       const axisLabel = {
-        show: true,
-        interval: optionsSetup.textInterval,
+        show: optionsSetup.isShowAxisLabelX,
+        interval: optionsSetup.textIntervalX,
         // 文字角度
         rotate: optionsSetup.textAngleX,
         textStyle: {
           // 坐标文字颜色
-          color: optionsSetup.colorX,
-          fontSize: optionsSetup.fontSizeX,
+          color: optionsSetup.textColorX,
+          fontSize: optionsSetup.textFontSizeX,
+          fontWeight: optionsSetup.textFontWeightX,
+          fontStyle: optionsSetup.textFontStyleX,
+          fontFamily: optionsSetup.textFontFamilyX,
         },
         // 自动换行
         formatter: function (value, index) {