静态数据调整

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

@@ -7,762 +7,701 @@
  * @LastEditTime: 2021-09-28 14:11:57
  */
 export const widgetBarlinechart = {
-    code: 'widget-barlinechart',
-    type: 'chart',
-    label: '柱线图',
-    icon: 'iconzhuxiantu',
-    options: {
-      // 配置
-      setup: [
+  code: 'widget-barlinechart',
+  type: 'chart',
+  label: '柱线图',
+  icon: 'iconzhuxiantu',
+  options: {
+    // 配置
+    setup: [
+      {
+        type: 'el-input-text',
+        label: '图层名称',
+        name: 'layerName',
+        required: false,
+        placeholder: '',
+        value: '柱线图',
+      },
+      {
+        type: 'vue-color',
+        label: '背景颜色',
+        name: 'background',
+        required: false,
+        placeholder: '',
+        value: ''
+      },
+      [
         {
-          type: 'el-input-text',
-          label: '图层名称',
-          name: 'layerName',
-          required: false,
-          placeholder: '',
-          value: '柱线图',
+          name: '折线设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '标记点',
+              name: 'markPoint',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-slider',
+              label: '点大小',
+              name: 'pointSize',
+              required: false,
+              placeholder: '',
+              value: 5,
+            },
+            {
+              type: 'el-switch',
+              label: '平滑曲线',
+              name: 'smoothCurve',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-switch',
+              label: '面积堆积',
+              name: 'area',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-slider',
+              label: '面积厚度',
+              name: 'areaThickness',
+              required: false,
+              placeholder: '',
+              value: 5,
+            },
+            {
+              type: 'el-slider',
+              label: '线条宽度',
+              name: 'lineWidth',
+              required: false,
+              placeholder: '',
+              value: 3,
+            },
+          ],
         },
         {
-          type: 'vue-color',
-          label: '背景颜色',
-          name: 'background',
-          required: false,
-          placeholder: '',
-          value: ''
+          name: '柱体设置',
+          list: [
+            {
+              type: 'el-slider',
+              label: '最大宽度',
+              name: 'maxWidth',
+              required: false,
+              placeholder: '',
+              value: 10,
+            },
+            {
+              type: 'el-slider',
+              label: '圆角',
+              name: 'radius',
+              require: false,
+              placeholder: '',
+              value: 5,
+            },
+            {
+              type: 'el-slider',
+              label: '最小高度',
+              name: 'minHeight',
+              require: false,
+              placeholder: '',
+              value: 0,
+            },
+          ],
         },
-        [
-          {
-            name: '折线设置',
-            list: [
-              {
-                type: 'el-switch',
-                label: '标记点',
-                name: 'markPoint',
-                required: false,
-                placeholder: '',
-                value: true,
-              },
-              {
-                type: 'el-slider',
-                label: '点大小',
-                name: 'pointSize',
-                required: false,
-                placeholder: '',
-                value: 5,
-              },
-              {
-                type: 'el-switch',
-                label: '平滑曲线',
-                name: 'smoothCurve',
-                required: false,
-                placeholder: '',
-                value: true,
-              },
-              {
-                type: 'el-switch',
-                label: '面积堆积',
-                name: 'area',
-                required: false,
-                placeholder: '',
-                value: true,
-              },
-              {
-                type: 'el-slider',
-                label: '面积厚度',
-                name: 'areaThickness',
-                required: false,
-                placeholder: '',
-                value: 5,
-              },
-              {
-                type: 'el-slider',
-                label: '线条宽度',
-                name: 'lineWidth',
-                required: false,
-                placeholder: '',
-                value: 3,
-              },
-            ],
-          },
-          {
-            name: '柱体设置',
-            list: [
-              {
-                type: 'el-slider',
-                label: '最大宽度',
-                name: 'maxWidth',
-                required: false,
-                placeholder: '',
-                value: 10,
-              },
-              {
-                type: 'el-slider',
-                label: '圆角',
-                name: 'radius',
-                require: false,
-                placeholder: '',
-                value: 5,
-              },
-              {
-                type: 'el-slider',
-                label: '最小高度',
-                name: 'minHeight',
-                require: false,
-                placeholder: '',
-                value: 0,
-              },
-            ],
-          },
-          {
-            name: '标题设置',
-            list: [
-              {
-                type: 'el-switch',
-                label: '标题',
-                name: 'isNoTitle',
-                required: false,
-                placeholder: '',
-                value: true
-              },
-              {
-                type: 'el-input-text',
-                label: '标题',
-                name: 'titleText',
-                required: false,
-                placeholder: '',
-                value: ''
-              },
-              {
-                type: 'vue-color',
-                label: '字体颜色',
-                name: 'textColor',
-                required: false,
-                placeholder: '',
-                value: '#fff'
-              },
-              {
-                type: 'el-select',
-                label: '字体粗细',
-                name: 'textFontWeight',
-                required: false,
-                placeholder: '',
-                selectOptions: [
-                  {code: 'normal', name: '正常'},
-                  {code: 'bold', name: '粗体'},
-                  {code: 'bolder', name: '特粗体'},
-                  {code: 'lighter', name: '细体'}
-                ],
-                value: 'normal'
-              },
-              {
-                type: 'el-input-number',
-                label: '字体大小',
-                name: 'textFontSize',
-                required: false,
-                placeholder: '',
-                value: 20
-              },
-              {
-                type: 'el-select',
-                label: '字体位置',
-                name: 'textAlign',
-                required: false,
-                placeholder: '',
-                selectOptions: [
-                  {code: 'center', name: '居中'},
-                  {code: 'left', name: '左对齐'},
-                  {code: 'right', name: '右对齐'},
-                ],
-                value: 'left'
-              },
-              {
-                type: 'el-input-text',
-                label: '副标题',
-                name: 'subText',
-                required: false,
-                placeholder: '',
-                value: ''
-              },
-              {
-                type: 'vue-color',
-                label: '字体颜色',
-                name: 'subTextColor',
-                required: false,
-                placeholder: '',
-                value: '#fff'
-              },
-              {
-                type: 'el-select',
-                label: '字体粗细',
-                name: 'subTextFontWeight',
-                required: false,
-                placeholder: '',
-                selectOptions: [
-                  {code: 'normal', name: '正常'},
-                  {code: 'bold', name: '粗体'},
-                  {code: 'bolder', name: '特粗体'},
-                  {code: 'lighter', name: '细体'}
-                ],
-                value: 'normal'
-              },
-              {
-                type: 'el-input-number',
-                label: '字体大小',
-                name: 'subTextFontSize',
-                required: false,
-                placeholder: '',
-                value: 20
-              },
-            ],
-          },
-          {
-            name: 'X轴设置',
-            list: [
-              {
-                type: 'el-switch',
-                label: '显示',
-                name: 'hideX',
-                required: false,
-                placeholder: '',
-                value: true,
-              },
-              {
-                type: 'el-input-text',
-                label: '坐标名',
-                name: 'xName',
-                required: false,
-                placeholder: '',
-                value: ''
-              },
-              {
-                type: 'vue-color',
-                label: '坐标名颜色',
-                name: 'nameColorX',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              },
-              {
-                type: 'el-input-number',
-                label: '坐标字号',
-                name: 'nameFontSizeX',
-                required: false,
-                placeholder: '',
-                value: 14,
-              },
-              {
-                type: 'vue-color',
-                label: '数值颜色',
-                name: 'Xcolor',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              },
-              {
-                type: 'el-input-number',
-                label: '数值字号',
-                name: 'fontSizeX',
-                required: false,
-                placeholder: '',
-                value: 14,
-              },
-              {
-                type: 'el-slider',
-                label: '数值角度',
-                name: 'textAngle',
-                required: false,
-                placeholder: '',
-                value: 0
-              },
-              {
-                type: 'el-input-number',
-                label: '数值间隔',
-                name: 'textInterval',
-                required: false,
-                placeholder: '',
-                value: ''
-              },
-              {
-                type: 'el-switch',
-                label: '轴反转',
-                name: 'reversalX',
-                required: false,
-                placeholder: '',
-                value: false
-              },
-              {
-                type: 'vue-color',
-                label: '轴颜色',
-                name: 'lineColorX',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              },
-              {
-                type: 'el-switch',
-                label: '分割线显示',
-                name: 'isShowSplitLineX',
-                require: false,
-                placeholder: '',
-                value: false,
-              },
-              {
-                type: 'vue-color',
-                label: '分割线颜色',
-                name: 'splitLineColorX',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              }
-            ],
-          },
-          {
-            name: 'Y轴设置',
-            list: [
-              {
-                type: 'el-switch',
-                label: '左显示',
-                name: 'isShowYLeft',
-                require: false,
-                placeholder: '',
-                value: true,
-              },
-              {
-                type: 'el-input-text',
-                label: '左坐标名',
-                name: 'textNameYLeft',
-                require: false,
-                placeholder: '',
-                value: ''
-              },
-              {
-                type: 'vue-color',
-                label: '左坐标名颜色',
-                name: 'nameColorYLeft',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              },
-              {
-                type: 'el-input-number',
-                label: '左坐标字号',
-                name: 'namefontSizeYLeft',
-                required: false,
-                placeholder: '',
-                value: 14,
-              },
-              {
-                type: 'el-input-number',
-                label: '左均分',
-                name: 'splitNumberLeft',
-                required: false,
-                placeholder: '',
-                value: ''
-              },
-              {
-                type: 'el-switch',
-                label: '右显示',
-                name: 'isShowYRight',
-                require: false,
-                placeholder: '',
-                value: true,
-              },
-              {
-                type: 'el-input-text',
-                label: '右坐标名',
-                name: 'textNameYRight',
-                require: false,
-                placeholder: '',
-                value: ''
-              },
-              {
-                type: 'vue-color',
-                label: '右坐标名颜色',
-                name: 'nameColorYRight',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              },
-              {
-                type: 'el-input-number',
-                label: '右坐标字号',
-                name: 'namefontSizeYRight',
-                required: false,
-                placeholder: '',
-                value: 14,
-              },
-              {
-                type: 'el-input-number',
-                label: '右均分',
-                name: 'splitNumberRight',
-                required: false,
-                placeholder: '',
-                value: ''
-              },
-              {
-                type: 'vue-color',
-                label: '数值颜色',
-                name: 'colorY',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              },
-              {
-                type: 'el-input-number',
-                label: '数值字号',
-                name: 'fontSizeY',
-                required: false,
-                placeholder: '',
-                value: 14,
-              },
-              {
-                type: 'el-switch',
-                label: '轴反转',
-                name: 'reversalY',
-                required: false,
-                placeholder: '',
-                value: false
-              },
-              {
-                type: 'vue-color',
-                label: '轴颜色',
-                name: 'lineColorY',
-                required: false,
-                placeholder: '',
-                value: '#fff',
-              },
-            ],
-          },
-          {
-            name: '折线数值设定',
-            list: [
-              {
-                type: 'el-switch',
-                label: '显示',
-                name: 'isShowLine',
-                required: false,
-                placeholder: '',
-                value: false
-              },
-              {
-                type: 'el-input-number',
-                label: '距离',
-                name: 'distanceLine',
-                required: false,
-                placeholder: '',
-                value: 5
-              },
-              {
-                type: 'el-input-number',
-                label: '字体字号',
-                name: 'fontSizeLine',
-                required: false,
-                placeholder: '',
-                value: 14
-              },
-              {
-                type: 'vue-color',
-                label: '字体颜色',
-                name: 'subTextColorLine',
-                required: false,
-                placeholder: '',
-                value: '#fff'
-              },
-              {
-                type: 'el-select',
-                label: '字体粗细',
-                name: 'fontWeightLine',
-                required: false,
-                placeholder: '',
-                selectOptions: [
-                  {code: 'normal', name: '正常'},
-                  {code: 'bold', name: '粗体'},
-                  {code: 'bolder', name: '特粗体'},
-                  {code: 'lighter', name: '细体'}
-                ],
-                value: 'normal'
-              },
-            ],
-          },
-          {
-            name: '柱体数值设定',
-            list: [
-              {
-                type: 'el-switch',
-                label: '显示',
-                name: 'isShowBar',
-                required: false,
-                placeholder: '',
-                value: false
-              },
-              {
-                type: 'el-input-number',
-                label: '距离',
-                name: 'distanceBar',
-                required: false,
-                placeholder: '',
-                value: 5
-              },
-              {
-                type: 'el-input-number',
-                label: '字体字号',
-                name: 'fontSizeBar',
-                required: false,
-                placeholder: '',
-                value: 14
-              },
-              {
-                type: 'vue-color',
-                label: '字体颜色',
-                name: 'subTextColorBar',
-                required: false,
-                placeholder: '',
-                value: '#fff'
-              },
-              {
-                type: 'el-select',
-                label: '字体粗细',
-                name: 'fontWeightBar',
-                required: false,
-                placeholder: '',
-                selectOptions: [
-                  {code: 'normal', name: '正常'},
-                  {code: 'bold', name: '粗体'},
-                  {code: 'bolder', name: '特粗体'},
-                  {code: 'lighter', name: '细体'}
-                ],
-                value: 'normal'
-              },
-            ],
-          },
-          {
-            name: '提示语设置',
-            list: [
-              {
-                type: 'el-input-number',
-                label: '字体大小',
-                name: 'tipFontSize',
-                required: false,
-                placeholder: '',
-                value: 12
-              },
-              {
-                type: 'vue-color',
-                label: '字体颜色',
-                name: 'lineColor',
-                required: false,
-                placeholder: '',
-                value: '#e68b55'
-              },
-            ],
-          },
-          {
-            name: '坐标轴边距设置',
-            list: [
-              {
-                type: 'el-slider',
-                label: '左边距(像素)',
-                name: 'marginLeft',
-                required: false,
-                placeholder: '',
-                value: 10,
-              }, {
-                type: 'el-slider',
-                label: '顶边距(像素)',
-                name: 'marginTop',
-                required: false,
-                placeholder: '',
-                value: 50,
-              }, {
-                type: 'el-slider',
-                label: '右边距(像素)',
-                name: 'marginRight',
-                required: false,
-                placeholder: '',
-                value: 40,
-              }, {
-                type: 'el-slider',
-                label: '底边距(像素)',
-                name: 'marginBottom',
-                required: false,
-                placeholder: '',
-                value: 10,
-              },
-            ],
-          },
-          /*{
-            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: '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: '自定义配色',
-            list: [
-              {
-                type: 'customColor',
-                label: '',
-                name: 'customColor',
-                required: false,
-                value: [{color: '#00F4FFFF'}, {color: '#e68b55'}],
-              },
-            ],
-          },
-        ],
-      ],
-      // 数据
-      data: [
         {
-          type: 'el-radio-group',
-          label: '数据类型',
-          name: 'dataType',
-          require: false,
-          placeholder: '',
-          selectValue: true,
-          selectOptions: [
+          name: '标题设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '标题',
+              name: 'isNoTitle',
+              required: false,
+              placeholder: '',
+              value: true
+            },
+            {
+              type: 'el-input-text',
+              label: '标题',
+              name: 'titleText',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'textColor',
+              required: false,
+              placeholder: '',
+              value: '#fff'
+            },
             {
-              code: 'staticData',
-              name: '静态数据',
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'textFontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '特粗体'},
+                {code: 'lighter', name: '细体'}
+              ],
+              value: 'normal'
             },
             {
-              code: 'dynamicData',
-              name: '动态数据',
+              type: 'el-input-number',
+              label: '字体大小',
+              name: 'textFontSize',
+              required: false,
+              placeholder: '',
+              value: 20
+            },
+            {
+              type: 'el-select',
+              label: '字体位置',
+              name: 'textAlign',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'center', name: '居中'},
+                {code: 'left', name: '左对齐'},
+                {code: 'right', name: '右对齐'},
+              ],
+              value: 'left'
+            },
+            {
+              type: 'el-input-text',
+              label: '副标题',
+              name: 'subText',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'subTextColor',
+              required: false,
+              placeholder: '',
+              value: '#fff'
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'subTextFontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '特粗体'},
+                {code: 'lighter', name: '细体'}
+              ],
+              value: 'normal'
+            },
+            {
+              type: 'el-input-number',
+              label: '字体大小',
+              name: 'subTextFontSize',
+              required: false,
+              placeholder: '',
+              value: 20
             },
           ],
-          value: 'staticData',
         },
         {
-          type: 'el-input-number',
-          label: '刷新时间(毫秒)',
-          name: 'refreshTime',
-          relactiveDom: 'dataType',
-          relactiveDomValue: 'dynamicData',
-          value: 5000
+          name: 'X轴设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'hideX',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: '坐标名',
+              name: 'xName',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '坐标名颜色',
+              name: 'nameColorX',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '坐标字号',
+              name: 'nameFontSizeX',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'vue-color',
+              label: '数值颜色',
+              name: 'Xcolor',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '数值字号',
+              name: 'fontSizeX',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'el-slider',
+              label: '数值角度',
+              name: 'textAngle',
+              required: false,
+              placeholder: '',
+              value: 0
+            },
+            {
+              type: 'el-input-number',
+              label: '数值间隔',
+              name: 'textInterval',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'el-switch',
+              label: '轴反转',
+              name: 'reversalX',
+              required: false,
+              placeholder: '',
+              value: false
+            },
+            {
+              type: 'vue-color',
+              label: '轴颜色',
+              name: 'lineColorX',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-switch',
+              label: '分割线显示',
+              name: 'isShowSplitLineX',
+              require: false,
+              placeholder: '',
+              value: false,
+            },
+            {
+              type: 'vue-color',
+              label: '分割线颜色',
+              name: 'splitLineColorX',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            }
+          ],
         },
         {
-          type: 'el-button',
-          label: '静态数据',
-          name: 'staticData',
-          required: false,
-          placeholder: '',
-          relactiveDom: 'dataType',
-          relactiveDomValue: 'staticData',
-          value: {"xAxis": ["1月", "2月", "3月", "4月", "5月","6月", "7月", "8月","9月","10月","11月","12月"],"series": [{"type": "bar","name": "货运量","data": [2.6,5.9,9,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6,2.3]},{"type": "line","name": "货运总量","yAxisIndex": 1,"data": [2,2.2,3.3,4.5,6.3,10.2,20.3,23.4,23,16.5,12,6.2]}]},
+          name: 'Y轴设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '左显示',
+              name: 'isShowYLeft',
+              require: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: '左坐标名',
+              name: 'textNameYLeft',
+              require: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '左坐标名颜色',
+              name: 'nameColorYLeft',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '左坐标字号',
+              name: 'namefontSizeYLeft',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'el-input-number',
+              label: '左均分',
+              name: 'splitNumberLeft',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'el-switch',
+              label: '右显示',
+              name: 'isShowYRight',
+              require: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: '右坐标名',
+              name: 'textNameYRight',
+              require: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '右坐标名颜色',
+              name: 'nameColorYRight',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '右坐标字号',
+              name: 'namefontSizeYRight',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'el-input-number',
+              label: '右均分',
+              name: 'splitNumberRight',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '数值颜色',
+              name: 'colorY',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '数值字号',
+              name: 'fontSizeY',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'el-switch',
+              label: '轴反转',
+              name: 'reversalY',
+              required: false,
+              placeholder: '',
+              value: false
+            },
+            {
+              type: 'vue-color',
+              label: '轴颜色',
+              name: 'lineColorY',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+          ],
         },
         {
-          type: 'dycustComponents',
-          label: '',
-          name: 'dynamicData',
-          required: false,
-          placeholder: '',
-          relactiveDom: 'dataType',
-          chartType: 'widget-barlinechart',
-          dictKey: 'BAR_LINE_PROPERTIES',
-          relactiveDomValue: 'dynamicData',
+          name: '折线数值设定',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShowLine',
+              required: false,
+              placeholder: '',
+              value: false
+            },
+            {
+              type: 'el-input-number',
+              label: '距离',
+              name: 'distanceLine',
+              required: false,
+              placeholder: '',
+              value: 5
+            },
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'fontSizeLine',
+              required: false,
+              placeholder: '',
+              value: 14
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'subTextColorLine',
+              required: false,
+              placeholder: '',
+              value: '#fff'
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'fontWeightLine',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '特粗体'},
+                {code: 'lighter', name: '细体'}
+              ],
+              value: 'normal'
+            },
+          ],
         },
-      ],
-      // 坐标
-      position: [
         {
-          type: 'el-input-number',
-          label: '左边距',
-          name: 'left',
-          required: false,
-          placeholder: '',
-          value: 0,
+          name: '柱体数值设定',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShowBar',
+              required: false,
+              placeholder: '',
+              value: false
+            },
+            {
+              type: 'el-input-number',
+              label: '距离',
+              name: 'distanceBar',
+              required: false,
+              placeholder: '',
+              value: 5
+            },
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'fontSizeBar',
+              required: false,
+              placeholder: '',
+              value: 14
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'subTextColorBar',
+              required: false,
+              placeholder: '',
+              value: '#fff'
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'fontWeightBar',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '特粗体'},
+                {code: 'lighter', name: '细体'}
+              ],
+              value: 'normal'
+            },
+          ],
         },
         {
-          type: 'el-input-number',
-          label: '上边距',
-          name: 'top',
-          required: false,
-          placeholder: '',
-          value: 0,
+          name: '提示语设置',
+          list: [
+            {
+              type: 'el-input-number',
+              label: '字体大小',
+              name: 'tipFontSize',
+              required: false,
+              placeholder: '',
+              value: 12
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'lineColor',
+              required: false,
+              placeholder: '',
+              value: '#e68b55'
+            },
+          ],
         },
         {
-          type: 'el-input-number',
-          label: '宽度',
-          name: 'width',
-          required: false,
-          placeholder: '该容器在1920px大屏中的宽度',
-          value: 400,
+          name: '坐标轴边距设置',
+          list: [
+            {
+              type: 'el-slider',
+              label: '左边距(像素)',
+              name: 'marginLeft',
+              required: false,
+              placeholder: '',
+              value: 10,
+            }, {
+              type: 'el-slider',
+              label: '顶边距(像素)',
+              name: 'marginTop',
+              required: false,
+              placeholder: '',
+              value: 50,
+            }, {
+              type: 'el-slider',
+              label: '右边距(像素)',
+              name: 'marginRight',
+              required: false,
+              placeholder: '',
+              value: 40,
+            }, {
+              type: 'el-slider',
+              label: '底边距(像素)',
+              name: 'marginBottom',
+              required: false,
+              placeholder: '',
+              value: 10,
+            },
+          ],
         },
         {
-          type: 'el-input-number',
-          label: '高度',
-          name: 'height',
-          required: false,
-          placeholder: '该容器在1080px大屏中的高度',
-          value: 200,
+          name: '自定义配色',
+          list: [
+            {
+              type: 'customColor',
+              label: '',
+              name: 'customColor',
+              required: false,
+              value: [{color: '#00F4FFFF'}, {color: '#e68b55'}],
+            },
+          ],
         },
       ],
-    }
+    ],
+    // 数据
+    data: [
+      {
+        type: 'el-radio-group',
+        label: '数据类型',
+        name: 'dataType',
+        require: false,
+        placeholder: '',
+        selectValue: true,
+        selectOptions: [
+          {
+            code: 'staticData',
+            name: '静态数据',
+          },
+          {
+            code: 'dynamicData',
+            name: '动态数据',
+          },
+        ],
+        value: 'staticData',
+      },
+      {
+        type: 'el-input-number',
+        label: '刷新时间(毫秒)',
+        name: 'refreshTime',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'dynamicData',
+        value: 5000
+      },
+      {
+        type: 'el-button',
+        label: '静态数据',
+        name: 'staticData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'staticData',
+        value: [
+          {"axis": "1月", "bar": 2.6, "line": 2},
+          {"axis": "2月", "bar": 5.9, "line": 2.2},
+          {"axis": "3月", "bar": 9, "line": 3.3},
+          {"axis": "4月", "bar": 26.4, "line": 4.5},
+          {"axis": "5月", "bar": 28.7, "line": 6.3},
+          {"axis": "6月", "bar": 70.7, "line": 10.2},
+          {"axis": "7月", "bar": 175.6, "line": 20.3},
+          {"axis": "8月", "bar": 182.2, "line": 23.4},
+          {"axis": "9月", "bar": 48.7, "line": 23},
+          {"axis": "10月", "bar": 18.8, "line": 16.5},
+          {"axis": "11月", "bar": 6, "line": 12},
+          {"axis": "12月", "bar": 2.3, "line": 6.2},
+        ]
+      },
+      {
+        type: 'dycustComponents',
+        label: '',
+        name: 'dynamicData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        chartType: 'widget-barlinechart',
+        dictKey: 'BAR_LINE_PROPERTIES',
+        relactiveDomValue: 'dynamicData',
+      },
+    ],
+    // 坐标
+    position: [
+      {
+        type: 'el-input-number',
+        label: '左边距',
+        name: 'left',
+        required: false,
+        placeholder: '',
+        value: 0,
+      },
+      {
+        type: 'el-input-number',
+        label: '上边距',
+        name: 'top',
+        required: false,
+        placeholder: '',
+        value: 0,
+      },
+      {
+        type: 'el-input-number',
+        label: '宽度',
+        name: 'width',
+        required: false,
+        placeholder: '该容器在1920px大屏中的宽度',
+        value: 400,
+      },
+      {
+        type: 'el-input-number',
+        label: '高度',
+        name: 'height',
+        required: false,
+        placeholder: '该容器在1080px大屏中的高度',
+        value: 200,
+      },
+    ],
   }
+}

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

@@ -143,57 +143,57 @@ export default {
     },
     // 标题修改
     setOptionsTitle() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const title = {};
-      title.text = optionsCollapse.titleText;
-      title.show = optionsCollapse.isNoTitle;
-      title.left = optionsCollapse.textAlign;
+      title.text = optionsSetup.titleText;
+      title.show = optionsSetup.isNoTitle;
+      title.left = optionsSetup.textAlign;
       title.textStyle = {
-        color: optionsCollapse.textColor,
-        fontSize: optionsCollapse.textFontSize,
-        fontWeight: optionsCollapse.textFontWeight
+        color: optionsSetup.textColor,
+        fontSize: optionsSetup.textFontSize,
+        fontWeight: optionsSetup.textFontWeight
       };
-      title.subtext = optionsCollapse.subText;
+      title.subtext = optionsSetup.subText;
       title.subtextStyle = {
-        color: optionsCollapse.subTextColor,
-        fontWeight: optionsCollapse.subTextFontWeight,
-        fontSize: optionsCollapse.subTextFontSize
+        color: optionsSetup.subTextColor,
+        fontWeight: optionsSetup.subTextFontWeight,
+        fontSize: optionsSetup.subTextFontSize
       };
 
       this.options.title = title;
     },
     // X轴设置
     setOptionsX() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const xAxis = {
         type: "category",
-        show: optionsCollapse.hideX, // 坐标轴是否显示
-        name: optionsCollapse.xName, // 坐标轴名称
+        show: optionsSetup.hideX, // 坐标轴是否显示
+        name: optionsSetup.xName, // 坐标轴名称
         nameTextStyle: {
-          color: optionsCollapse.nameColorX,
-          fontSize: optionsCollapse.nameFontSizeX
+          color: optionsSetup.nameColorX,
+          fontSize: optionsSetup.nameFontSizeX
         },
-        nameRotate: optionsCollapse.textAngle, // 文字角度
-        inverse: optionsCollapse.reversalX, // 轴反转
+        nameRotate: optionsSetup.textAngle, // 文字角度
+        inverse: optionsSetup.reversalX, // 轴反转
         axisLabel: {
           show: true,
-          interval: optionsCollapse.textInterval, // 文字间隔
-          rotate: optionsCollapse.textAngle, // 文字角度
+          interval: optionsSetup.textInterval, // 文字间隔
+          rotate: optionsSetup.textAngle, // 文字角度
           textStyle: {
-            color: optionsCollapse.Xcolor, // x轴 坐标文字颜色
-            fontSize: optionsCollapse.fontSizeX
+            color: optionsSetup.Xcolor, // x轴 坐标文字颜色
+            fontSize: optionsSetup.fontSizeX
           }
         },
         axisLine: {
           show: true,
           lineStyle: {
-            color: optionsCollapse.lineColorX
+            color: optionsSetup.lineColorX
           }
         },
         splitLine: {
-          show: optionsCollapse.isShowSplitLineX,
+          show: optionsSetup.isShowSplitLineX,
           lineStyle: {
-            color: optionsCollapse.splitLineColorX
+            color: optionsSetup.splitLineColorX
           }
         }
       };
@@ -201,29 +201,29 @@ export default {
     },
     // Y轴设置
     setOptionsY() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const yAxis = [
         {
           type: "value",
-          splitNumber: optionsCollapse.splitNumberLeft,// 均分
-          show: optionsCollapse.isShowYLeft, // 坐标轴是否显示
-          name: optionsCollapse.textNameYLeft, // 坐标轴名称
+          splitNumber: optionsSetup.splitNumberLeft,// 均分
+          show: optionsSetup.isShowYLeft, // 坐标轴是否显示
+          name: optionsSetup.textNameYLeft, // 坐标轴名称
           nameTextStyle: { // 别名
-            color: optionsCollapse.nameColorYLeft,
-            fontSize: optionsCollapse.namefontSizeYLeft
+            color: optionsSetup.nameColorYLeft,
+            fontSize: optionsSetup.namefontSizeYLeft
           },
-          inverse: optionsCollapse.reversalY, // 轴反转
+          inverse: optionsSetup.reversalY, // 轴反转
           axisLabel: {
             show: true,
             textStyle: {
-              color: optionsCollapse.colorY, // y轴 坐标文字颜色
-              fontSize: optionsCollapse.fontSizeY
+              color: optionsSetup.colorY, // y轴 坐标文字颜色
+              fontSize: optionsSetup.fontSizeY
             }
           },
           axisLine: {
             show: true,
             lineStyle: {
-              color: optionsCollapse.lineColorY
+              color: optionsSetup.lineColorY
             }
           },
           splitLine: {
@@ -232,25 +232,25 @@ export default {
         },
         {
           type: "value",
-          splitNumber: optionsCollapse.splitNumberRight,// 均分
-          show: optionsCollapse.isShowYRight, // 坐标轴是否显示
-          name: optionsCollapse.textNameYRight, // 坐标轴名称
+          splitNumber: optionsSetup.splitNumberRight,// 均分
+          show: optionsSetup.isShowYRight, // 坐标轴是否显示
+          name: optionsSetup.textNameYRight, // 坐标轴名称
           nameTextStyle: { // 别名
-            color: optionsCollapse.nameColorYRight,
-            fontSize: optionsCollapse.namefontSizeYRight
+            color: optionsSetup.nameColorYRight,
+            fontSize: optionsSetup.namefontSizeYRight
           },
-          inverse: optionsCollapse.reversalY, // 轴反转
+          inverse: optionsSetup.reversalY, // 轴反转
           axisLabel: {
             show: true,
             textStyle: {
-              color: optionsCollapse.colorY, // y轴 坐标文字颜色
-              fontSize: optionsCollapse.fontSizeY
+              color: optionsSetup.colorY, // y轴 坐标文字颜色
+              fontSize: optionsSetup.fontSizeY
             }
           },
           axisLine: {
             show: true,
             lineStyle: {
-              color: optionsCollapse.lineColorY
+              color: optionsSetup.lineColorY
             }
           },
           splitLine: {
@@ -262,16 +262,16 @@ export default {
     },
     // 折线设置 数值设置
     setOptionsTop() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const series = this.options.series;
       for (const key in series) {
         if (series[key].type == "line") {
-          series[key].showSymbol = optionsCollapse.markPoint;
-          series[key].symbolSize = optionsCollapse.pointSize;
-          series[key].smooth = optionsCollapse.smoothCurve;
-          if (optionsCollapse.area) {
+          series[key].showSymbol = optionsSetup.markPoint;
+          series[key].symbolSize = optionsSetup.pointSize;
+          series[key].smooth = optionsSetup.smoothCurve;
+          if (optionsSetup.area) {
             series[key].areaStyle = {
-              opacity: optionsCollapse.areaThickness / 100
+              opacity: optionsSetup.areaThickness / 100
             };
           } else {
             series[key].areaStyle = {
@@ -279,16 +279,16 @@ export default {
             };
           }
           series[key].lineStyle = {
-            width: optionsCollapse.lineWidth
+            width: optionsSetup.lineWidth
           };
-          series[key].itemStyle.borderRadius = optionsCollapse.radius;
+          series[key].itemStyle.borderRadius = optionsSetup.radius;
           series[key].label = {
-            show: optionsCollapse.isShowLine,
+            show: optionsSetup.isShowLine,
             position: "top",
-            distance: optionsCollapse.distanceLine,
-            fontSize: optionsCollapse.fontSizeLine,
-            color: optionsCollapse.subTextColorLine,
-            fontWeight: optionsCollapse.fontWeightLine
+            distance: optionsSetup.distanceLine,
+            fontSize: optionsSetup.fontSizeLine,
+            color: optionsSetup.subTextColorLine,
+            fontWeight: optionsSetup.fontWeightLine
           };
         }
       }
@@ -296,71 +296,54 @@ export default {
     },
     // 柱体设置 数值设置
     setOptionsBar() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const series = this.options.series;
       for (const key in series) {
         if (series[key].type == "bar") {
           series[key].label = {
-            show: optionsCollapse.isShowBar,
+            show: optionsSetup.isShowBar,
             position: "top",
-            distance: optionsCollapse.distanceBar,
-            fontSize: optionsCollapse.fontSizeBar,
-            color: optionsCollapse.subTextColorBar,
-            fontWeight: optionsCollapse.fontWeightBar
+            distance: optionsSetup.distanceBar,
+            fontSize: optionsSetup.fontSizeBar,
+            color: optionsSetup.subTextColorBar,
+            fontWeight: optionsSetup.fontWeightBar
           };
-          series[key].barWidth = optionsCollapse.maxWidth;
-          series[key].barMinHeight = optionsCollapse.minHeight;
-          series[key].itemStyle.barBorderRadius = optionsCollapse.radius;
+          series[key].barWidth = optionsSetup.maxWidth;
+          series[key].barMinHeight = optionsSetup.minHeight;
+          series[key].itemStyle.barBorderRadius = optionsSetup.radius;
         }
       }
       this.options.series = series;
     },
     // tooltip 设置
     setOptionsTooltip() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const tooltip = {
         trigger: "item",
         show: true,
         textStyle: {
-          color: optionsCollapse.lineColor,
-          fontSize: optionsCollapse.tipFontSize
+          color: optionsSetup.lineColor,
+          fontSize: optionsSetup.tipFontSize
         }
       };
       this.options.tooltip = tooltip;
     },
     // 边距设置
     setOptionsMargin() {
-      const optionsCollapse = this.optionsSetup;
+      const optionsSetup = this.optionsSetup;
       const grid = {
-        left: optionsCollapse.marginLeft,
-        right: optionsCollapse.marginRight,
-        bottom: optionsCollapse.marginBottom,
-        top: optionsCollapse.marginTop,
+        left: optionsSetup.marginLeft,
+        right: optionsSetup.marginRight,
+        bottom: optionsSetup.marginBottom,
+        top: optionsSetup.marginTop,
         containLabel: true
       };
       this.options.grid = grid;
     },
-/*    // 图例操作 legend
-    setOptionsLegend() {
-      const optionsCollapse = this.optionsSetup;
-      const legend = this.options.legend;
-      legend.show = optionsCollapse.isShowLegend;
-      legend.left = optionsCollapse.lateralPosition;
-      legend.top = optionsCollapse.longitudinalPosition == "top" ? 0 : "auto";
-      legend.bottom =
-        optionsCollapse.longitudinalPosition == "bottom" ? 0 : "auto";
-      legend.orient = optionsCollapse.layoutFront;
-      legend.textStyle = {
-        color: optionsCollapse.lengedColor,
-        fontSize: optionsCollapse.lengedFontSize
-      };
-      legend.itemWidth = optionsCollapse.lengedWidth;
-      console.log(legend);
-    },*/
     // 图例颜色修改
     setOptionsColor() {
-      const optionsCollapse = this.optionsSetup;
-      const customColor = optionsCollapse.customColor;
+      const optionsSetup = this.optionsSetup;
+      const customColor = optionsSetup.customColor;
       if (!customColor) return;
       const arrColor = [];
       for (let i = 0; i < customColor.length; i++) {
@@ -377,16 +360,23 @@ export default {
         : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
     },
     staticDataFn(val) {
-      const staticData = typeof val == "string" ? JSON.parse(val) : val;
+      const series = this.options.series;
+      let axis = [];
+      let bar = [];
+      let line = [];
+      for (const i in val) {
+        axis[i] = val[i].axis;
+        bar[i] = val[i].bar;
+        line[i] = val[i].line;
+      }
       // x轴
-      this.options.xAxis.data = staticData.xAxis;
+      this.options.xAxis.data = axis;
       // series
-      const series = this.options.series;
       for (const i in series) {
-        for (const j in staticData.series) {
-          if (series[i].type == staticData.series[j].type) {
-            series[i].data = staticData.series[j].data;
-          }
+        if (series[i].type == "bar") {
+          series[i].data = bar;
+        } else {
+          series[i].data = line;
         }
       }
     },

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

@@ -6,7 +6,7 @@
  !-->
 <template>
   <div>
-    <component :is="type" :value="value" :ispreview="true" />
+    <component :is="type" :value="value" :ispreview="true"/>
   </div>
 </template>
 
@@ -21,7 +21,7 @@ import widgetVideo from "./widgetVideo.vue";
 import WidgetIframe from "./widgetIframe.vue";
 import widgetBarchart from "./bar/widgetBarchart.vue";
 import widgetLinechart from "./line/widgetLinechart.vue";
-import widgetBarlinechart from "./widgetBarlinechart";
+import widgetBarlinechart from "./bar/widgetBarlinechart";
 import widgetGradientColorBarchart from "./bar/widgetGradientColorBarchart.vue";
 import WidgetPiechart from "./widgetPiechart.vue";
 import WidgetFunnel from "./widgetFunnel.vue";
@@ -72,13 +72,15 @@ export default {
     type: String,
     value: {
       type: [Object],
-      default: () => {}
+      default: () => {
+      }
     }
   },
   data() {
     return {};
   },
-  mounted() {},
+  mounted() {
+  },
   methods: {}
 };
 </script>

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

@@ -17,7 +17,7 @@
     @focus="handleFocus"
     @blur="handleBlur"
   >
-    <component :is="type" :value="value" />
+    <component :is="type" :value="value"/>
   </avue-draggable>
 </template>
 
@@ -33,7 +33,7 @@ import WidgetIframe from "./widgetIframe.vue";
 import widgetBarchart from "./bar/widgetBarchart.vue";
 import widgetGradientColorBarchart from "./bar/widgetGradientColorBarchart.vue";
 import widgetLinechart from "./line/widgetLinechart.vue";
-import widgetBarlinechart from "./widgetBarlinechart";
+import widgetBarlinechart from "./bar/widgetBarlinechart";
 import WidgetPiechart from "./widgetPiechart.vue";
 import WidgetFunnel from "./widgetFunnel.vue";
 import WidgetGauge from "./widgetGauge.vue";
@@ -89,7 +89,8 @@ export default {
     bigscreen: Object,
     value: {
       type: [Object],
-      default: () => {}
+      default: () => {
+      }
     },
     step: Number
   },
@@ -119,11 +120,13 @@ export default {
       return this.value.position.zIndex || 1;
     }
   },
-  mounted() {},
+  mounted() {
+  },
   methods: {
-    handleFocus({ index, left, top, width, height }) {},
-    handleBlur({ index, left, top, width, height }) {
-      this.$emit("onActivated", { index, left, top, width, height });
+    handleFocus({index, left, top, width, height}) {
+    },
+    handleBlur({index, left, top, width, height}) {
+      this.$emit("onActivated", {index, left, top, width, height});
       this.$refs.draggable.setActive(true);
     }
   }
@@ -134,11 +137,13 @@ export default {
 .vue-draggalbe {
   position: absolute;
 }
+
 .widget-active {
   cursor: move;
   border: 1px dashed #09f;
   background-color: rgba(115, 170, 229, 0.5);
 }
+
 .avue-draggable {
   padding: 0 !important;
 }