折线对比图

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

@@ -61,6 +61,7 @@ export default {
         xAxis: [
           {// 左
             splitNumber: 2,
+            show: true,
             type: 'value',
             inverse: true,
             axisLine: {//底分割线
@@ -92,6 +93,7 @@ export default {
           },
           {// 右
             gridIndex: 2,
+            show: true,
             type: 'value',
             axisLine: {
               show: false,
@@ -302,6 +304,7 @@ export default {
       const xAxisLeft = {
         splitNumber: optionsSetup.splitNumberLeft,
         type: 'value',
+        show : optionsSetup.hideXLeft,
         inverse: true,
         axisLine: {//X轴线
           show: optionsSetup.xLineLeft,
@@ -314,7 +317,7 @@ export default {
         },
         position: 'bottom',
         axisLabel: { // x轴
-          show: optionsSetup.hideXLeft,
+          show: true,
           textStyle: {
             color: optionsSetup.XcolorLeft,
             fontSize: optionsSetup.fontSizeXLeft
@@ -337,6 +340,7 @@ export default {
       const xAxisRight = {
         gridIndex: 2,
         splitNumber: optionsSetup.splitNumberRight,
+        show : optionsSetup.hideXRight,
         type: 'value',
         axisLine: {//X轴线
           show: optionsSetup.xLineRight,
@@ -349,7 +353,7 @@ export default {
         },
         position: 'bottom',
         axisLabel: { // x轴
-          show: optionsSetup.hideXRight,
+          show: true,
           textStyle: {
             color: optionsSetup.XcolorRight,
             fontSize: optionsSetup.fontSizeXRight
@@ -444,16 +448,6 @@ 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 = [
@@ -469,7 +463,7 @@ export default {
           show: false,
           left: "51%",
           top: optionsSetup.marginTop,
-          bottom: this.getOptionsBottom(),
+          bottom: optionsSetup.marginBottom + 15,
           width: '0%'
         },
         {//右

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

@@ -16,13 +16,27 @@ export default {
   data() {
     return {
       options: {
+        axisPointer: {
+          link: {
+            xAxisIndex: "all",
+          },
+        },
         title: {
-          //text: '柱状对比图',
           x: 'center',
           textStyle: {
             color: '#ffffff',
           },
         },
+        tooltip: {
+          show: true,
+          trigger: "axis",
+          axisPointer: {
+            type: "line",
+            lineStyle: {
+              type: "dashed",
+            },
+          },
+        },
         //边距
         grid: [
           {// 上
@@ -52,60 +66,92 @@ export default {
           {//
             gridIndex: 0,
             type: 'category',
-            boundaryGap: false,
-            axisLine: { //分割线
-              onZero: false,
+            boundaryGap: true, // 居中
+            axisLine: { //x轴线
+              show: true,
+              lineStyle: {
+                color: '#ffffff',
+              }
             },
-            splitNumber: 2,
-            inverse: true,
-            axisTick: {
-              show: false,
+            axisTick: { // 刻度
+              show: true,
             },
-            //position: 'bottom',
-            axisLabel: { // x轴
+            axisLabel: { // X轴数据
               show: true,
               textStyle: {
                 color: '#ffffff',
-                fontSize: 12
+                fontSize: 14
               }
             },
-            data: []
+            data: [],
           },
           {//
             gridIndex: 1,
             type: 'category',
             position: 'top',
-            boundaryGap: false,
-            axisLine: {
-              show: false,
+            boundaryGap: true, // 居中
+            axisLine: { // x轴线
+              show: true,
+              lineStyle: {
+                color: '#ffffff',
+              }
             },
-            axisTick: {
+            axisTick: { // 刻度
+              show: true,
+            },
+            axisLabel: {
               show: false,
             },
-            //position: 'bottom',
+            data: [],
+          },
+        ],
+        yAxis: [
+          {
+            gridIndex: 0,
+            show: true,
+            scale: true, // 是否不从0开始,false从0开始
             axisLabel: {
               show: true,
               textStyle: {
                 color: '#ffffff',
-                fontSize: 12,
+                fontSize: 14,
               },
             },
+            axisLine: { // 轴线
+              show: true,
+              lineStyle: {
+                color: '#ffffff',
+              },
             },
-        ],
-        yAxis: [
-          {
-            gridIndex: 0,
-            scale: true,
             splitLine: {
               show: false,
+              lineStyle: {
+                color: '#ffffff',
+              },
             },
           },
           {
             gridIndex: 1,
-            scale: true,
-            inverse: true,
+            scale: false, // 是否从0开始
+            inverse: true, // 翻转
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: '#ffffff',
+                fontSize: 14,
+              },
+            },
+            axisLine: { // 轴线
+              show: true,
+              lineStyle: {
+                color: '#ffffff',
+              },
+            },
             splitLine: {
               show: false,
+              lineStyle: {
+                color: '#ffffff',
+              },
             },
           },
         ],
@@ -115,32 +161,21 @@ export default {
             type: 'line',
             xAxisIndex: 0,
             yAxisIndex: 0,
-            smooth: true,
-            barGap: 20,
-            barWidth: 15,
-            /*label: {
-              normal: {
-                show: true,
-                color: 'red',
-                position: 'insideLeft',
-                textStyle: {
-                  color: '#ffffff',
-                }
-
-              },
-              emphasis: {
-                show: false,
-              },
-            },
+            smooth: true, // 曲线，折线
             itemStyle: {
-              normal: {
               color: '#36c5e7',
-                barBorderRadius: [8, 0, 0, 8],
             },
-              emphasis: {
-                show: false,
+            lineStyle: {
+              color: '#36c5e7',
+              width: 2,
+            },
+            label: {
+              position: 'top',
+              distance: 10,
+              show: true,
+              color: '#36c5e7',
+              fontSize: 14,
             },
-            },*/
             data: [],
           },
           {
@@ -148,28 +183,21 @@ export default {
             type: 'line',
             xAxisIndex: 1,
             yAxisIndex: 1,
-            smooth: true,
-            barGap: 20,
-            barWidth: 15,
-            /*label: {
-              normal: {
-                show: true,
-                color: 'red',
-                position: 'insideRight',
-                textStyle: {
-                  color: '#ffffff',
-                }
-              },
-            },
+            smooth: true, // 曲线，折线
             itemStyle: {
-              normal: {
               color: '#e68b55',
-                barBorderRadius: [0, 8, 8, 0],
             },
-              emphasis: {
-                show: false,
+            lineStyle: {
+              color: '#e68b55',
+              width: 2,
+            },
+            label: {
+              position: 'bottom',
+              distance: 10,
+              show: true,
+              color: '#e68b55',
+              fontSize: 16,
             },
-            },*/
             data: [],
           },
         ]
@@ -225,7 +253,7 @@ export default {
       this.setOptionsColor();*/
       this.setOptionsData();
     },
-/*    // 标题修改
+    /*    // 标题修改
         setOptionsTitle() {
           const optionsCollapse = this.optionsSetup;
           const title = {};
@@ -522,6 +550,7 @@ export default {
       this.options.series[1]['name'] = arrayList[1].name
       this.options.series[1]['data'] = arrayList[1].data
       this.options.xAxis[0]['data'] = xAxisList
+      this.options.xAxis[1]['data'] = xAxisList
     },
     // 动态数据
     dynamicDataFn(val, refreshTime, optionsSetup) {
@@ -543,7 +572,7 @@ export default {
     },
     renderingFn(optionsSetup, val) {
       this.options.yAxis[1]['data'] = val.xAxis
-      if (val.series[0].type == "bar"){
+      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

report-ui/src/views/report/bigscreen/designer/widget/widgetLinechart.vue

@@ -180,7 +180,7 @@ export default {
         axisLabel: {
           show: true,
           textStyle: {
-            color: optionsCollapse.colorY, // x轴 坐标文字颜色
+            color: optionsCollapse.colorY, // y轴 坐标文字颜色
             fontSize: optionsCollapse.fontSizeY
           }
         },