漏斗图重构

report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-funnel.js

@@ -30,6 +30,14 @@ export const widgetFunnel = {
         placeholder: '',
         value: ''
       },
+      {
+        type: 'el-switch',
+        label: '翻转',
+        name: 'cending',
+        require: false,
+        placeholder: '',
+        value: false,
+      },
       [
         {
           name: '文字设置',
@@ -210,7 +218,7 @@ export const widgetFunnel = {
           list: [
             {
               type: 'el-switch',
-              label: '图例',
+              label: '显示',
               name: 'isShowLegend',
               required: false,
               placeholder: '',
@@ -238,7 +246,7 @@ export const widgetFunnel = {
               name: 'lengedWidth',
               required: false,
               placeholder: '',
-              value: 10,
+              value: 15,
             },
             {
               type: 'el-select',
@@ -247,10 +255,11 @@ export const widgetFunnel = {
               required: false,
               placeholder: '',
               selectOptions: [
+                {code: 'center', name: '居中'},
                 {code: 'left', name: '左对齐'},
                 {code: 'right', name: '右对齐'},
               ],
-              value: ''
+              value: 'center'
             },
             {
               type: 'el-select',
@@ -262,7 +271,7 @@ export const widgetFunnel = {
                 {code: 'top', name: '顶部'},
                 {code: 'bottom', name: '底部'},
               ],
-              value: ''
+              value: 'top'
             },
             {
               type: 'el-select',
@@ -274,7 +283,7 @@ export const widgetFunnel = {
                 {code: 'vertical', name: '竖排'},
                 {code: 'horizontal', name: '横排'},
               ],
-              value: ''
+              value: 'horizontal'
             },
           ],
         },
@@ -332,7 +341,7 @@ export const widgetFunnel = {
         value: [
           {"value": 2, "name": "访问"},
           {"value": 5, "name": "咨询"},
-          {"value": 12, "name": "订单"},
+          {"value": 20, "name": "订单"},
           {"value": 40, "name": "点击"},
           {"value": 125, "name": "展现"}
         ],
@@ -382,7 +391,7 @@ export const widgetFunnel = {
         name: 'height',
         required: false,
         placeholder: '该容器在1080px大屏中的高度',
-        value: 200,
+        value: 500,
       },
     ],
   }

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

@@ -252,7 +252,7 @@ export default {
       handler(val) {
         this.optionsStyle = val.position;
         this.optionsData = val.data;
-        this.optionsSetup = val.setup;
+        this.optionsCollapse = val.setup;
         this.optionsSetup = val.setup;
         this.editorOptions();
       },

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

@@ -34,63 +34,13 @@ export default {
           }
         },
         series: [
-          {
-            name: '',
-            type: 'funnel',
-            left: 'center',
-            width: '90%',
-            sort: 'ascending',
-            label: {
-              normal: {
-                formatter: '{b}',
-                backgroundColor:'#6D480E',
-                borderRadius :3,
-                padding :[5,5,1,5],
-                shadowBlur: 0,
-                shadowOffsetX: 2,
-                shadowOffsetY: 2,
-                shadowColor: '#9E853A'
-              },
-
-            },
-            labelLine: {
-              normal: {
-                show: true,
-                length: 15,
-                lineStyle: {
-                  type: 'solid',
-                  //color: "#6D480E"
-                },
-              }
-            },
-            itemStyle: {
-              normal: {
-                opacity: 0.5,
-                borderColor: '#000',
-                borderWidth: 2,
-                shadowBlur: 0,
-                shadowOffsetX: 0,
-                shadowOffsetY: 10,
-                shadowColor: 'rgba(0, 0, 0, .6)'
-              }
-            },
-            tooltip: {
-              show: false
-            },
-          },
           {
             name: "",
             type: "funnel",
             left: "center",
-            top: 60,
-            bottom: 60,
             width: "80%",
-            min: 0,
-            max: 100,
-            minSize: "0%",
-            maxSize: "100%",
+            //maxSize: '80%',
             sort: "descending",
-            gap: 2,
             label: {
               normal: {
                 position: 'inside',
@@ -105,21 +55,14 @@ export default {
                 formatter: '{b}: {c}'
               }
             },
-            labelLine: {
-              length: 10,
-              lineStyle: {
-                width: 1,
-                type: "solid"
-              }
-            },
             itemStyle: {
               normal: {
                 opacity: 0.8,
                 borderColor: 'rgba(12, 13, 43, .9)',
-                borderWidth: 3,
-                shadowBlur: 5,
+                borderWidth: 1,
+                shadowBlur: 4,
                 shadowOffsetX: 0,
-                shadowOffsetY: 5,
+                shadowOffsetY: 0,
                 shadowColor: 'rgba(0, 0, 0, .6)'
               }
             },
@@ -231,11 +174,11 @@ export default {
       const optionsCollapse = this.optionsSetup;
       const legend = this.options.legend;
       legend.show = optionsCollapse.isShowLegend;
-      legend.left = optionsCollapse.lateralPosition == "left" ? 0 : "auto";
-      legend.right = optionsCollapse.lateralPosition == "right" ? 0 : "auto";
-      legend.top = optionsCollapse.longitudinalPosition == "top" ? 0 : "auto";
+      legend.left = optionsCollapse.lateralPosition;
+      legend.right = optionsCollapse.lateralPosition;
+      legend.top = optionsCollapse.longitudinalPosition;
       legend.bottom =
-        optionsCollapse.longitudinalPosition == "bottom" ? 0 : "auto";
+        optionsCollapse.longitudinalPosition;
       legend.orient = optionsCollapse.layoutFront;
       legend.textStyle = {
         color: optionsCollapse.lengedColor,