结构调整

report-ui/src/views/screenDesigner/config/barCharts/widget-bar-compare.js

@@ -0,0 +1,659 @@
+/*
+ * @Descripttion: 柱状对比图 json
+ * @version:
+ * @Author: qianlishi
+ * @Date: 2021-08-29 07:39:35
+ * @LastEditors: qianlishi
+ * @LastEditTime: 2021-09-28 14:09:58
+ */
+export const widgetBarCompare = {
+  code: 'widgetBarCompareChart',
+  type: 'barChart',
+  tabName: '柱状图',
+  label: '柱状对比图',
+  icon: 'iconduibitupu',
+  options: {
+    // 配置
+    setup: [
+      {
+        type: 'el-input-text',
+        label: '图层名称',
+        name: 'layerName',
+        required: false,
+        placeholder: '',
+        value: '柱状对比图',
+      },
+      {
+        type: 'vue-color',
+        label: '背景颜色',
+        name: 'background',
+        required: false,
+        placeholder: '',
+        value: ''
+      },
+      [
+        {
+          name: '柱体设置',
+          list: [
+            {
+              type: 'el-slider',
+              label: '最大宽度',
+              name: 'maxWidth',
+              required: false,
+              placeholder: '',
+              value: 15,
+            },
+            {
+              type: 'el-slider',
+              label: '圆角',
+              name: 'radius',
+              require: false,
+              placeholder: '',
+              value: 5,
+            },
+          ],
+        },
+        {
+          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: '#FFD700'
+            },
+            {
+              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: 'center'
+            },
+          ],
+        },
+        {
+          name: '图例操作',
+          list: [
+            {
+              type: 'el-switch',
+              label: '图例显示',
+              name: 'isShowLegend',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: '图例名称',
+              name: 'legendName',
+              required: false,
+              placeholder: '多值以' | '隔开',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'lengedColor',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'lengedFontSize',
+              required: false,
+              placeholder: '',
+              value: 12,
+            },
+            {
+              type: 'el-input-number',
+              label: '图例宽度',
+              name: 'lengedWidth',
+              required: false,
+              placeholder: '',
+              value: 12,
+            },
+            {
+              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: '左X轴设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'hideXLeft',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-number',
+              label: '数值间隔',
+              name: 'splitNumberLeft',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '数值颜色',
+              name: 'XcolorLeft',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '数值字号',
+              name: 'fontSizeXLeft',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'el-switch',
+              label: '刻度线',
+              name: 'tickLineLeft',
+              require: false,
+              placeholder: '',
+              value: false,
+            },
+            {
+              type: 'el-switch',
+              label: 'X轴线',
+              name: 'xLineLeft',
+              require: false,
+              placeholder: '',
+              value: false,
+            },
+            {
+              type: 'vue-color',
+              label: '轴颜色',
+              name: 'lineColorXLeft',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-switch',
+              label: '竖分割线',
+              name: 'SplitLineLeft',
+              require: false,
+              placeholder: '',
+              value: false,
+            },
+            {
+              type: 'vue-color',
+              label: '分割线颜色',
+              name: 'SplitLineColorLeft',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '分割线宽度',
+              name: 'SplitLinefontSizeLeft',
+              required: false,
+              placeholder: '',
+              value: 1,
+            },
+            {
+              type: 'el-switch',
+              label: '边框线',
+              name: 'frameLineLeft',
+              require: false,
+              placeholder: '',
+              value: false,
+            },
+          ],
+        },
+        {
+          name: '右X轴设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'hideXRight',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-number',
+              label: '数值间隔',
+              name: 'splitNumberRight',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '数值颜色',
+              name: 'XcolorRight',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '数值字号',
+              name: 'fontSizeXRight',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'el-switch',
+              label: '刻度线',
+              name: 'tickLineRight',
+              require: false,
+              placeholder: '',
+              value: false,
+            },
+            {
+              type: 'el-switch',
+              label: 'X轴线',
+              name: 'xLineRight',
+              require: false,
+              placeholder: '',
+              value: false,
+            },
+            {
+              type: 'vue-color',
+              label: '轴颜色',
+              name: 'lineColorXRight',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-switch',
+              label: '竖分割线',
+              name: 'SplitLineRight',
+              require: false,
+              placeholder: '',
+              value: false,
+            },
+            {
+              type: 'vue-color',
+              label: '分割线颜色',
+              name: 'SplitLineColorRight',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '分割线宽度',
+              name: 'SplitLinefontSizeRight',
+              required: false,
+              placeholder: '',
+              value: 1,
+            },
+            {
+              type: 'el-switch',
+              label: '边框线',
+              name: 'frameLineRight',
+              require: false,
+              placeholder: '',
+              value: false,
+            },
+          ],
+        },
+        {
+          name: 'Y轴设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'hideY',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              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-select',
+              label: '数值对齐',
+              name: 'textAlign',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'center', name: '居中'},
+                {code: 'left', name: '左对齐'},
+                {code: 'right', name: '右对齐'},
+              ],
+              value: 'center'
+            },
+            {
+              type: 'el-switch',
+              label: '刻度线',
+              name: 'tickLineY',
+              require: false,
+              placeholder: '',
+              value: false,
+            },
+            {
+              type: 'el-switch',
+              label: 'Y轴线',
+              name: 'lineY',
+              require: false,
+              placeholder: '',
+              value: false,
+            },
+            {
+              type: 'vue-color',
+              label: '轴颜色',
+              name: 'lineColorY',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+          ],
+        },
+        {
+          name: '数值设定',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShow',
+              required: false,
+              placeholder: '',
+              value: true
+            },
+            {
+              type: 'el-input-number',
+              label: '字体大小',
+              name: 'fontSize',
+              required: false,
+              placeholder: '',
+              value: 14
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'subTextColor',
+              required: false,
+              placeholder: '',
+              value: '#fff'
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'fontWeight',
+              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: 'tipsFontSize',
+              required: false,
+              placeholder: '',
+              value: 16
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'lineColor',
+              required: false,
+              placeholder: '',
+            },
+          ],
+        },
+        {
+          name: '坐标轴边距设置',
+          list: [
+            {
+              type: 'el-slider',
+              label: '左右边距(像素)',
+              name: 'marginLeftRight',
+              required: false,
+              placeholder: '',
+              value: 10,
+            },
+            {
+              type: 'el-slider',
+              label: '顶边距(像素)',
+              name: 'marginTop',
+              required: false,
+              placeholder: '',
+              value: 40,
+            },
+            {
+              type: 'el-slider',
+              label: '底边距(像素)',
+              name: 'marginBottom',
+              required: false,
+              placeholder: '',
+              value: 10,
+            },
+          ],
+        },
+        {
+          name: '自定义配色',
+          list: [
+            {
+              type: 'customColor',
+              label: '',
+              name: 'customColor',
+              required: false,
+              value: [{color: '#36c5e7'}, {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": "07-25", "name": "success", "data": "2"},
+          {"axis": "07-25", "name": "fail", "data": "10"},
+          {"axis": "07-26", "name": "success", "data": "5"},
+          {"axis": "07-26", "name": "fail", "data": "20"},
+          {"axis": "07-27", "name": "success", "data": "15"},
+          {"axis": "07-27", "name": "fail", "data": "30"},
+          {"axis": "07-28", "name": "success", "data": "10"},
+          {"axis": "07-28", "name": "fail", "data": "12"},
+          {"axis": "07-29", "name": "success", "data": "9"},
+          {"axis": "07-29", "name": "fail", "data": "16"},
+        ],
+      },
+      {
+        type: 'dycustComponents',
+        label: '',
+        name: 'dynamicData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'dynamicData',
+        chartType: 'widget-stackchart',
+        dictKey: 'STACK_PROPERTIES',
+        value: '',
+      },
+    ],
+    // 坐标
+    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: 500,
+      },
+      {
+        type: 'el-input-number',
+        label: '高度',
+        name: 'height',
+        required: false,
+        placeholder: '该容器在1080px大屏中的高度',
+        value: 250,
+      },
+    ],
+  }
+}

report-ui/src/views/screenDesigner/config/barCharts/widget-bar-stack.js

@@ -0,0 +1,659 @@
+/*
+ * @Descripttion: 柱状堆叠图
+ * @version:
+ * @Author: qianlishi
+ * @Date: 2021-08-29 07:37:09
+ * @LastEditors: qianlishi
+ * @LastEditTime: 2021-09-28 14:11:09
+ */
+export const widgetBarStack = {
+  code: 'widgetBarStackChart',
+  type: 'barChart',
+  tabName: '柱状图',
+  label: '柱状堆叠图',
+  icon: 'iconbianzu23',
+  options: {
+    // 配置
+    setup: [
+      {
+        type: 'el-input-text',
+        label: '图层名称',
+        name: 'layerName',
+        required: false,
+        placeholder: '',
+        value: '柱状堆叠图',
+      },
+      {
+        type: 'el-switch',
+        label: '竖展示',
+        name: 'verticalShow',
+        required: false,
+        placeholder: '',
+        value: false,
+      },
+      {
+        type: 'vue-color',
+        label: '背景颜色',
+        name: 'background',
+        required: false,
+        placeholder: '',
+        value: ''
+      },
+      {
+        type: 'el-select',
+        label: '堆叠样式',
+        name: 'stackStyle',
+        required: false,
+        placeholder: '',
+        selectOptions: [
+          {code: 'leftRight', name: '左右堆叠'},
+          {code: 'upDown', name: '上下堆叠'},
+        ],
+        value: 'leftRight'
+      },
+      [
+        {
+          name: '柱体设置',
+          list: [
+            {
+              type: 'el-slider',
+              label: '最大宽度',
+              name: 'maxWidth',
+              required: false,
+              placeholder: '',
+              value: 20,
+            },
+            {
+              type: 'el-slider',
+              label: '圆角',
+              name: 'radius',
+              require: false,
+              placeholder: '',
+              value: 5,
+            },
+          ],
+        },
+        {
+          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: '#FFD700'
+            },
+            {
+              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: 'center'
+            },
+            {
+              type: 'el-input-text',
+              label: '副标题',
+              name: 'subText',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'subTextColor',
+              required: false,
+              placeholder: '',
+              value: 'rgba(30, 144, 255, 1)'
+            },
+            {
+              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: '图例操作',
+          list: [
+            {
+              type: 'el-switch',
+              label: '图例显示',
+              name: 'isShowLegend',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: '图例名称',
+              name: 'legendName',
+              required: false,
+              placeholder: '多值以' | '隔开',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'lengedColor',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'lengedFontSize',
+              required: false,
+              placeholder: '',
+              value: 12,
+            },
+            {
+              type: 'el-input-number',
+              label: '图例宽度',
+              name: 'lengedWidth',
+              required: false,
+              placeholder: '',
+              value: 12,
+            },
+            {
+              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: 'X轴设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'hideX',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: 'X轴别名',
+              name: 'xName',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '别名颜色',
+              name: 'xNameColor',
+              required: false,
+              placeholder: '',
+              value: '#fff'
+            },
+            {
+              type: 'el-input-number',
+              label: '别名字号',
+              name: 'xNameFontSize',
+              required: false,
+              placeholder: '',
+              value: 14
+            },
+            {
+              type: 'el-switch',
+              label: '轴反转',
+              name: 'reversalX',
+              required: false,
+              placeholder: '',
+              value: false
+            },
+            {
+              type: 'el-slider',
+              label: '文字角度',
+              name: 'textAngleX',
+              required: false,
+              placeholder: '',
+              value: 0
+            },
+            {
+              type: 'el-input-number',
+              label: '文字间隔',
+              name: 'textInterval',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '文字颜色',
+              name: 'Xcolor',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '文字字号',
+              name: 'fontSizeX',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              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: 'isShowY',
+              require: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: 'Y轴别名',
+              name: 'textNameY',
+              require: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '别名颜色',
+              name: 'NameColorY',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '别名字号',
+              name: 'NameFontSizeY',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'el-switch',
+              label: '轴反转',
+              name: 'reversalY',
+              required: false,
+              placeholder: '',
+              value: false
+            },
+            {
+              type: 'el-slider',
+              label: '文字角度',
+              name: 'textAngleY',
+              required: false,
+              placeholder: '',
+              value: 0
+            },
+            {
+              type: 'vue-color',
+              label: '文字颜色',
+              name: 'colorY',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '文字字号',
+              name: 'fontSizeY',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'vue-color',
+              label: '轴颜色',
+              name: 'lineColorY',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-switch',
+              label: '分割线显示',
+              name: 'isShowSplitLineY',
+              require: false,
+              placeholder: '',
+              value: false,
+            }, {
+              type: 'vue-color',
+              label: '分割线颜色',
+              name: 'splitLineColorY',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            }
+          ],
+        },
+        {
+          name: '数值设定',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShow',
+              required: false,
+              placeholder: '',
+              value: false
+            },
+            {
+              type: 'el-input-number',
+              label: '字体大小',
+              name: 'fontSize',
+              required: false,
+              placeholder: '',
+              value: 14
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'subTextColor',
+              required: false,
+              placeholder: '',
+              value: '#fff'
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'fontWeight',
+              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: 'tipsFontSize',
+              required: false,
+              placeholder: '',
+              value: 16
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'lineColor',
+              required: false,
+              placeholder: '',
+            },
+          ],
+        },
+        {
+          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: 'customColor',
+              label: '',
+              name: 'customColor',
+              required: false,
+              value: [{color: '#ff7f50'}, {color: '#87cefa'}, {color: '#da70d6'}, {color: '#32cd32'}, {color: '#6495ed'}],
+            },
+          ],
+        },
+      ],
+    ],
+    // 数据
+    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": "2021-07-25", "name": "A", "data": "12"},
+          {"axis": "2021-07-25", "name": "B", "data": "20"},
+          {"axis": "2021-07-26", "name": "B", "data": "5"},
+          {"axis": "2021-07-27", "name": "A", "data": "15"},
+          {"axis": "2021-07-27", "name": "B", "data": "30"},
+        ],
+      },
+      {
+        type: 'dycustComponents',
+        label: '',
+        name: 'dynamicData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'dynamicData',
+        chartType: 'widget-stackchart',
+        dictKey: 'STACK_PROPERTIES',
+        value: '',
+      },
+    ],
+    // 坐标
+    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: 500,
+      },
+      {
+        type: 'el-input-number',
+        label: '高度',
+        name: 'height',
+        required: false,
+        placeholder: '该容器在1080px大屏中的高度',
+        value: 250,
+      },
+    ],
+  }
+}

report-ui/src/views/screenDesigner/config/barCharts/widget-barchart.js

@@ -171,88 +171,6 @@ export const widgetBarchart = {
             },
           ],
         },
-        {
-          name: '图例操作',
-          list: [
-            {
-              type: 'el-switch',
-              label: '图例显示',
-              name: 'isShowLegend',
-              required: false,
-              placeholder: '',
-              value: true,
-            },
-            {
-              type: 'el-input-text',
-              label: '图例名称',
-              name: 'legendName',
-              required: false,
-              placeholder: '',
-              value: ''
-            },
-            {
-              type: 'vue-color',
-              label: '字体颜色',
-              name: 'lengedColor',
-              required: false,
-              placeholder: '',
-              value: '#fff',
-            },
-            {
-              type: 'el-input-number',
-              label: '字体字号',
-              name: 'lengedFontSize',
-              required: false,
-              placeholder: '',
-              value: 12,
-            },
-            {
-              type: 'el-input-number',
-              label: '图例宽度',
-              name: 'lengedWidth',
-              required: false,
-              placeholder: '',
-              value: 12,
-            },
-            {
-              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: 'X轴设置',
           list: [
@@ -520,9 +438,10 @@ export const widgetBarchart = {
             {
               type: 'el-input-number',
               label: '字体字号',
-              name: 'tipFontSize',
+              name: 'tipsFontSize',
               required: false,
               placeholder: '',
+              value: 16
             },
             {
               type: 'vue-color',

report-ui/src/views/screenDesigner/config/barCharts/widget-barlinechart.js

@@ -0,0 +1,790 @@
+/*
+ * @Descripttion: 柱线图
+ * @version:
+ * @Author: qianlishi
+ * @Date: 2021-08-29 07:26:48
+ * @LastEditors: qianlishi
+ * @LastEditTime: 2021-09-28 14:11:57
+ */
+export const widgetBarlinechart = {
+  code: 'widget-barlinechart',
+  type: 'barChart',
+  tabName: '柱状图',
+  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: ''
+      },
+      [
+        {
+          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: '图例操作',
+          list: [
+            {
+              type: 'el-switch',
+              label: '图例显示',
+              name: 'isShowLegend',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: '图例名称',
+              name: 'legendName',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'lengedColor',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'lengedFontSize',
+              required: false,
+              placeholder: '',
+              value: 12,
+            },
+            {
+              type: 'el-input-number',
+              label: '图例宽度',
+              name: 'lengedWidth',
+              required: false,
+              placeholder: '',
+              value: 12,
+            },
+            {
+              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: '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: '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: 500,
+      },
+      {
+        type: 'el-input-number',
+        label: '高度',
+        name: 'height',
+        required: false,
+        placeholder: '该容器在1080px大屏中的高度',
+        value: 250,
+      },
+    ],
+  }
+}

report-ui/src/views/screenDesigner/config/barCharts/widget-gradient-barchart.js

@@ -0,0 +1,613 @@
+/*
+ * @Descripttion: 柱状图渐变色 json
+ * @version:
+ * @Author: qianlishi
+ * @Date: 2021-08-29 07:23:41
+ * @LastEditors: qianlishi
+ * @LastEditTime: 2021-09-28 14:14:08
+ */
+export const widgetGradientBarchart = {
+  code: 'widget-gradient-color-barchart',
+  type: 'barChart',
+  tabName: '柱状图',
+  label: '柱状图-渐变色',
+  icon: 'iconzhuzhuangtu',
+  options: {
+    // 配置
+    setup: [
+      {
+        type: 'el-input-text',
+        label: '图层名称',
+        name: 'layerName',
+        required: false,
+        placeholder: '',
+        value: '柱形图-渐变色',
+      },
+      {
+        type: 'el-switch',
+        label: '竖展示',
+        name: 'verticalShow',
+        required: false,
+        placeholder: '',
+        value: false,
+      },
+      {
+        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,
+            },
+          ],
+        },
+        {
+          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: 22
+            },
+            {
+              type: 'el-select',
+              label: '字体位置',
+              name: 'textAlign',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'center', name: '居中'},
+                {code: 'left', name: '左对齐'},
+                {code: 'right', name: '右对齐'},
+              ],
+              value: 'center'
+            },
+            {
+              type: 'el-input-text',
+              label: '副标题',
+              name: 'subText',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'subTextColor',
+              required: false,
+              placeholder: '',
+              value: '#90979c'
+            },
+            {
+              type: 'el-input-text',
+              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: 'isShowY',
+              require: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: '坐标名',
+              name: 'textNameY',
+              require: false,
+              placeholder: '',
+              value: ''
+            }, {
+              type: 'vue-color',
+              label: '坐标名颜色',
+              name: 'nameColorY',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '坐标字号',
+              name: 'namefontSizeY',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              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-slider',
+              label: '数值角度',
+              name: 'ytextAngle',
+              required: false,
+              placeholder: '',
+              value: 0
+            },
+            {
+              type: 'el-switch',
+              label: '缩放',
+              name: 'scale',
+              require: false,
+              placeholder: '',
+              value: false,
+            },
+            {
+              type: 'el-input-number',
+              label: '均分',
+              name: 'splitNumber',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'el-switch',
+              label: '轴反转',
+              name: 'reversalY',
+              required: false,
+              placeholder: '',
+              value: false
+            },
+            {
+              type: 'vue-color',
+              label: '轴颜色',
+              name: 'lineColorY',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-switch',
+              label: '分割线显示',
+              name: 'isShowSplitLineY',
+              require: false,
+              placeholder: '',
+              value: false,
+            },
+            {
+              type: 'vue-color',
+              label: '分割线颜色',
+              name: 'splitLineColorY',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            }
+          ],
+        },
+        {
+          name: '数值设定',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShow',
+              required: false,
+              placeholder: '',
+              value: true
+            },
+            {
+              type: 'el-input-number',
+              label: '距离',
+              name: 'distance',
+              required: false,
+              placeholder: '',
+              value: 5
+            },
+            {
+              type: 'el-input-number',
+              label: '字体大小',
+              name: 'fontSize',
+              required: false,
+              placeholder: '',
+              value: 14
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'subTextColor',
+              required: false,
+              placeholder: '',
+              value: '#fff'
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'fontWeight',
+              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: 'tipsFontSize',
+              required: false,
+              placeholder: '',
+              value: 16
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'lineColor',
+              required: false,
+              placeholder: '#ff7f50',
+            },
+          ],
+        },
+        {
+          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: 'vue-color',
+              label: '0%处',
+              name: 'bar0color',
+              required: false,
+              placeholder: '',
+              value: 'rgba(0,244,255,1)'
+            },
+            {
+              type: 'vue-color',
+              label: '100%处',
+              name: 'bar100color',
+              required: false,
+              placeholder: '',
+              value: 'rgba(0,77,167,1)'
+            },
+            {
+              type: 'vue-color',
+              label: '阴影颜色',
+              name: 'shadowColor',
+              required: false,
+              placeholder: '',
+              value: 'rgba(0,160,221,1)'
+            },
+            {
+              type: 'el-input-number',
+              label: '模糊系数',
+              name: 'shadowBlur',
+              required: false,
+              placeholder: '',
+              value: 4,
+            },
+          ],
+        },
+      ],
+    ],
+    // 数据
+    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": "苹果", "data": 1000},
+          {"axis": "三星", "data": 2229},
+          {"axis": "小米", "data": 3879},
+          {"axis": "oppo", "data": 2379},
+          {"axis": "vivo", "data": 4079},
+        ],
+      },
+      {
+        type: 'dycustComponents',
+        label: '',
+        name: 'dynamicData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'dynamicData',
+        chartType: 'widget-barchart',
+        dictKey: 'BAR_PROPERTIES',
+        value: '',
+      },
+    ],
+    // 坐标
+    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/screenDesigner/config/barCharts/widget-more-bar-line.js

@@ -0,0 +1,759 @@
+/*
+ * @Descripttion: 多柱线图
+ * @version:
+ * @Author: foming
+ * @Date:
+ * @LastEditors:
+ * @LastEditTime:
+ */
+export const widgetMoreBarLine = {
+  code: 'widgetMoreBarLineChart',
+  type: 'barChart',
+  tabName: '柱状图',
+  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: ''
+      },
+      [
+        {
+          name: '折线设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '标记点',
+              name: 'markPoint',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-slider',
+              label: '点大小',
+              name: 'pointSize',
+              required: false,
+              placeholder: '',
+              value: 3,
+            },
+            {
+              type: 'el-switch',
+              label: '平滑曲线',
+              name: 'smoothCurve',
+              required: false,
+              placeholder: '',
+              value: false,
+            },
+            {
+              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,
+            },
+          ],
+        },
+        {
+          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: '图例操作',
+          list: [
+            {
+              type: 'el-switch',
+              label: '图例显示',
+              name: 'isShowLegend',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: '图例名称',
+              name: 'legendName',
+              required: false,
+              placeholder: '多值以' | '隔开',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'lengedColor',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'lengedFontSize',
+              required: false,
+              placeholder: '',
+              value: 12,
+            },
+            {
+              type: 'el-input-number',
+              label: '图例宽度',
+              name: 'lengedWidth',
+              required: false,
+              placeholder: '',
+              value: 12,
+            },
+            {
+              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: '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-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: 'vue-color',
+              label: '数值颜色',
+              name: 'colorY',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '数值字号',
+              name: 'fontSizeY',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              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: 'customColor',
+              label: '',
+              name: 'customColor',
+              required: false,
+              value: [
+                {color: '#4bdfff'},
+                {color: '#5dc1fd'},
+                {color: '#55f49c'},
+                {color: '#ffa43a'},
+              ],
+            },
+          ],
+        },
+      ],
+    ],
+    // 数据
+    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: [
+          {"date": "2014", "unsales": 400, "manus": 300, "rework": 400, "sales": 4.2,},
+          {"date": "2015", "unsales": 400, "manus": 500, "rework": 300, "sales": 3.6,},
+          {"date": "2016", "unsales": 300, "manus": 500, "rework": 500, "sales": 5.8,},
+          {"date": "2017", "unsales": 300, "manus": 500, "rework": 700, "sales": 3.4,},
+          {"date": "2018", "unsales": 400, "manus": 400, "rework": 1000, "sales": 2.5,},
+          {"date": "2019", "unsales": 400, "manus": 500, "rework": 500, "sales": 5.8,},
+          {"date": "2020", "unsales": 300, "manus": 400, "rework": 600, "sales": 7.6,},
+          {"date": "2021", "unsales": 300, "manus": 600, "rework": 400, "sales": 3.4,},
+        ]
+      },
+      {
+        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: 500,
+      },
+      {
+        type: 'el-input-number',
+        label: '高度',
+        name: 'height',
+        required: false,
+        placeholder: '该容器在1080px大屏中的高度',
+        value: 300,
+      },
+    ],
+  }
+}

report-ui/src/views/screenDesigner/config/configs.js

@@ -1,7 +1,15 @@
 /**
  *  文本栏：{type: 'text',tabName: '文本栏'}
  *  柱状图：{type: 'barChart',tabName: '柱状图'}
- * **/ 
+ *  装饰图：{type: 'decorate',tabName: '装饰图'}
+ *  漏斗图：{type: 'funnel',tabName: '漏斗图'}
+ *  热力图：{type: 'heatmap',tabName: '热力图'}
+ *  折线图：{type: 'lineChart',tabName: '折线图'}
+ *  地图：{type: 'mapChart',tabName: '地图'}
+ *  百分比图：{type: 'percent',tabName: '百分比图'}
+ *  饼图：{type: 'pieChart',tabName: '饼图'}
+ *  词云图：{type: 'wordCloud',tabName: '词云图'}
+ * **/
 
 import {widgetHref} from "./texts/widget-href"
 import {widgetIframe} from "./texts/widget-iframe"
@@ -10,21 +18,56 @@ import {widgetMarquee} from "./texts/widget-marquee"
 import {widgetSliders} from "./texts/widget-slider"
 import {widgetTable} from "./texts/widget-table"
 import {widgetText} from "./texts/widget-text"
-import { widgetTime } from "./texts/widget-time"
+import {widgetTime} from "./texts/widget-time"
 import {widgetVideo} from "./texts/widget-video"
 import {widgetBarchart} from './barCharts/widget-barchart'
-
+import {widgetGradientBarchart} from "./barCharts/widget-gradient-barchart"
+import {widgetLinechart} from "./lineCharts/widget-linechart"
+import {widgetBarlinechart} from "./barCharts/widget-barlinechart"
+import {widgetPiechart} from "./pieCharts/widget-piechart"
+import {widgetFunnel} from "./funnelCharts/widget-funnel"
+import {widgetGauge} from "./percentCharts/widget-gauge"
+import {widgetMap} from "./mapCharts/widget-map"
+import {widgetPieNightingale} from "./pieCharts/widget-pie-nightingale"
+import {widgetPiePercentage} from "./percentCharts/widget-pie-percentage"
+import {widgetAirbubbleMap} from "./mapCharts/widget-airbubble-map"
+import {widgetBarStack} from "./barCharts/widget-bar-stack"
+import {widgetLineStack} from "./lineCharts/widget-line-stack"
+import {widgetBarCompare} from "./barCharts/widget-bar-compare"
+import {widgetLineCompare} from "./lineCharts/widget-line-compare"
+import {widgetDecoratePie} from "./decorateCharts/widget-decorate-pie";
+import {widgetMoreBarLine} from "./barCharts/widget-more-bar-line";
+import {widgetWordCloud} from "./wordcloudCharts/widget-word-cloud";
+import {widgetHeatmap} from "./heatmap/widget-heatmap";
 
 
 export const widgetTool = [
-    widgetHref,
-    widgetIframe,
-    widgetImage,
-    widgetMarquee,
-    // widgetSliders,
-    widgetTable,
-    widgetText,
-    widgetTime,
-    widgetVideo,
-    widgetBarchart
+  widgetHref,
+  widgetIframe,
+  widgetImage,
+  widgetMarquee,
+  // widgetSliders,
+  widgetTable,
+  widgetText,
+  widgetTime,
+  widgetVideo,
+  widgetBarchart,
+  widgetGradientBarchart,
+  widgetLinechart,
+  widgetBarlinechart,
+  widgetPiechart,
+  widgetFunnel,
+  widgetGauge,
+  widgetMap,
+  widgetPieNightingale,
+  widgetPiePercentage,
+  widgetAirbubbleMap,
+  widgetBarStack,
+  widgetLineStack,
+  widgetBarCompare,
+  widgetLineCompare,
+  widgetDecoratePie,
+  widgetMoreBarLine,
+  widgetWordCloud,
+  widgetHeatmap
 ]

report-ui/src/views/screenDesigner/config/decorateCharts/widget-decorate-pie.js

@@ -0,0 +1,446 @@
+/*
+ * @Descripttion: 装饰饼图
+ * @version:
+ * @Author: foming
+ * @Date:
+ * @LastEditors:
+ * @LastEditTime:
+ */
+export const widgetDecoratePie = {
+  code: 'widgetDecoratePieChart',
+  type: 'decorate',
+  tabName: '装饰图',
+  label: '装饰饼图',
+  icon: 'iconicon_tubiao_bingtu',
+  options: {
+    // 配置
+    setup: [
+      {
+        type: 'el-input-text',
+        label: '图层名称',
+        name: 'layerName',
+        required: false,
+        placeholder: '',
+        value: '静态装饰饼图',
+      },
+      {
+        type: 'vue-color',
+        label: '背景颜色',
+        name: 'background',
+        required: false,
+        placeholder: '',
+        value: ''
+      },
+      [
+        {
+          name: '最外环设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isLastRingShow',
+              required: false,
+              placeholder: '',
+              value: true
+            },
+            {
+              type: 'vue-color',
+              label: '0%颜色',
+              name: 'lastRing0Color',
+              required: false,
+              placeholder: '',
+              value: '#4FADFD'
+            },
+            {
+              type: 'vue-color',
+              label: '100%颜色',
+              name: 'lastRing100Color',
+              required: false,
+              placeholder: '',
+              value: '#28E8FA'
+            },
+          ]
+        },
+        {
+          name: '八分环设置',
+          list: [
+            {
+              type: 'vue-color',
+              label: '颜色',
+              name: 'eightColor',
+              required: false,
+              placeholder: '',
+              value: '#4FADFD'
+            },
+          ]
+        },
+        {
+          name: '虚线环设置',
+          list: [
+            {
+              type: 'el-input-number',
+              label: '虚线数量',
+              name: 'dottedNum',
+              required: false,
+              placeholder: '',
+              value: 40
+            },
+            {
+              type: 'vue-color',
+              label: '颜色',
+              name: 'dottedColor',
+              required: false,
+              placeholder: '',
+              value: '#28E8FA'
+            },
+          ]
+        },
+        {
+          name: '三分环设置',
+          list: [
+            {
+              type: 'vue-color',
+              label: '一段颜色',
+              name: 'three1Color',
+              required: false,
+              placeholder: '',
+              value: '#fc8d89'
+            },
+            {
+              type: 'vue-color',
+              label: '二段颜色',
+              name: 'three2Color',
+              required: false,
+              placeholder: '',
+              value: '#46d3f3'
+            },
+            {
+              type: 'vue-color',
+              label: '三段颜色',
+              name: 'three3Color',
+              required: false,
+              placeholder: '',
+              value: 'rgba(203,203,203,.2)'
+            },
+          ]
+        },
+        {
+          name: '外指标环设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '环显示',
+              name: 'isOutRingShow',
+              required: false,
+              placeholder: '',
+              value: false
+            },
+            {
+              type: 'vue-color',
+              label: '环颜色',
+              name: 'outRingColor',
+              required: false,
+              placeholder: '',
+              value: '#0dc2fe'
+            },
+            {
+              type: 'el-input-number',
+              label: '环宽度',
+              name: 'outRingWidth',
+              required: false,
+              placeholder: '',
+              value: 1
+            },
+            {
+              type: 'el-switch',
+              label: '指标线显示',
+              name: 'isOutSplitShow',
+              required: false,
+              placeholder: '',
+              value: true
+            },
+            {
+              type: 'el-input-number',
+              label: '指标线数量',
+              name: 'outSplitNum',
+              required: false,
+              placeholder: '',
+              value: 30
+            },
+            {
+              type: 'el-input-number',
+              label: '指标线长度',
+              name: 'outSplitLength',
+              required: false,
+              placeholder: '',
+              value: 32
+            },
+            {
+              type: 'el-input-number',
+              label: '指标线宽度',
+              name: 'outSplitWidth',
+              required: false,
+              placeholder: '',
+              value: 2
+            },
+            {
+              type: 'vue-color',
+              label: '指标线颜色',
+              name: 'outSplitColor',
+              required: false,
+              placeholder: '',
+              value: '#0dc2fe'
+            },
+            {
+              type: 'el-switch',
+              label: '刻度线显示',
+              name: 'isOutTickShow',
+              required: false,
+              placeholder: '',
+              value: false
+            },
+            {
+              type: 'el-input-number',
+              label: '刻度线数量',
+              name: 'outTickNum',
+              required: false,
+              placeholder: '',
+              value: 5
+            },
+            {
+              type: 'el-input-number',
+              label: '刻度线长度',
+              name: 'outTickLength',
+              required: false,
+              placeholder: '',
+              value: 20
+            },
+            {
+              type: 'el-input-number',
+              label: '刻度线宽度',
+              name: 'outTickWidth',
+              required: false,
+              placeholder: '',
+              value: 2
+            },
+            {
+              type: 'vue-color',
+              label: '刻度线颜色',
+              name: 'outTickColor',
+              required: false,
+              placeholder: '',
+              value: '#0dc2fe'
+            },
+          ]
+        },
+        {
+          name: '里指标环设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '环显示',
+              name: 'isInRingShow',
+              required: false,
+              placeholder: '',
+              value: false
+            },
+            {
+              type: 'vue-color',
+              label: '环颜色',
+              name: 'inRingColor',
+              required: false,
+              placeholder: '',
+              value: '#0dc2fe'
+            },
+            {
+              type: 'el-input-number',
+              label: '环宽度',
+              name: 'inRingWidth',
+              required: false,
+              placeholder: '',
+              value: 1
+            },
+            {
+              type: 'el-switch',
+              label: '指标线显示',
+              name: 'isInSplitShow',
+              required: false,
+              placeholder: '',
+              value: false
+            },
+            {
+              type: 'el-input-number',
+              label: '指标线数量',
+              name: 'inSplitNum',
+              required: false,
+              placeholder: '',
+              value: 30
+            },
+            {
+              type: 'el-input-number',
+              label: '指标线长度',
+              name: 'inSplitLength',
+              required: false,
+              placeholder: '',
+              value: 20
+            },
+            {
+              type: 'el-input-number',
+              label: '指标线宽度',
+              name: 'inSplitWidth',
+              required: false,
+              placeholder: '',
+              value: 2
+            },
+            {
+              type: 'vue-color',
+              label: '指标线颜色',
+              name: 'inSplitColor',
+              required: false,
+              placeholder: '',
+              value: '#0dc2fe'
+            },
+            {
+              type: 'el-switch',
+              label: '刻度线显示',
+              name: 'isInTickShow',
+              required: false,
+              placeholder: '',
+              value: true
+            },
+            {
+              type: 'el-input-number',
+              label: '刻度线数量',
+              name: 'inTickNum',
+              required: false,
+              placeholder: '',
+              value: 5
+            },
+            {
+              type: 'el-input-number',
+              label: '刻度线长度',
+              name: 'inTickLength',
+              required: false,
+              placeholder: '',
+              value: 20
+            },
+            {
+              type: 'el-input-number',
+              label: '刻度线宽度',
+              name: 'inTickWidth',
+              required: false,
+              placeholder: '',
+              value: 2
+            },
+            {
+              type: 'vue-color',
+              label: '刻度线颜色',
+              name: 'inTickColor',
+              required: false,
+              placeholder: '',
+              value: '#0dc2fe'
+            },
+          ]
+        },
+        {
+          name: '环外环设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isRingOnRingShow',
+              required: false,
+              placeholder: '',
+              value: true
+            },
+            {
+              type: 'vue-color',
+              label: '颜色',
+              name: 'ringOnRingColor',
+              required: false,
+              placeholder: '',
+              value: '#4FADFD'
+            },
+          ]
+        },
+        {
+          name: '中饼图设置',
+          list: [
+            {
+              type: 'el-input-number',
+              label: '半径',
+              name: 'pieWidth',
+              required: false,
+              placeholder: '',
+              value: 40
+            },
+            {
+              type: 'vue-color',
+              label: '颜色',
+              name: 'pieColor',
+              required: false,
+              placeholder: '',
+              value: '#0dc2fe'
+            },
+            {
+              type: 'vue-color',
+              label: '边框颜色',
+              name: 'pieBorderColor',
+              required: false,
+              placeholder: '',
+              value: '#3D4268'
+            },
+            {
+              type: 'el-select',
+              label: '分块',
+              name: 'pieBlocks',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'four', name: '十字星'},
+                {code: 'five', name: '五角星'},
+                {code: 'six', name: '六芒星'},
+              ],
+              value: 'six'
+            },
+          ]
+        },
+      ],
+    ],
+    // 坐标
+    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: 300,
+      },
+    ],
+  }
+}

report-ui/src/views/screenDesigner/config/funnelCharts/widget-funnel.js

@@ -0,0 +1,391 @@
+/*
+ * @Descripttion: 漏斗图 json
+ * @version:
+ * @Author: qianlishi
+ * @Date: 2021-08-29 07:29:23
+ * @LastEditors: qianlishi
+ * @LastEditTime: 2021-09-28 14:12:37
+ */
+export const widgetFunnel = {
+  code: 'widget-funnel',
+  type: 'funnel',
+  tabName: '漏斗图',
+  label: '漏斗图',
+  icon: 'iconloudoutu',
+  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-switch',
+        label: '翻转',
+        name: 'ending',
+        require: false,
+        placeholder: '',
+        value: false,
+      },
+      [
+        {
+          name: '标题设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '标题',
+              name: 'isNoTitle',
+              required: false,
+              placeholder: '',
+              value: false,
+            },
+            {
+              type: 'el-input-text',
+              label: '标题',
+              name: 'titleText',
+              required: false,
+              placeholder: '',
+              value: '',
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'textColor',
+              required: false,
+              placeholder: '',
+              value: '#FFD700'
+            },
+            {
+              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: 'center'
+            },
+            {
+              type: 'el-input-text',
+              label: '副标题',
+              name: 'subText',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'subTextColor',
+              required: false,
+              placeholder: '',
+              value: 'rgba(30, 144, 255, 1)'
+            },
+            {
+              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: 16
+            },
+          ],
+        },
+        {
+          name: '数值设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShow',
+              require: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'fontSize',
+              require: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'color',
+              require: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'fontWeight',
+              require: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '特粗体'},
+                {code: 'lighter', name: '细体'}
+              ],
+              value: 'normal'
+            },
+          ],
+        },
+        {
+          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: 'el-input-number',
+              label: '字体字号',
+              name: 'tipFontSize',
+              required: false,
+              placeholder: '',
+              value: 14
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'lineColor',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+          ],
+        },
+        {
+          name: '自定义配色',
+          list: [
+            {
+              type: 'customColor',
+              label: '',
+              name: 'customColor',
+              required: false,
+              value: [{color: '#0CD2E6'}, {color: '#00BFA5'}, {color: '#FFC722'}, {color: '#886EFF'}, {color: '#008DEC'}],
+            },
+          ],
+        },
+      ],
+    ],
+    // 数据
+    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: [
+          {"value": 2, "name": "访问"},
+          {"value": 5, "name": "咨询"},
+          {"value": 20, "name": "订单"},
+          {"value": 40, "name": "点击"},
+          {"value": 125, "name": "展现"}
+        ],
+      },
+      {
+        type: 'dycustComponents',
+        label: '',
+        name: 'dynamicData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        chartType: 'widget-funnel',
+        relactiveDomValue: 'dynamicData',
+        dictKey: 'PIE_PROPERTIES',
+        value: '',
+      },
+    ],
+    // 坐标
+    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: 500,
+      },
+    ],
+  }
+}

report-ui/src/views/screenDesigner/config/heatmap/widget-heatmap.js

@@ -0,0 +1,689 @@
+/*
+ * @Descripttion: 热力图
+ * @version:
+ * @Author: whw
+ * @Date: 2021-11-3
+ * @LastEditors: whw
+ * @LastEditTime: 2021-11-3
+ */
+export const widgetHeatmap = {
+  code: 'widget-heatmap',
+  type: 'heatmap',
+  tabName: '热力图',
+  label: '热力图',
+  icon: 'iconrelitu',
+  options: {
+    // 配置
+    setup: [
+      {
+        type: 'el-input-text',
+        label: '图层名称',
+        name: 'layerName',
+        required: false,
+        placeholder: '',
+        value: '热力图',
+      },
+      {
+        type: 'vue-color',
+        label: '背景颜色',
+        name: 'background',
+        required: false,
+        placeholder: '',
+        value: ''
+      },
+      [
+        {
+          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: 16
+            },
+            {
+              type: 'el-select',
+              label: '字体位置',
+              name: 'textAlign',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'center', name: '居中'},
+                {code: 'left', name: '左对齐'},
+                {code: 'right', name: '右对齐'},
+              ],
+              value: 'center'
+            },
+            {
+              type: 'el-input-text',
+              label: '副标题',
+              name: 'subText',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'subTextColor',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              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: 16
+            },
+          ],
+        },
+        {
+          name: 'X轴设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'hideX',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: 'X轴别名',
+              name: 'xName',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '别名颜色',
+              name: 'xNameColor',
+              required: false,
+              placeholder: '',
+              value: '#fff'
+            },
+            {
+              type: 'el-input-number',
+              label: '别名字号',
+              name: 'xNameFontSize',
+              required: false,
+              placeholder: '',
+              value: 14
+            },
+            {
+              type: 'el-switch',
+              label: '轴反转',
+              name: 'reversalX',
+              required: false,
+              placeholder: '',
+              value: false
+            },
+            {
+              type: 'el-slider',
+              label: '文字角度',
+              name: 'textAngleX',
+              required: false,
+              placeholder: '',
+              value: 0
+            },
+            {
+              type: 'el-input-number',
+              label: '文字间隔',
+              name: 'textInterval',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '文字颜色',
+              name: 'Xcolor',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '文字字号',
+              name: 'fontSizeX',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'vue-color',
+              label: '轴颜色',
+              name: 'lineColorX',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+          ],
+        },
+        {
+          name: 'Y轴设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShowY',
+              require: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: 'Y轴别名',
+              name: 'textNameY',
+              require: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '别名颜色',
+              name: 'NameColorY',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '别名字号',
+              name: 'NameFontSizeY',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'el-switch',
+              label: '轴反转',
+              name: 'reversalY',
+              required: false,
+              placeholder: '',
+              value: false
+            },
+            {
+              type: 'el-slider',
+              label: '文字角度',
+              name: 'textAngleY',
+              required: false,
+              placeholder: '',
+              value: 0
+            },
+            {
+              type: 'vue-color',
+              label: '文字颜色',
+              name: 'colorY',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '文字字号',
+              name: 'fontSizeY',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'vue-color',
+              label: '轴颜色',
+              name: 'lineColorY',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+          ],
+        },
+        {
+          name: '数值设定',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShow',
+              required: false,
+              placeholder: '',
+              value: true
+            },
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'fontSize',
+              required: false,
+              placeholder: '',
+              value: 14
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'subTextColor',
+              required: false,
+              placeholder: '',
+              value: '#fff'
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'fontWeight',
+              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: 'tipsFontSize',
+              required: false,
+              placeholder: '',
+              value: 16
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'tipsLineColor',
+              required: false,
+              placeholder: '',
+            },
+          ],
+        },
+        {
+          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: false,
+            },
+            {
+              type: 'el-input-number',
+              label: '最小值',
+              name: 'dataMin',
+              required: false,
+              placeholder: '',
+              value: 0,
+            },
+            {
+              type: 'el-input-number',
+              label: '最大值',
+              name: 'dataMax',
+              required: false,
+              placeholder: '',
+              value: 5000,
+            },
+            {
+              type: 'vue-color',
+              label: '数值颜色',
+              name: 'lengedColor',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '图例大小',
+              name: 'lengedFontSize',
+              required: false,
+              placeholder: '',
+              value: 12,
+            },
+            {
+              type: 'el-input-number',
+              label: '图例宽度',
+              name: 'lengedWidth',
+              required: false,
+              placeholder: '',
+              value: 12,
+            },
+            {
+              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: 'lengedColorList',
+              required: false,
+              value: [{color: '#abd9e9'}, {color: '#74add1'}, {color: '#4575b4'}, {color: '#313695'}],
+            },
+          ],
+        },
+      ],
+    ],
+    // 数据
+    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": "0", "yaxis": "0", "num": 3320},
+          {"axis": "0", "yaxis": "1", "num": 1561},
+          {"axis": "0", "yaxis": "2", "num": 3194},
+          {"axis": "0", "yaxis": "3", "num": 2899},
+          {"axis": "0", "yaxis": "4", "num": 2363},
+          {"axis": "0", "yaxis": "5", "num": 3945},
+          {"axis": "0", "yaxis": "6", "num": 2051},
+          {"axis": "0", "yaxis": "7", "num": 3657},
+          {"axis": "0", "yaxis": "8", "num": 3304},
+          {"axis": "0", "yaxis": "9", "num": 2990},
+          {"axis": "1", "yaxis": "9", "num": 2663},
+          {"axis": "1", "yaxis": "0", "num": 378},
+          {"axis": "1", "yaxis": "1", "num": 4076},
+          {"axis": "1", "yaxis": "2", "num": 3178},
+          {"axis": "1", "yaxis": "3", "num": 1501},
+          {"axis": "1", "yaxis": "4", "num": 1660},
+          {"axis": "1", "yaxis": "5", "num": 726},
+          {"axis": "1", "yaxis": "6", "num": 4148},
+          {"axis": "1", "yaxis": "7", "num": 720},
+          {"axis": "1", "yaxis": "8", "num": 430},
+          {"axis": "2", "yaxis": "9", "num": 2983},
+          {"axis": "2", "yaxis": "0", "num": 1917},
+          {"axis": "2", "yaxis": "1", "num": 1188},
+          {"axis": "2", "yaxis": "2", "num": 3581},
+          {"axis": "2", "yaxis": "3", "num": 1781},
+          {"axis": "2", "yaxis": "4", "num": 4725},
+          {"axis": "2", "yaxis": "5", "num": 4077},
+          {"axis": "2", "yaxis": "6", "num": 299},
+          {"axis": "2", "yaxis": "7", "num": 4828},
+          {"axis": "2", "yaxis": "8", "num": 1778},
+          {"axis": "3", "yaxis": "9", "num": 3171},
+          {"axis": "3", "yaxis": "0", "num": 2944},
+          {"axis": "3", "yaxis": "1", "num": 763},
+          {"axis": "3", "yaxis": "2", "num": 1678},
+          {"axis": "3", "yaxis": "3", "num": 1765},
+          {"axis": "3", "yaxis": "4", "num": 2949},
+          {"axis": "3", "yaxis": "5", "num": 966},
+          {"axis": "3", "yaxis": "6", "num": 4622},
+          {"axis": "3", "yaxis": "7", "num": 2818},
+          {"axis": "3", "yaxis": "8", "num": 3913},
+          {"axis": "4", "yaxis": "9", "num": 4382},
+          {"axis": "4", "yaxis": "0", "num": 1670},
+          {"axis": "4", "yaxis": "1", "num": 4532},
+          {"axis": "4", "yaxis": "2", "num": 2116},
+          {"axis": "4", "yaxis": "3", "num": 2383},
+          {"axis": "4", "yaxis": "4", "num": 510},
+          {"axis": "4", "yaxis": "5", "num": 33},
+          {"axis": "4", "yaxis": "6", "num": 4974},
+          {"axis": "4", "yaxis": "7", "num": 3627},
+          {"axis": "4", "yaxis": "8", "num": 2737},
+          {"axis": "5", "yaxis": "9", "num": 656},
+          {"axis": "5", "yaxis": "0", "num": 3689},
+          {"axis": "5", "yaxis": "1", "num": 713},
+          {"axis": "5", "yaxis": "2", "num": 3551},
+          {"axis": "5", "yaxis": "3", "num": 3159},
+          {"axis": "5", "yaxis": "4", "num": 4150},
+          {"axis": "5", "yaxis": "5", "num": 1416},
+          {"axis": "5", "yaxis": "6", "num": 3021},
+          {"axis": "5", "yaxis": "7", "num": 1778},
+          {"axis": "5", "yaxis": "8", "num": 863},
+          {"axis": "6", "yaxis": "9", "num": 772},
+          {"axis": "6", "yaxis": "0", "num": 1675},
+          {"axis": "6", "yaxis": "1", "num": 1323},
+          {"axis": "6", "yaxis": "2", "num": 2023},
+          {"axis": "6", "yaxis": "3", "num": 43},
+          {"axis": "6", "yaxis": "4", "num": 4964},
+          {"axis": "6", "yaxis": "5", "num": 4781},
+          {"axis": "6", "yaxis": "6", "num": 2608},
+          {"axis": "6", "yaxis": "7", "num": 2278},
+          {"axis": "6", "yaxis": "8", "num": 3285},
+          {"axis": "7", "yaxis": "9", "num": 1977},
+          {"axis": "7", "yaxis": "0", "num": 882},
+          {"axis": "7", "yaxis": "1", "num": 2434},
+          {"axis": "7", "yaxis": "2", "num": 4694},
+          {"axis": "7", "yaxis": "3", "num": 3022},
+          {"axis": "7", "yaxis": "4", "num": 1798},
+          {"axis": "7", "yaxis": "5", "num": 2503},
+          {"axis": "7", "yaxis": "6", "num": 693},
+          {"axis": "7", "yaxis": "7", "num": 275},
+          {"axis": "7", "yaxis": "8", "num": 3774},
+          {"axis": "8", "yaxis": "9", "num": 1386},
+          {"axis": "8", "yaxis": "0", "num": 1212},
+          {"axis": "8", "yaxis": "1", "num": 1982},
+          {"axis": "8", "yaxis": "2", "num": 1509},
+          {"axis": "8", "yaxis": "3", "num": 94},
+          {"axis": "8", "yaxis": "4", "num": 2082},
+          {"axis": "8", "yaxis": "5", "num": 3930},
+          {"axis": "8", "yaxis": "6", "num": 4528},
+          {"axis": "8", "yaxis": "7", "num": 1861},
+          {"axis": "8", "yaxis": "8", "num": 4582},
+          {"axis": "9", "yaxis": "9", "num": 3038},
+          {"axis": "9", "yaxis": "0", "num": 4038},
+          {"axis": "9", "yaxis": "1", "num": 357},
+          {"axis": "9", "yaxis": "2", "num": 306},
+          {"axis": "9", "yaxis": "3", "num": 479},
+          {"axis": "9", "yaxis": "4", "num": 823},
+          {"axis": "9", "yaxis": "5", "num": 3442},
+          {"axis": "9", "yaxis": "6", "num": 904},
+          {"axis": "9", "yaxis": "7", "num": 399},
+          {"axis": "9", "yaxis": "8", "num": 4869},
+        ]
+      },
+      {
+        type: 'dycustComponents',
+        label: '',
+        name: 'dynamicData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        chartType: 'widget-coord',
+        relactiveDomValue: 'dynamicData',
+        dictKey: 'COORD_PROPERTIES',
+        value: '',
+      },
+    ],
+    // 坐标
+    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: 700,
+      },
+      {
+        type: 'el-input-number',
+        label: '高度',
+        name: 'height',
+        required: false,
+        placeholder: '该容器在1080px大屏中的高度',
+        value: 300,
+      },
+    ],
+  }
+}

report-ui/src/views/screenDesigner/config/lineCharts/widget-line-compare.js

@@ -0,0 +1,784 @@
+/*
+ * @Descripttion: 折线对比图 json
+ * @version:
+ * @Author: foming
+ * @Date: 2021-08-29 07:39:35
+ * @LastEditors: qianlishi
+ * @LastEditTime: 2021-09-28 14:15:42
+ */
+export const widgetLineCompare = {
+  code: 'widgetLineCompareChart',
+  type: 'lineChart',
+  tabName: '折线图',
+  label: '折线对比图',
+  icon: 'iconzhexian',
+  options: {
+    // 配置
+    setup: [
+      {
+        type: 'el-input-text',
+        label: '图层名称',
+        name: 'layerName',
+        required: false,
+        placeholder: '',
+        value: '折线对比图',
+      },
+      {
+        type: 'vue-color',
+        label: '背景颜色',
+        name: 'background',
+        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: 2,
+            },
+          ],
+        },
+        {
+          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: '#FFD700'
+            },
+            {
+              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: 'center'
+            },
+          ],
+        },
+        {
+          name: '图例操作',
+          list: [
+            {
+              type: 'el-switch',
+              label: '图例显示',
+              name: 'isShowLegend',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: '图例名称',
+              name: 'legendName',
+              required: false,
+              placeholder: '多值以'|'隔开',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'lengedColor',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'lengedFontSize',
+              required: false,
+              placeholder: '',
+              value: 12,
+            },
+            {
+              type: 'el-input-number',
+              label: '图例宽度',
+              name: 'lengedWidth',
+              required: false,
+              placeholder: '',
+              value: 12,
+            },
+            {
+              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: 'X轴设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShowX',
+              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: 'el-switch',
+              label: '数值居中',
+              name: 'boundaryX',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'vue-color',
+              label: '数值颜色',
+              name: 'colorX',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '数值字号',
+              name: 'fontSizeX',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'el-input-number',
+              label: '数值间隔',
+              name: 'splitNumberX',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'el-switch',
+              label: '刻度线',
+              name: 'tickLineX',
+              require: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-switch',
+              label: 'X轴线',
+              name: 'lineX',
+              require: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'vue-color',
+              label: '轴颜色',
+              name: 'lineColorX',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+          ],
+        },
+        {
+          name: '上y轴设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShowYTop',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: '坐标名',
+              name: 'textNameYTop',
+              require: false,
+              placeholder: '',
+              value: ''
+            },{
+              type: 'vue-color',
+              label: '坐标名颜色',
+              name: 'nameColorYTop',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '坐标字号',
+              name: 'namefontSizeYTop',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'el-switch',
+              label: '缩放',
+              name: 'scaleYTop',
+              required: false,
+              placeholder: '',
+              value: false,
+            },
+            {
+              type: 'el-input-number',
+              label: '数值切分',
+              name: 'splitNumberYTop',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '数值颜色',
+              name: 'colorYTop',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '数值字号',
+              name: 'fontSizeYTop',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'el-switch',
+              label: '刻度线',
+              name: 'tickLineYTop',
+              require: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-switch',
+              label: 'y轴线',
+              name: 'lineYTop',
+              require: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'vue-color',
+              label: '轴颜色',
+              name: 'lineColorYTop',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-switch',
+              label: '分割线',
+              name: 'splitLineYTop',
+              require: false,
+              placeholder: '',
+              value: false,
+            },
+            {
+              type: 'vue-color',
+              label: '分割线颜色',
+              name: 'splitLineColorYTop',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '分割线宽度',
+              name: 'splitLinefontSizeYTop',
+              required: false,
+              placeholder: '',
+              value: 1,
+            },
+          ],
+        },
+        {
+          name: '下y轴设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShowYBottom',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: '坐标名',
+              name: 'textNameYBottom',
+              require: false,
+              placeholder: '',
+              value: ''
+            },{
+              type: 'vue-color',
+              label: '坐标名颜色',
+              name: 'nameColorYBottom',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '坐标字号',
+              name: 'namefontSizeYBottom',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'el-switch',
+              label: '缩放',
+              name: 'scaleYBottom',
+              required: false,
+              placeholder: '',
+              value: false,
+            },
+            {
+              type: 'el-input-number',
+              label: '数值切分',
+              name: 'splitNumberYBottom',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '数值颜色',
+              name: 'colorYBottom',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '数值字号',
+              name: 'fontSizeYBottom',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'el-switch',
+              label: '刻度线',
+              name: 'tickLineYBottom',
+              require: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-switch',
+              label: 'y轴线',
+              name: 'lineYBottom',
+              require: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'vue-color',
+              label: '轴颜色',
+              name: 'lineColorYBottom',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-switch',
+              label: '分割线',
+              name: 'splitLineYBottom',
+              require: false,
+              placeholder: '',
+              value: false,
+            },
+            {
+              type: 'vue-color',
+              label: '分割线颜色',
+              name: 'splitLineColorYBottom',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '分割线宽度',
+              name: 'splitLinefontSizeYBottom',
+              required: false,
+              placeholder: '',
+              value: 1,
+            },
+          ],
+        },
+        {
+          name: '数值设定',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShow',
+              required: false,
+              placeholder: '',
+              value: true
+            },
+            {
+              type: 'el-input-number',
+              label: '字体大小',
+              name: 'fontSize',
+              required: false,
+              placeholder: '',
+              value: 14
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'subTextColor',
+              required: false,
+              placeholder: '',
+              value: '#fff'
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'fontWeight',
+              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: 'tipShow',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-select',
+              label: '类型',
+              name: 'tipType',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'line', name: '线形'},
+                {code: 'cross', name: '十字形'},
+              ],
+              value: 'line'
+            },
+            {
+              type: 'vue-color',
+              label: '颜色',
+              name: 'tipColor',
+              required: false,
+              placeholder: '#e68b55',
+            },
+          ],
+        },
+        {
+          name: '坐标轴边距设置',
+          list: [
+            {
+              type: 'el-slider',
+              label: '左边距(像素)',
+              name: 'marginLeft',
+              required: false,
+              placeholder: '',
+              value: 20,
+            },
+            {
+              type: 'el-slider',
+              label: '右边距(像素)',
+              name: 'marginRight',
+              required: false,
+              placeholder: '',
+              value: 50,
+            },
+            {
+              type: 'el-slider',
+              label: '顶边距(像素)',
+              name: 'marginTop',
+              required: false,
+              placeholder: '',
+              value: 40,
+            },
+            {
+              type: 'el-slider',
+              label: '底边距(像素)',
+              name: 'marginBottom',
+              required: false,
+              placeholder: '',
+              value: 40,
+            },
+          ],
+        },
+        {
+          name: '自定义配色',
+          list: [
+            {
+              type: 'customColor',
+              label: '',
+              name: 'customColor',
+              required: false,
+              value: [{color: '#36c5e7'}, {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":"07-25","name":"success","data":"2"},
+          {"axis":"07-25","name":"fail","data":"10"},
+          {"axis":"07-26","name":"success","data":"5"},
+          {"axis":"07-26","name":"fail","data":"20"},
+          {"axis":"07-27","name":"success","data":"15"},
+          {"axis":"07-27","name":"fail","data":"30"},
+          {"axis":"07-28","name":"success","data":"10"},
+          {"axis":"07-28","name":"fail","data":"12"},
+          {"axis":"07-29","name":"success","data":"9"},
+          {"axis":"07-29","name":"fail","data":"16"},
+        ],
+      },
+      {
+        type: 'dycustComponents',
+        label: '',
+        name: 'dynamicData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'dynamicData',
+        chartType: 'widget-stackchart',
+        dictKey: 'STACK_PROPERTIES',
+        value: '',
+      },
+    ],
+    // 坐标
+    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/screenDesigner/config/lineCharts/widget-line-stack.js

@@ -0,0 +1,679 @@
+/*
+ * @Descripttion: 折线堆叠图 json
+ * @version:
+ * @Author: qianlishi
+ * @Date: 2021-08-29 07:38:17
+ * @LastEditors: qianlishi
+ * @LastEditTime: 2021-09-28 14:16:28
+ */
+export const widgetLineStack = {
+  code: 'widgetLineStackChart',
+  type: 'lineChart',
+  tabName: '折线图',
+  label: '折线堆叠图',
+  icon: 'iconduidietu',
+  options: {
+    // 配置
+    setup: [
+      {
+        type: 'el-input-text',
+        label: '图层名称',
+        name: 'layerName',
+        required: false,
+        placeholder: '',
+        value: '折线堆叠图',
+      },
+      {
+        type: 'el-switch',
+        label: '竖展示',
+        name: 'verticalShow',
+        required: false,
+        placeholder: '',
+        value: false,
+      },
+      {
+        type: 'vue-color',
+        label: '背景颜色',
+        name: 'background',
+        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: 4,
+            },
+          ],
+        },
+        {
+          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: '#FFD700'
+            },
+            {
+              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: 'center'
+            },
+            {
+              type: 'el-input-text',
+              label: '副标题',
+              name: 'subText',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'subTextColor',
+              required: false,
+              placeholder: '',
+              value: 'rgba(30, 144, 255, 1)'
+            },
+            {
+              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: '图例操作',
+          list: [
+            {
+              type: 'el-switch',
+              label: '图例显示',
+              name: 'isShowLegend',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: '图例名称',
+              name: 'legendName',
+              required: false,
+              placeholder: '多值以' | '隔开',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'lengedColor',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'lengedFontSize',
+              required: false,
+              placeholder: '',
+              value: 12,
+            },
+            {
+              type: 'el-input-number',
+              label: '图例宽度',
+              name: 'lengedWidth',
+              required: false,
+              placeholder: '',
+              value: 12,
+            },
+            {
+              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: 'X轴设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'hideX',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: 'X轴别名',
+              name: 'xName',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '别名颜色',
+              name: 'xNameColor',
+              required: false,
+              placeholder: '',
+              value: '#fff'
+            },
+            {
+              type: 'el-input-number',
+              label: '别名字号',
+              name: 'xNameFontSize',
+              required: false,
+              placeholder: '',
+              value: 14
+            },
+            {
+              type: 'el-switch',
+              label: '轴反转',
+              name: 'reversalX',
+              required: false,
+              placeholder: '',
+              value: false
+            },
+            {
+              type: 'el-slider',
+              label: '文字角度',
+              name: 'textAngleX',
+              required: false,
+              placeholder: '',
+              value: 0
+            },
+            {
+              type: 'el-input-number',
+              label: '文字间隔',
+              name: 'textInterval',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '文字颜色',
+              name: 'Xcolor',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '文字字号',
+              name: 'fontSizeX',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              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: 'isShowY',
+              require: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: 'Y轴别名',
+              name: 'textNameY',
+              require: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '别名颜色',
+              name: 'NameColorY',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '别名字号',
+              name: 'NameFontSizeY',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'el-switch',
+              label: '轴反转',
+              name: 'reversalY',
+              required: false,
+              placeholder: '',
+              value: false
+            },
+            {
+              type: 'el-slider',
+              label: '文字角度',
+              name: 'textAngleY',
+              required: false,
+              placeholder: '',
+              value: 0
+            },
+            {
+              type: 'vue-color',
+              label: '文字颜色',
+              name: 'colorY',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '文字字号',
+              name: 'fontSizeY',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'vue-color',
+              label: '轴颜色',
+              name: 'lineColorY',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            }, {
+              type: 'el-switch',
+              label: '分割线显示',
+              name: 'isShowSplitLineY',
+              require: false,
+              placeholder: '',
+              value: false,
+            }, {
+              type: 'vue-color',
+              label: '分割线颜色',
+              name: 'splitLineColorY',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+
+            }
+          ],
+        },
+        {
+          name: '数值设定',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShow',
+              required: false,
+              placeholder: '',
+              value: false
+            },
+            {
+              type: 'el-input-number',
+              label: '字体大小',
+              name: 'fontSize',
+              required: false,
+              placeholder: '',
+              value: 14
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'subTextColor',
+              required: false,
+              placeholder: '',
+              value: '#fff'
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'fontWeight',
+              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: 'tipsFontSize',
+              required: false,
+              placeholder: '',
+              value: 16
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'lineColor',
+              required: false,
+              placeholder: '',
+            },
+          ],
+        },
+        {
+          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: 'customColor',
+              label: '',
+              name: 'customColor',
+              required: false,
+              value: [{color: '#ff7f50'}, {color: '#87cefa'}, {color: '#da70d6'}, {color: '#32cd32'}, {color: '#6495ed'}],
+            },
+          ],
+        },
+      ],
+    ],
+    // 数据
+    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": "2021-07-25", "name": "A", "data": "12"},
+          {"axis": "2021-07-25", "name": "B", "data": "20"},
+          {"axis": "2021-07-26", "name": "B", "data": "5"},
+          {"axis": "2021-07-27", "name": "A", "data": "15"},
+          {"axis": "2021-07-27", "name": "B", "data": "30"},
+        ],
+      },
+      {
+        type: 'dycustComponents',
+        label: '',
+        name: 'dynamicData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'dynamicData',
+        chartType: 'widget-stackchart',
+        dictKey: 'STACK_PROPERTIES',
+        value: '',
+      },
+    ],
+    // 坐标
+    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: 500,
+      },
+      {
+        type: 'el-input-number',
+        label: '高度',
+        name: 'height',
+        required: false,
+        placeholder: '该容器在1080px大屏中的高度',
+        value: 250,
+      },
+    ],
+  }
+}

report-ui/src/views/screenDesigner/config/lineCharts/widget-linechart.js

@@ -0,0 +1,608 @@
+/*
+ * @Descripttion: 折线图json
+ * @version:
+ * @Author: qianlishi
+ * @Date: 2021-08-29 07:24:48
+ * @LastEditors: qianlishi
+ * @LastEditTime: 2021-09-28 14:17:10
+ */
+export const widgetLinechart = {
+  code: 'widget-linechart',
+  type: 'lineChart',
+  tabName: '折线图',
+  label: '折线图',
+  icon: 'icontubiaozhexiantu',
+  options: {
+    // 配置
+    setup: [
+      {
+        type: 'el-input-text',
+        label: '图层名称',
+        name: 'layerName',
+        required: false,
+        placeholder: '',
+        value: '折线图',
+      },
+      {
+        type: 'vue-color',
+        label: '背景颜色',
+        name: 'background',
+        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: 10,
+            },
+            {
+              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: 4,
+            },
+          ],
+        },
+        {
+          name: '标题设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '标题',
+              name: 'isNoTitle',
+              required: false,
+              placeholder: '',
+              value: false
+            },
+            {
+              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: 'center'
+            },
+            {
+              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: 'isShowY',
+              require: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: '坐标名',
+              name: 'textNameY',
+              require: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'vue-color',
+              label: '坐标名颜色',
+              name: 'nameColorY',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '坐标字号',
+              name: 'namefontSizeY',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              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-slider',
+              label: '数值角度',
+              name: 'ytextAngle',
+              required: false,
+              placeholder: '',
+              value: 0
+            },
+            {
+              type: 'el-switch',
+              label: '缩放',
+              name: 'scale',
+              require: false,
+              placeholder: '',
+              value: false,
+            },
+            {
+              type: 'el-input-number',
+              label: '均分',
+              name: 'splitNumber',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'el-switch',
+              label: '轴反转',
+              name: 'reversalY',
+              required: false,
+              placeholder: '',
+              value: false
+            },
+            {
+              type: 'vue-color',
+              label: '轴颜色',
+              name: 'lineColorY',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-switch',
+              label: '分割线显示',
+              name: 'isShowSplitLineY',
+              require: false,
+              placeholder: '',
+              value: false,
+            },
+            {
+              type: 'vue-color',
+              label: '分割线颜色',
+              name: 'splitLineColorY',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            }
+          ],
+        },
+        {
+          name: '数值设定',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShow',
+              required: false,
+              placeholder: '',
+              value: false
+            },
+            {
+              type: 'el-input-number',
+              label: '字体大小',
+              name: 'fontSize',
+              required: false,
+              placeholder: '',
+              value: 12
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'subTextColor',
+              required: false,
+              placeholder: '',
+              value: '#fff'
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'fontWeight',
+              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: 'tipsFontSize',
+              required: false,
+              placeholder: '',
+              value: 16
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'lineColor',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+          ],
+        },
+        {
+          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: 'customColor',
+              label: '',
+              name: 'customColor',
+              required: false,
+              value: [{color: '#1E90FF'}],
+            },
+          ],
+        },
+      ],
+    ],
+    // 数据
+    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": "苹果", "data": 1000},
+          {"axis": "三星", "data": 2229},
+          {"axis": "小米", "data": 3879},
+          {"axis": "oppo", "data": 2379},
+          {"axis": "vivo", "data": 4079},
+        ],
+      },
+      {
+        type: 'dycustComponents',
+        label: '',
+        name: 'dynamicData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        chartType: 'widget-linechart',
+        dictKey: '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/screenDesigner/config/mapCharts/widget-airbubble-map.js

@@ -0,0 +1,383 @@
+/*
+ * @Descripttion: 气泡地图json
+ * @version:
+ * @Author: qianlishi
+ * @Date: 2021-08-29 07:35:32
+ * @LastEditors: qianlishi
+ * @LastEditTime: 2021-09-28 14:10:01
+ */
+export const widgetAirbubbleMap = {
+  code: 'widgetAirBubbleMap',
+  type: 'mapChart',
+  tabName: '地图',
+  label: '气泡地图',
+  icon: 'iconzhongguoditu',
+  options: {
+    // 配置
+    setup: [
+      {
+        type: 'el-input-text',
+        label: '图层名称',
+        name: 'layerName',
+        required: false,
+        placeholder: '',
+        value: '气泡地图',
+      },
+      {
+        type: 'vue-color',
+        label: '背景颜色',
+        name: 'background',
+        required: false,
+        placeholder: '',
+        value: '#0F1C3C'
+      },
+      [
+        {
+          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: ''
+            },
+            {
+              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: 12
+            },
+          ],
+        },
+        {
+          name: '字体设置',
+          list: [
+            {
+              type: 'el-input-number',
+              label: '文字大小',
+              name: 'fontTextSize',
+              required: false,
+              placeholder: '',
+              value: 15,
+            },
+            {
+              type: 'vue-color',
+              label: '文字颜色',
+              name: 'fontTextColor',
+              required: false,
+              placeholder: '',
+              value: '#D4EEFF'
+            },
+            {
+              type: 'el-select',
+              label: '文字粗细',
+              name: 'fontTextWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '特粗体'},
+                {code: 'lighter', name: '细体'}
+              ],
+              value: 'normal'
+            },
+            {
+              type: 'el-input-number',
+              label: '数值大小',
+              name: 'fontDataSize',
+              required: false,
+              placeholder: '',
+              value: 15,
+            },
+            {
+              type: 'vue-color',
+              label: '数值颜色',
+              name: 'fontDataColor',
+              required: false,
+              placeholder: '',
+              value: '#D4EEFF'
+            },
+            {
+              type: 'el-select',
+              label: '数值粗细',
+              name: 'fontDataWeight',
+              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: 'fontminSize4Pin',
+              required: false,
+              placeholder: '',
+              value: 20,
+            },
+            {
+              type: 'el-input-number',
+              label: '最大半径',
+              name: 'fontmaxSize4Pin',
+              required: false,
+              placeholder: '',
+              value: 100,
+            },
+            /*{
+              type: 'vue-color',
+              label: '气泡颜色',
+              name: 'fontPieColor',
+              required: false,
+              placeholder: '',
+              value: ''
+            },*/
+          ],
+        },
+        {
+          name: '地图块颜色',
+          list: [
+            {
+              type: 'vue-color',
+              label: '0%处颜色',
+              name: 'font0PreColor',
+              required: false,
+              placeholder: '',
+              value: '#073684'
+            },
+            {
+              type: 'vue-color',
+              label: '100%颜色',
+              name: 'font100PreColor',
+              required: false,
+              placeholder: '',
+              value: '#061E3D'
+            },
+            {
+              type: 'vue-color',
+              label: '高亮渐变色',
+              name: 'fontHighlightColor',
+              required: false,
+              placeholder: '',
+              value: '#2B91B7'
+            },
+          ],
+        },
+      ],
+    ],
+    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: [
+          {"name": "南海诸岛", "value": 1},
+          {"name": "北京", "value": 524},
+          {"name": "天津", "value": 14},
+          {"name": "上海", "value": 150},
+          {"name": "重庆", "value": 75},
+          {"name": "河北", "value": 13},
+          {"name": "河南", "value": 83},
+          {"name": "云南", "value": 11},
+          {"name": "辽宁", "value": 19},
+          {"name": "黑龙江", "value": 15},
+          {"name": "湖南", "value": 69},
+          {"name": "安徽", "value": 260},
+          {"name": "山东", "value": 39},
+          {"name": "新疆", "value": 4},
+          {"name": "江苏", "value": 31},
+          {"name": "浙江", "value": 104},
+          {"name": "江西", "value": 36},
+          {"name": "湖北", "value": 1052},
+          {"name": "广西", "value": 33},
+          {"name": "甘肃", "value": 347},
+          {"name": "山西", "value": 8},
+          {"name": "内蒙古", "value": 157},
+          {"name": "陕西", "value": 22},
+          {"name": "吉林", "value": 4},
+          {"name": "福建", "value": 36},
+          {"name": "贵州", "value": 39},
+          {"name": "广东", "value": 996},
+          {"name": "青海", "value": 27},
+          {"name": "西藏", "value": 31},
+          {"name": "四川", "value": 46},
+          {"name": "宁夏", "value": 16},
+          {"name": "海南", "value": 22},
+          {"name": "台湾", "value": 6},
+          {"name": "香港", "value": 2},
+          {"name": "澳门", "value": 9}],
+      },
+      {
+        type: 'dycustComponents',
+        label: '',
+        name: 'dynamicData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        chartType: 'widget-piechart',
+        dictKey: 'MAP_PROPERTIES',
+        relactiveDomValue: 'dynamicData',
+        value: '',
+      },
+    ],
+    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: 600,
+      },
+      {
+        type: 'el-input-number',
+        label: '高度',
+        name: 'height',
+        required: false,
+        placeholder: '该容器在1080px大屏中的高度',
+        value: 400,
+      },
+    ]
+  }
+}

report-ui/src/views/screenDesigner/config/mapCharts/widget-map.js

@@ -0,0 +1,62 @@
+/*
+ * @Descripttion: 中国地图 json
+ * @version:
+ * @Author: qianlishi
+ * @Date: 2021-08-29 07:31:21
+ * @LastEditors: qianlishi
+ * @LastEditTime: 2021-09-28 14:17:20
+ */
+export const widgetMap = {
+  code: 'widget-map',
+  type: 'mapChart',
+  tabName: '地图',
+  label: '中国地图',
+  icon: 'iconzhongguoditu',
+  options: {
+    setup: [
+      {
+        type: 'el-input-text',
+        label: '图层名称',
+        name: 'layerName',
+        required: false,
+        placeholder: '',
+        value: '迁徙图',
+      },
+    ],
+    data: [],
+    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: 600,
+      },
+      {
+        type: 'el-input-number',
+        label: '高度',
+        name: 'height',
+        required: false,
+        placeholder: '该容器在1080px大屏中的高度',
+        value: 400,
+      },
+    ]
+  }
+}

report-ui/src/views/screenDesigner/config/percentCharts/widget-gauge.js

@@ -0,0 +1,381 @@
+/*
+ * @Descripttion: 仪表盘 json
+ * @version:
+ * @Author: qianlishi
+ * @Date: 2021-08-29 07:30:25
+ * @LastEditors: qianlishi
+ * @LastEditTime: 2021-09-28 14:13:17
+ */
+export const widgetGauge = {
+  code: 'widget-gauge',
+  type: 'percent',
+  tabName: '百分比图',
+  label: '仪表盘',
+  icon: 'iconyibiaopan',
+  options: {
+    // 配置
+    setup: [
+      {
+        type: 'el-input-text',
+        label: '图层名称',
+        name: 'layerName',
+        required: false,
+        placeholder: '',
+        value: '仪表盘',
+      },
+      {
+        type: 'vue-color',
+        label: '背景颜色',
+        name: 'background',
+        required: false,
+        placeholder: '',
+        value: ''
+      },
+      [
+        {
+          name: "圆环设置",
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'ringShow',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-number',
+              label: '圆环宽度',
+              name: 'pieWeight',
+              require: false,
+              placeholder: '',
+              value: 10,
+            },
+          ]
+        },
+        {
+          name: '0%~30%渐变色',
+          list: [
+            {
+              type: 'vue-color',
+              label: '0处颜色',
+              name: 'color30p0',
+              required: false,
+              placeholder: '',
+              value: 'rgba(0, 237, 3,0.1)'
+            },
+            {
+              type: 'vue-color',
+              label: '0.5处颜色',
+              name: 'color30p5',
+              required: false,
+              placeholder: '',
+              value: 'rgba(0, 237, 3,0.6)'
+            },
+            {
+              type: 'vue-color',
+              label: '1处颜色',
+              name: 'color30p10',
+              required: false,
+              placeholder: '',
+              value: 'rgba(0, 237, 3,1)'
+            },
+          ]
+        },
+        {
+          name: '30%~70%渐变色',
+          list: [
+            {
+              type: 'vue-color',
+              label: '0处颜色',
+              name: 'color70p0',
+              required: false,
+              placeholder: '',
+              value: 'rgba(255, 184, 0,0.1)'
+            },
+            {
+              type: 'vue-color',
+              label: '0.5处颜色',
+              name: 'color70p5',
+              required: false,
+              placeholder: '',
+              value: 'rgba(255, 184, 0,0.6)'
+            },
+            {
+              type: 'vue-color',
+              label: '1处颜色',
+              name: 'color70p10',
+              required: false,
+              placeholder: '',
+              value: 'rgba(255, 184, 0,1)'
+            },
+          ]
+        },
+        {
+          name: '70%~100%渐变色',
+          list: [
+            {
+              type: 'vue-color',
+              label: '0处颜色',
+              name: 'color100p0',
+              required: false,
+              placeholder: '',
+              value: 'rgba(175, 36, 74,0.1)'
+            },
+            {
+              type: 'vue-color',
+              label: '0.5处颜色',
+              name: 'color100p5',
+              required: false,
+              placeholder: '',
+              value: 'rgba(255, 36, 74,0.6)'
+            },
+            {
+              type: 'vue-color',
+              label: '1处颜色',
+              name: 'color100p10',
+              required: false,
+              placeholder: '',
+              value: 'rgba(255, 36, 74,1)'
+            },
+          ]
+        },
+        {
+          name: "刻度线",
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'tickShow',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-number',
+              label: '距离',
+              name: 'tickDistance',
+              require: false,
+              placeholder: '',
+              value: 0,
+            },
+            {
+              type: 'el-input-number',
+              label: '长度',
+              name: 'tickLength',
+              require: false,
+              placeholder: '',
+              value: 10,
+            },
+            {
+              type: 'el-input-number',
+              label: '宽度',
+              name: 'tickWidth',
+              require: false,
+              placeholder: '',
+              value: 2,
+            },
+          ]
+        },
+        {
+          name: "指标线",
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'splitShow',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-number',
+              label: '距离',
+              name: 'splitDistance',
+              require: false,
+              placeholder: '',
+              value: 0,
+            },
+            {
+              type: 'el-input-number',
+              label: '长度',
+              name: 'splitLength',
+              require: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'el-input-number',
+              label: '宽度',
+              name: 'splitWidth',
+              require: false,
+              placeholder: '',
+              value: 4,
+            },
+          ]
+        },
+        {
+          name: "指标",
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'labelShow',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-number',
+              label: '距离',
+              name: 'labelDistance',
+              require: false,
+              placeholder: '',
+              value: 0,
+            },
+            {
+              type: 'el-input-number',
+              label: '字号',
+              name: 'labelFontSize',
+              require: false,
+              placeholder: '',
+              value: 10,
+            },
+            {
+              type: 'vue-color',
+              label: '颜色',
+              name: 'labelColor',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+          ]
+        },
+        {
+          name: "数值",
+          list: [
+            {
+              type: 'vue-color',
+              label: '颜色',
+              name: 'labelColor',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '字号',
+              name: 'labelFontSize',
+              require: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'labelFontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '特粗体'},
+                {code: 'lighter', name: '细体'}
+              ],
+              value: 'normal'
+            },
+          ]
+        },
+      ],
+    ],
+    // 数据
+    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: [
+          {"num": 50}
+        ],
+      },
+      {
+        type: 'dycustComponents',
+        label: '',
+        name: 'dynamicData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        chartType: 'widget-text',
+        dictKey: 'TEXT_PROPERTIES',
+        relactiveDomValue: 'dynamicData',
+        value: '',
+      },
+    ],
+    // 坐标
+    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/screenDesigner/config/percentCharts/widget-pie-percentage.js

@@ -0,0 +1,258 @@
+/*
+ * @Descripttion: 百分比图 json
+ * @version:
+ * @Author: qianlishi
+ * @Date: 2021-08-29 07:34:01
+ * @LastEditors: qianlishi
+ * @LastEditTime: 2021-09-28 14:18:45
+ */
+export const widgetPiePercentage = {
+  code: 'widgetPiePercentageChart',
+  type: 'percent',
+  tabName: '百分比图',
+  label: '百分比图',
+  icon: 'iconbaifenbi',
+  options: {
+    // 配置
+    setup: [
+      {
+        type: 'el-input-text',
+        label: '图层名称',
+        name: 'layerName',
+        required: false,
+        placeholder: '',
+        value: '百分比图',
+      },
+      {
+        type: 'vue-color',
+        label: '背景颜色',
+        name: 'background',
+        required: false,
+        placeholder: '',
+        value: ''
+      },
+      [
+        {
+          name: '数值设置',
+          list: [
+            {
+              type: 'vue-color',
+              label: '数值颜色',
+              name: 'textNumColor',
+              required: false,
+              placeholder: '',
+              value: '#fff'
+            },
+            {
+              type: 'el-input-number',
+              label: '数值字体',
+              name: 'textNumFontSize',
+              required: false,
+              placeholder: '',
+              value: 40
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'textNumFontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '特粗体'},
+                {code: 'lighter', name: '细体'}
+              ],
+              value: 'normal'
+            },
+            {
+              type: 'vue-color',
+              label: '%号颜色',
+              name: 'textPerColor',
+              required: false,
+              placeholder: '',
+              value: '#fff'
+            },
+            {
+              type: 'el-input-number',
+              label: '%号字体',
+              name: 'textPerFontSize',
+              required: false,
+              placeholder: '',
+              value: 20
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'textPerFontWeight',
+              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: 'lineNumber',
+              required: false,
+              placeholder: '',
+              value: 8
+            },
+            {
+              type: 'el-input-number',
+              label: '刻度长度',
+              name: 'lineLength',
+              required: false,
+              placeholder: '',
+              value: 19
+            },
+            {
+              type: 'el-input-number',
+              label: '刻度宽度',
+              name: 'lineWidth',
+              required: false,
+              placeholder: '',
+              value: 2
+            },
+            {
+              type: 'vue-color',
+              label: '刻度颜色',
+              name: 'lineColor',
+              required: false,
+              placeholder: '',
+              value: '#061740'
+            },
+          ]
+        },
+        {
+          name: '渐变色',
+          list: [
+            {
+              type: 'vue-color',
+              label: '0%处颜色',
+              name: 'color0Start',
+              required: false,
+              placeholder: '',
+              value: '#4FADFD'
+            },
+            {
+              type: 'vue-color',
+              label: '100%颜色',
+              name: 'color100End',
+              required: false,
+              placeholder: '',
+              value: '#28E8FA'
+            },
+            {
+              type: 'vue-color',
+              label: '余处颜色',
+              name: 'colorsurplus',
+              required: false,
+              placeholder: '',
+              value: '#173164'
+            },
+          ]
+        }
+      ],
+    ],
+    // 数据
+    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: [
+          {"num": 60}
+        ],
+      },
+      {
+        type: 'dycustComponents',
+        label: '',
+        name: 'dynamicData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        chartType: 'widget-piechart',
+        dictKey: 'TEXT_PROPERTIES',
+        relactiveDomValue: 'dynamicData',
+        value: '',
+      },
+    ],
+    // 坐标
+    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: 300,
+      },
+    ],
+  }
+}

report-ui/src/views/screenDesigner/config/pieCharts/widget-pie-nightingale.js

@@ -0,0 +1,407 @@
+/*
+ * @Descripttion: 南丁格尔玫瑰图 json
+ * @version:
+ * @Author: qianlishi
+ * @Date: 2021-08-29 07:32:40
+ * @LastEditors: qianlishi
+ * @LastEditTime: 2021-09-28 14:18:05
+ */
+export const widgetPieNightingale = {
+  code: 'WidgetPieNightingaleRoseArea',
+  type: 'pieChart',
+  tabName: '饼图',
+  label: '南丁格尔玫瑰图',
+  icon: 'iconnandinggeermeiguitu',
+  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-select',
+        label: '饼图模式',
+        name: 'nightingleRosetype',
+        required: false,
+        placeholder: '',
+        selectOptions: [
+          {code: 'area', name: '面积模式'},
+          {code: 'radius', name: '半径模式'},
+        ],
+        value: 'area'
+      },
+      [
+        {
+          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: ''
+            },
+            {
+              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: 12
+            },
+          ],
+        },
+        {
+          name: '数值设定',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShow',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-switch',
+              label: '数值',
+              name: 'numberValue',
+              require: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-switch',
+              label: '百分比',
+              name: 'percentage',
+              require: false,
+              placeholder: '',
+              value: false,
+            },
+            {
+              type: 'el-input-number',
+              label: '字体大小',
+              name: 'fontSize',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'subTextColor',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'fontWeight',
+              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: 'fontSize',
+              required: false,
+              placeholder: '',
+              value: 12
+            },
+            {
+              type: 'vue-color',
+              label: '网格线颜色',
+              name: 'lineColor',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+          ],
+        },
+        {
+          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: 'left', name: '左对齐'},
+                {code: 'right', name: '右对齐'},
+              ],
+              value: ''
+            },
+            {
+              type: 'el-select',
+              label: '纵向位置',
+              name: 'longitudinalPosition',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'top', name: '顶部'},
+                {code: 'bottom', name: '底部'},
+              ],
+              value: ''
+            },
+            {
+              type: 'el-select',
+              label: '布局前置',
+              name: 'layoutFront',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'vertical', name: '竖排'},
+                {code: 'horizontal', name: '横排'},
+              ],
+              value: ''
+            },
+          ],
+        },
+        {
+          name: '自定义配色',
+          list: [
+            {
+              type: 'customColor',
+              label: '',
+              name: 'customColor',
+              required: false,
+              value: [{color: '#FF801C'}, {color: '#F5FF46'}, {color: '#00FE65'}, {color: '#00FEFF'}, {color: '#ffa800'}]
+            },
+          ],
+        },
+      ],
+    ],
+    // 数据
+    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: [{"value": 1048, "name": "搜索引擎"}, {"value": 735, "name": "直接访问"}, {
+          "value": 580,
+          "name": "邮件营销"
+        }, {"value": 484, "name": "联盟广告"}, {"value": 300, "name": "视频广告"}],
+      },
+      {
+        type: 'dycustComponents',
+        label: '',
+        name: 'dynamicData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        chartType: 'widget-piechart',
+        dictKey: 'PIE_PROPERTIES',
+        relactiveDomValue: 'dynamicData',
+        value: '',
+      },
+    ],
+    // 坐标
+    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/screenDesigner/config/pieCharts/widget-piechart.js

@@ -0,0 +1,407 @@
+/*
+ * @Descripttion: 饼图
+ * @version:
+ * @Author: qianlishi
+ * @Date: 2021-08-29 07:28:20
+ * @LastEditors: qianlishi
+ * @LastEditTime: 2021-09-28 14:19:19
+ */
+export const widgetPiechart = {
+  code: 'widget-piechart',
+  type: 'pieChart',
+  tabName: '饼图',
+  label: '饼图',
+  icon: 'iconicon_tubiao_bingtu',
+  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-select',
+        label: '饼图样式',
+        name: 'piechartStyle',
+        required: false,
+        placeholder: '',
+        selectOptions: [
+          {code: 'shixin', name: '实心饼图'},
+          {code: 'kongxin', name: '空心饼图'},
+        ],
+        value: 'shixin'
+      },
+      [
+        {
+          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: ''
+            },
+            {
+              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: 12
+            },
+          ],
+        },
+        {
+          name: '数值设定',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShow',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-switch',
+              label: '数值',
+              name: 'numberValue',
+              require: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-switch',
+              label: '百分比',
+              name: 'percentage',
+              require: false,
+              placeholder: '',
+              value: false,
+            },
+            {
+              type: 'el-input-number',
+              label: '字体大小',
+              name: 'fontSize',
+              required: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'subTextColor',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'fontWeight',
+              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: 'fontSize',
+              required: false,
+              placeholder: '',
+              value: 12
+            },
+            {
+              type: 'vue-color',
+              label: '网格线颜色',
+              name: 'lineColor',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+          ],
+        },
+        {
+          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-text',
+              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: 'left', name: '左对齐'},
+                {code: 'right', name: '右对齐'},
+              ],
+              value: ''
+            },
+            {
+              type: 'el-select',
+              label: '纵向位置',
+              name: 'longitudinalPosition',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'top', name: '顶部'},
+                {code: 'bottom', name: '底部'},
+              ],
+              value: ''
+            },
+            {
+              type: 'el-select',
+              label: '布局前置',
+              name: 'layoutFront',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'vertical', name: '竖排'},
+                {code: 'horizontal', name: '横排'},
+              ],
+              value: ''
+            },
+          ],
+        },
+        {
+          name: '自定义配色',
+          list: [
+            {
+              type: 'customColor',
+              label: '',
+              name: 'customColor',
+              required: false,
+              value: [{color: '#0CD2E6'}, {color: '#00BFA5'}, {color: '#FFC722'}, {color: '#886EFF'}, {color: '#008DEC'}],
+            },
+          ],
+        },
+      ],
+    ],
+    // 数据
+    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: [{"value": 1048, "name": "搜索引擎"}, {"value": 735, "name": "直接访问"}, {
+          "value": 580,
+          "name": "邮件营销"
+        }, {"value": 484, "name": "联盟广告"}, {"value": 300, "name": "视频广告"}]
+      },
+      {
+        type: 'dycustComponents',
+        label: '',
+        name: 'dynamicData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        chartType: 'widget-piechart',
+        relactiveDomValue: 'dynamicData',
+        dictKey: 'PIE_PROPERTIES',
+        value: '',
+      },
+    ],
+    // 坐标
+    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/screenDesigner/config/wordcloudCharts/widget-word-cloud.js

@@ -0,0 +1,417 @@
+export const widgetWordCloud = {
+  code: 'widgetWordCloud',
+  type: 'wordCloud',
+  tabName: '词云图',
+  label: '词云图',
+  icon: 'iconciyuntu',
+  options: {
+    // 配置
+    setup: [
+      {
+        type: 'el-input-text',
+        label: '图层名称',
+        name: 'layerName',
+        required: false,
+        placeholder: '',
+        value: '词云图',
+      },
+      {
+        type: 'vue-color',
+        label: '背景颜色',
+        name: 'background',
+        required: false,
+        placeholder: '',
+        value: ''
+      },
+      [
+        {
+          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: ''
+            },
+            {
+              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: 12
+            },
+          ],
+        },
+        {
+          name: '词云范围',
+          list: [
+            {
+              type: 'el-input-number',
+              label: '最大范围',
+              name: 'maxRangeSize',
+              required: false,
+              placeholder: '',
+              value: 25
+            },
+            {
+              type: 'el-input-number',
+              label: '最小范围',
+              name: 'minRangeSize',
+              required: false,
+              placeholder: '',
+              value: 2
+            },
+          ],
+        },
+        {
+          name: '词云角度',
+          list: [
+            {
+              type: 'el-input-number',
+              label: '最大角度',
+              name: 'maxRotationRange',
+              required: false,
+              placeholder: '',
+              value: 90
+            },
+            {
+              type: 'el-input-number',
+              label: '最小角度',
+              name: 'minRotationRange',
+              required: false,
+              placeholder: '',
+              value: -45
+            },
+          ],
+        },
+        {
+          name: '提示语设置',
+          list: [
+            {
+              type: 'el-input-number',
+              label: '字体大小',
+              name: 'fontSize',
+              required: false,
+              placeholder: '',
+              value: 12
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'lineColor',
+              required: false,
+              placeholder: '',
+              value: '#00FEFF'
+            },
+          ],
+        },
+      ],
+    ],
+    // 数据
+    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: 60000
+      },
+      {
+        type: 'el-button',
+        label: '静态数据',
+        name: 'staticData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'staticData',
+        value: [
+          {name: "占道", value: 284},
+          {name: "水质", value: 71},
+          {name: "无水", value: 71},
+          {name: "停供", value: 21},
+          {name: "停气", value: 11},
+          {name: "占道", value: 11},
+          {name: "Nancy", value: 520},
+          {name: "Jayfee", value: 666},
+          {name: "生活资源", value: 999},
+          {name: "供热管理", value: 888},
+          {name: "供气质量", value: 777},
+          {name: "社会保障", value: 407},
+          {name: "交通运输", value: 516},
+          {name: "城市交通", value: 515},
+          {name: "环境保护", value: 483},
+          {name: "城乡建设", value: 449},
+          {name: "公共安全", value: 406},
+          {name: "供热管理", value: 375},
+          {name: "市容环卫", value: 355},
+          {name: "粉尘污染", value: 335},
+          {name: "噪声污染", value: 324},
+          {name: "医疗卫生", value: 284},
+          {name: "供热发展", value: 254},
+          {name: "房地产管理", value: 462},
+          {name: "生活噪音", value: 253},
+          {name: "城市供电", value: 223},
+          {name: "大气污染", value: 223},
+          {name: "房屋安全", value: 223},
+          {name: "文化活动", value: 223},
+          {name: "拆迁管理", value: 223},
+          {name: "公共设施", value: 223},
+          {name: "供气质量", value: 223},
+          {name: "供电管理", value: 223},
+          {name: "燃气管理", value: 152},
+          {name: "教育管理", value: 152},
+          {name: "医疗纠纷", value: 152},
+          {name: "执法监督", value: 152},
+          {name: "设备安全", value: 152},
+          {name: "政务建设", value: 152},
+          {name: "宏观经济", value: 152},
+          {name: "教育管理", value: 112},
+          {name: "社会保障", value: 112},
+          {name: "分类列表", value: 112},
+          {name: "农业生产", value: 112},
+          {name: "物业服务", value: 92},
+          {name: "物业管理", value: 92},
+          {name: "低保管理", value: 92},
+          {name: "执法争议", value: 72},
+          {name: "占道堆放", value: 71},
+          {name: "地上设施", value: 71},
+          {name: "主网原因", value: 71},
+          {name: "集中供热", value: 71},
+          {name: "客运管理", value: 71},
+          {name: "治安案件", value: 71},
+          {name: "群众健身", value: 41},
+          {name: "市场收费", value: 41},
+          {name: "生产资金", value: 41},
+          {name: "生产噪声", value: 41},
+          {name: "农村低保", value: 41},
+          {name: "劳动争议", value: 41},
+          {name: "医疗事故", value: 21},
+          {name: "基础教育", value: 21},
+          {name: "职业教育", value: 21},
+          {name: "拆迁补偿", value: 21},
+          {name: "设施维护", value: 21},
+          {name: "市场外溢", value: 11},
+          {name: "占道经营", value: 11},
+          {name: "树木管理", value: 11},
+          {name: "供气质量", value: 11},
+          {name: "燃气管理", value: 11},
+          {name: "市容环卫", value: 11},
+          {name: "新闻传媒", value: 11},
+          {name: "人才招聘", value: 11},
+          {name: "市场环境", value: 11},
+          {name: "城市交通", value: 11},
+          {name: "物业服务", value: 11},
+          {name: "物业管理", value: 11},
+          {name: "园林绿化", value: 11},
+          {name: "有线电视", value: 11},
+          {name: "社会治安", value: 11},
+          {name: "林业资源", value: 11},
+          {name: "体育活动", value: 11},
+          {name: "低保管理", value: 11},
+          {name: "劳动争议", value: 11},
+          {name: "粉煤灰污染", value: 284},
+          {name: "人行道管理", value: 71},
+          {name: "身份证管理", value: 71},
+          {name: "房地产开发", value: 11},
+          {name: "经营性收费", value: 11},
+          {name: "一次供水问题", value: 11},
+          {name: "工业粉尘污染", value: 71},
+          {name: "工业排放污染", value: 41},
+          {name: "破坏森林资源", value: 41},
+          {name: "生活用水管理", value: 688},
+          {name: "一次供水问题", value: 588},
+          {name: "公交运输管理", value: 386},
+          {name: "自然资源管理", value: 355},
+          {name: "土地资源管理", value: 304},
+          {name: "生活用水管理", value: 112},
+          {name: "供热单位影响", value: 253},
+          {name: "二次供水问题", value: 112},
+          {name: "城市公共设施", value: 92},
+          {name: "拆迁政策咨询", value: 92},
+          {name: "县区、开发区", value: 152},
+          {name: "文娱市场管理", value: 72},
+          {name: "商业烟尘污染", value: 72},
+          {name: "供热单位影响", value: 71},
+          {name: "压力容器安全", value: 71},
+          {name: "劳动合同争议", value: 41},
+          {name: "物业资质管理", value: 21},
+          {name: "农村基础设施", value: 11},
+          {name: "行政事业收费", value: 11},
+          {name: "房屋配套问题", value: 11},
+          {name: "公交运输管理", value: 11},
+          {name: "社会福利及事务", value: 11},
+          {name: "食品安全与卫生", value: 11},
+          {name: "物业服务与管理", value: 112},
+          {name: "文体与教育管理", value: 406},
+          {name: "社会保障与福利", value: 429},
+          {name: "出租车运营管理", value: 385},
+          {name: "物业服务与管理", value: 304},
+          {name: "房屋质量与安全", value: 223},
+          {name: "劳动报酬与福利", value: 41},
+          {name: "食品安全与卫生", value: 11},
+          {name: "房屋与图纸不符", value: 11},
+          {name: "其他行政事业收费", value: 11},
+          {name: "农村土地规划管理", value: 254},
+          {name: "社会保障保险管理", value: 92},
+          {name: "城市交通秩序管理", value: 72},
+          {name: "户籍管理及身份证", value: 11},
+          {name: "公路（水路）交通", value: 11},
+          {name: "国有公交（大巴）管理", value: 71},
+          {name: "有线电视安装及调试维护", value: 11},
+          {name: "市政府工作部门（含部门管理机构、直属单位）", value: 11},
+        ],
+      },
+      {
+        type: 'dycustComponents',
+        label: '',
+        name: 'dynamicData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        chartType: 'widget-piechart',
+        dictKey: 'PIE_PROPERTIES',
+        relactiveDomValue: 'dynamicData',
+        value: '',
+      },
+    ],
+    // 坐标
+    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: 500,
+      },
+      {
+        type: 'el-input-number',
+        label: '高度',
+        name: 'height',
+        required: false,
+        placeholder: '该容器在1080px大屏中的高度',
+        value: 300,
+      },
+    ],
+  }
+}

report-ui/src/views/screenDesigner/node.md

@@ -3,17 +3,27 @@
 ├── screenDesigner
 │ ├── components(文件夹) 公共组件目录
 │ ├── config(文件夹) 配置 json
-│ │ ├── texts(文件夹) (文本、滚动文本、超链接、当前时间、图片、视频、表格、内联框架)
 │ │ ├── barCharts(文件夹) (柱状图)
+│ │ ├── decorateCharts(文件夹) (装饰图)
+│ │ ├── funnelCharts(文件夹) (漏斗图)
+│ │ ├── heatmap(文件夹) (热力图)
 │ │ ├── lineCharts(文件夹) (折线图)
-│ │ ├── pieCharts(文件夹) (饼图)
 │ │ ├── mapCharts(文件夹) (地图)
+│ │ ├── percentCharts(文件夹) (百分百图)
+│ │ ├── pieCharts(文件夹) (饼图)
+│ │ ├── texts(文件夹) (文本、滚动文本、超链接、当前时间、图片、视频、表格、内联框架)
+│ │ ├── wordcloudCharts(文件夹) (词云图)
 │ ├── util(文件夹) 公共 js
 │ ├── widget(文件夹) 图表组件
-│ │ ├── texts(文件夹) (文本、滚动文本、超链接、当前时间、图片、视频、表格、内联框架)
 │ │ ├── barCharts(文件夹) (柱状图)
+│ │ ├── decorateCharts(文件夹) (装饰图)
+│ │ ├── funnelCharts(文件夹) (漏斗图)
+│ │ ├── heatmap(文件夹) (热力图)
 │ │ ├── lineCharts(文件夹) (折线图)
-│ │ ├── pieCharts(文件夹) (饼图)
 │ │ ├── mapCharts(文件夹) (地图)
+│ │ ├── percentCharts(文件夹) (百分百图)
+│ │ ├── pieCharts(文件夹) (饼图)
+│ │ ├── texts(文件夹) (文本、滚动文本、超链接、当前时间、图片、视频、表格、内联框架)
+│ │ ├── wordcloudCharts(文件夹) (词云图)
 │ ├── index.vue 大屏设计器
 │ ├── preview.vue 预览大屏

report-ui/src/views/screenDesigner/widget/barCharts/widgetBarCompareChart.vue

@@ -0,0 +1,642 @@
+<template>
+  <div :style="styleObj">
+    <v-chart :options="options" autoresize/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "WidgetBarCompareChart",
+  //参考 https://www.makeapie.com/editor.html?c=xrJwcCF3NZ
+  components: {},
+  props: {
+    value: Object,
+    ispreview: Boolean
+  },
+  data() {
+    return {
+      options: {
+        title: {
+          //text: '柱状对比图',
+          x: 'center',
+          textStyle: {
+            color: '#ffffff',
+          },
+        },
+        //边距
+        grid: [
+          {//左
+            show: false,//边框线
+            left: '4%',
+            top: 60,
+            bottom: 10,
+            containLabel: true,
+            width: '40%'
+          },
+          {//中间字体位置
+            show: false,
+            left: '50.5%',
+            top: 60,
+            bottom: 25,
+            width: '0%'
+          },
+          {//右
+            show: false,
+            right: '4%',
+            top: 60,
+            bottom: 10,
+            containLabel: true,
+            width: '40%'
+          },
+        ],
+        //图例
+        legend: {
+          textStyle: {
+            color: '#fff',
+            textAlign: 'center'
+          },
+          //itemGap:80,
+          //itemWidth: 0
+        },
+        xAxis: [
+          {// 左
+            splitNumber: 2,
+            show: true,
+            type: 'value',
+            inverse: true,
+            axisLine: {//底分割线
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            position: 'bottom',
+            axisLabel: { // x轴
+              show: true,
+              textStyle: {
+                color: '#ffffff',
+                fontSize: 12
+              }
+            },
+            splitLine: { // 竖分割线
+              show: true,
+              lineStyle: {
+                color: '#57617f',
+                width: 1,
+                type: 'solid'
+              }
+            }
+          },
+          {
+            gridIndex: 1,
+            show: false,
+          },
+          {// 右
+            gridIndex: 2,
+            show: true,
+            type: 'value',
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            position: 'bottom',
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: '#ffffff',
+                fontSize: 12,
+              },
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: '#57617f',
+                width: 1,
+                type: 'solid',
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: 'category',
+            inverse: true,
+            position: 'right',
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              show: false,
+            },
+            data: [],
+          },
+          {//处理轴数据
+            gridIndex: 1,
+            type: 'category',
+            inverse: true,
+            position: 'left',
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                align: 'center',
+                color: '#ffffff',
+                fontSize: 14,
+              }
+            },
+            data: [],
+          },
+          {
+            gridIndex: 2,
+            type: 'category',
+            inverse: true,
+            position: 'left',
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: '',
+            type: 'bar',
+            barGap: 20,
+            barWidth: 15,
+            label: {
+              normal: {
+                show: true,
+                color: 'red',
+                position: 'insideLeft',
+                textStyle: {
+                  color: '#ffffff',
+                }
+
+              },
+              emphasis: {
+                show: false,
+              },
+            },
+            itemStyle: {
+              normal: {
+                color: '#36c5e7',
+                barBorderRadius: [8, 0, 0, 8],
+              },
+              emphasis: {
+                show: false,
+              },
+            },
+            data: [],
+          },
+          {
+            name: '',
+            type: 'bar',
+            barGap: 20,
+            barWidth: 15,
+            xAxisIndex: 2,
+            yAxisIndex: 2,
+            label: {
+              normal: {
+                show: true,
+                color: 'red',
+                position: 'insideRight',
+                textStyle: {
+                  color: '#ffffff',
+                }
+              },
+            },
+            itemStyle: {
+              normal: {
+                color: '#e68b55',
+                barBorderRadius: [0, 8, 8, 0],
+              },
+              emphasis: {
+                show: false,
+              },
+            },
+            data: [],
+          },
+        ]
+      },
+      optionsStyle: {},
+      optionsData: {},
+      optionsSetup: {},
+      flagInter: null
+    };
+  },
+  computed: {
+    styleObj() {
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        width: this.optionsStyle.width + "px",
+        height: this.optionsStyle.height + "px",
+        left: this.optionsStyle.left + "px",
+        top: this.optionsStyle.top + "px",
+        background: this.optionsSetup.background
+      };
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.optionsStyle = val.position;
+        this.optionsData = val.data;
+        this.optionsCollapse = val.setup;
+        this.optionsSetup = val.setup;
+        this.editorOptions();
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.optionsStyle = this.value.position;
+    this.optionsData = this.value.data;
+    this.optionsCollapse = this.value.setup;
+    this.optionsSetup = this.value.setup;
+    this.editorOptions();
+  },
+  methods: {
+    // 修改图标options属性
+    editorOptions() {
+      this.setOptionsTitle();
+      this.setOptionsXLeft();
+      this.setOptionsXRight();
+      this.setOptionsY();
+      this.setOptionsTop();
+      this.setOptionsTooltip();
+      this.setOptionsGrid();
+      this.setOptionsLegend();
+      this.setOptionsColor();
+      this.setOptionsData();
+    },
+    // 标题修改
+    setOptionsTitle() {
+      const optionsCollapse = this.optionsSetup;
+      const title = {};
+      title.text = optionsCollapse.titleText;
+      title.show = optionsCollapse.isNoTitle;
+      title.left = optionsCollapse.textAlign;
+      title.textStyle = {
+        color: optionsCollapse.textColor,
+        fontSize: optionsCollapse.textFontSize,
+        fontWeight: optionsCollapse.textFontWeight
+      };
+      this.options.title = title;
+    },
+    // 左X轴设置
+    setOptionsXLeft() {
+      const optionsSetup = this.optionsSetup;
+      const xAxisLeft = {
+        splitNumber: optionsSetup.splitNumberLeft,
+        type: 'value',
+        show : optionsSetup.hideXLeft,
+        inverse: true,
+        axisLine: {//X轴线
+          show: optionsSetup.xLineLeft,
+          lineStyle: {
+            color: optionsSetup.lineColorXLeft,
+          },
+        },
+        axisTick: {
+          show: optionsSetup.tickLineLeft,
+        },
+        position: 'bottom',
+        axisLabel: { // x轴
+          show: true,
+          textStyle: {
+            color: optionsSetup.XcolorLeft,
+            fontSize: optionsSetup.fontSizeXLeft
+          }
+        },
+        splitLine: { // 分割线
+          show: optionsSetup.SplitLineLeft,
+          lineStyle: {
+            color: optionsSetup.SplitLineColorLeft,
+            width: optionsSetup.SplitLinefontSizeLeft,
+            type: 'solid'
+          }
+        }
+      }
+      this.options.xAxis[0] = xAxisLeft;
+    },
+    // 右X轴设置
+    setOptionsXRight() {
+      const optionsSetup = this.optionsSetup;
+      const xAxisRight = {
+        gridIndex: 2,
+        splitNumber: optionsSetup.splitNumberRight,
+        show : optionsSetup.hideXRight,
+        type: 'value',
+        axisLine: {//X轴线
+          show: optionsSetup.xLineRight,
+          lineStyle: {
+            color: optionsSetup.lineColorXRight,
+          },
+        },
+        axisTick: {
+          show: optionsSetup.tickLineRight,
+        },
+        position: 'bottom',
+        axisLabel: { // x轴
+          show: true,
+          textStyle: {
+            color: optionsSetup.XcolorRight,
+            fontSize: optionsSetup.fontSizeXRight
+          }
+        },
+        splitLine: { // 分割线
+          show: optionsSetup.SplitLineRight,
+          lineStyle: {
+            color: optionsSetup.SplitLineColorRight,
+            width: optionsSetup.SplitLinefontSizeRight,
+            type: 'solid'
+          }
+        }
+      }
+      this.options.xAxis[2] = xAxisRight;
+    },
+    // Y轴设置
+    setOptionsY() {
+      const optionsSetup = this.optionsSetup;
+      const axisLine = {
+        show: optionsSetup.lineY,
+        lineStyle: {
+          color: optionsSetup.lineColorY
+        }
+      };
+      const axisTick = {
+        show: optionsSetup.tickLineY
+      };
+      const axisLabel = {
+        show: optionsSetup.hideY,
+        textStyle: {
+          align: optionsSetup.textAlign,
+          color: optionsSetup.colorY,
+          fontSize: optionsSetup.fontSizeY,
+        }
+      };
+      this.options.yAxis[1]['axisLine'] = axisLine;
+      this.options.yAxis[1]['axisTick'] = axisTick;
+      this.options.yAxis[1]['axisLabel'] = axisLabel;
+    },
+    // 数值设定、柱体设置
+    setOptionsTop() {
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series;
+      for (const key in series) {
+        if (series[key].type == "bar") {
+          series[0].label = {
+            normal: {
+              show: optionsSetup.isShow,
+              position: 'insideLeft',
+              textStyle: {
+                fontSize: optionsSetup.fontSize,
+                color: optionsSetup.subTextColor,
+                fontWeight: optionsSetup.fontWeight
+              }
+            },
+            emphasis: {
+              show: false,
+            },
+          },
+            series[1].label = {
+              normal: {
+                show: optionsSetup.isShow,
+                color: 'red',
+                position: 'insideRight',
+                textStyle: {
+                  fontSize: optionsSetup.fontSize,
+                  color: optionsSetup.subTextColor,
+                  fontWeight: optionsSetup.fontWeight
+                }
+              },
+              emphasis: {
+                show: false,
+              },
+            },
+            series[key].barWidth = optionsSetup.maxWidth;
+        }
+      }
+      this.options.series = series;
+    },
+    // tooltip 提示语设置
+    setOptionsTooltip() {
+      const optionsSetup = this.optionsSetup;
+      const tooltip = {
+        trigger: "item",
+        show: true,
+        textStyle: {
+          color: optionsSetup.lineColor,
+          fontSize: optionsSetup.fontSize
+        }
+      };
+      this.options.tooltip = tooltip;
+    },
+    // 边距设置
+    setOptionsGrid() {
+      const optionsSetup = this.optionsSetup;
+      const grid = [
+        {//左
+          show: optionsSetup.frameLineLeft,
+          left: optionsSetup.marginLeftRight,
+          top: optionsSetup.marginTop,
+          bottom: optionsSetup.marginBottom,
+          containLabel: true,
+          width: '40%'
+        },
+        {//中间字体位置
+          show: false,
+          left: "51%",
+          top: optionsSetup.marginTop,
+          bottom: optionsSetup.marginBottom + 15,
+          width: '0%'
+        },
+        {//右
+          show: optionsSetup.frameLineRight,
+          right: optionsSetup.marginLeftRight,
+          top: optionsSetup.marginTop,
+          bottom: optionsSetup.marginBottom,
+          containLabel: true,
+          width: '40%'
+        },
+      ]
+      this.options.grid = grid;
+    },
+    // 图例操作
+    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.lengedColor,
+        fontSize: optionsSetup.lengedFontSize
+      };
+      legend.itemWidth = optionsSetup.lengedWidth;
+    },
+    // 图例名称设置
+    setOptionsLegendName(name){
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series;
+      const legendName = optionsSetup.legendName;
+      // 图例没有手动写则显示原值，写了则显示新值
+      if (null == legendName || legendName == '') {
+        for (let i = 0; i < name.length; i++) {
+          series[i].name = name[i];
+        }
+        this.options.legend['data'] = name;
+      }else {
+        const arr = legendName.split('|');
+        for (let i = 0; i < arr.length; i++) {
+          series[i].name = arr[i];
+        }
+        this.options.legend['data'] = arr
+      }
+    },
+    // 颜色修改、圆角修改
+    setOptionsColor() {
+      const optionsSetup = this.optionsSetup;
+      const customColor = optionsSetup.customColor;
+      if (!customColor) return;
+      const itemStyleLeft = {
+        normal: {
+          color: customColor[0].color,
+          barBorderRadius: [optionsSetup.radius, 0, 0, optionsSetup.radius]
+        },
+        emphasis: {
+          show: false,
+        },
+      }
+      const itemStyleRight = {
+        normal: {
+          color: customColor[1].color,
+          barBorderRadius: [0, optionsSetup.radius, optionsSetup.radius, 0]
+        },
+        emphasis: {
+          show: false,
+        },
+      }
+      this.options.series[0].itemStyle = itemStyleLeft;
+      this.options.series[1].itemStyle = itemStyleRight;
+    },
+    // 数据解析
+    setOptionsData() {
+      const optionsSetup = this.optionsSetup;
+      const optionsData = this.optionsData; // 数据类型 静态 or 动态
+      optionsData.dataType == "staticData"
+        ? this.staticDataFn(optionsData.staticData, optionsSetup)
+        : this.dynamicDataFn(
+        optionsData.dynamicData,
+        optionsData.refreshTime,
+        optionsSetup
+        );
+    },
+    //去重
+    setUnique(arr) {
+      let newArr = [];
+      arr.forEach(item => {
+        return newArr.includes(item) ? '' : newArr.push(item);
+      });
+      return newArr;
+    },
+    //静态数据
+    staticDataFn(val) {
+      //数据
+      let xAxisList = [];
+      let yAxisList = [];
+      let arrayList = [];
+      const legendName = [];
+      for (const i in val) {
+        xAxisList[i] = val[i].axis;
+        yAxisList[i] = val[i].name;
+      }
+      xAxisList = this.setUnique(xAxisList);
+      yAxisList = this.setUnique(yAxisList);
+      for (const i in yAxisList) {
+        const data = new Array(xAxisList.length).fill(0);
+        for (const j in xAxisList) {
+          for (const k in val) {
+            if (val[k].name == yAxisList[i]) {
+              if (val[k].axis == xAxisList[j]) {
+                data[j] = val[k].data;
+              }
+            }
+          }
+        }
+        arrayList.push({
+          name: yAxisList[i],
+          data: data,
+        })
+        legendName.push(yAxisList[i]);
+      }
+      this.options.series[0]['name'] = arrayList[0].name;
+      this.options.series[0]['data'] = arrayList[0].data;
+      this.options.series[1]['name'] = arrayList[1].name;
+      this.options.series[1]['data'] = arrayList[1].data;
+      this.options.yAxis[1]['data'] = xAxisList;
+      this.options.legend['data'] = legendName;
+      this.setOptionsLegendName(legendName);
+    },
+    // 动态数据
+    dynamicDataFn(val, refreshTime, optionsSetup) {
+      if (!val) return;
+      if (this.ispreview) {
+        this.getEchartData(val, optionsSetup);
+        this.flagInter = setInterval(() => {
+          this.getEchartData(val, optionsSetup);
+        }, refreshTime);
+      } else {
+        this.getEchartData(val, optionsSetup);
+      }
+    },
+    getEchartData(val, optionsSetup) {
+      const data = this.queryEchartsData(val);
+      data.then(res => {
+        this.renderingFn(optionsSetup, res);
+      });
+    },
+    renderingFn(optionsSetup, val) {
+      const legendName = [];
+      this.options.yAxis[1]['data'] = val.xAxis;
+      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;
+        this.options.series[1]['data'] = val.series[1].data;
+        legendName.push(val.series[0].name);
+        legendName.push(val.series[1].name);
+      }
+      this.options.legend['data'] = legendName;
+      this.setOptionsLegendName(legendName);
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.echarts {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+</style>

report-ui/src/views/screenDesigner/widget/barCharts/widgetBarStackChart.vue

@@ -0,0 +1,449 @@
+<template>
+  <div :style="styleObj">
+    <v-chart :options="options" autoresize/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "WidgetBarStackchart",
+  components: {},
+  props: {
+    value: Object,
+    ispreview: Boolean
+  },
+  data() {
+    return {
+      options: {
+        grid: {},
+        legend: {
+          textStyle: {
+            color: "#fff"
+          }
+        },
+        xAxis: {
+          type: "category",
+          data: [],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff"
+            }
+          }
+        },
+        yAxis: {
+          type: "value",
+          data: [],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff"
+            }
+          }
+        },
+        series: [
+          {
+            data: [],
+            name: '',
+            type: "bar",
+            barGap: "0%",
+            itemStyle: {
+              barBorderRadius: null
+            }
+          }
+        ]
+      },
+      optionsStyle: {}, // 样式
+      optionsData: {}, // 数据
+      optionsSetup: {},
+      flagInter: null
+    };
+  },
+  computed: {
+    styleObj() {
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        width: this.optionsStyle.width + "px",
+        height: this.optionsStyle.height + "px",
+        left: this.optionsStyle.left + "px",
+        top: this.optionsStyle.top + "px",
+        background: this.optionsSetup.background
+      };
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.optionsStyle = val.position;
+        this.optionsData = val.data;
+        this.optionsCollapse = val.setup;
+        this.optionsSetup = val.setup;
+        this.editorOptions();
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.optionsStyle = this.value.position;
+    this.optionsData = this.value.data;
+    this.optionsCollapse = this.value.setup;
+    this.optionsSetup = this.value.setup;
+    this.editorOptions();
+  },
+  methods: {
+    // 修改图标options属性
+    editorOptions() {
+      this.setOptionsTitle();
+      this.setOptionsX();
+      this.setOptionsY();
+      this.setOptionsTooltip();
+      this.setOptionsMargin();
+      this.setOptionsLegend();
+      this.setOptionsData();
+    },
+    // 标题修改
+    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
+      };
+      title.subtext = optionsSetup.subText;
+      title.subtextStyle = {
+        color: optionsSetup.subTextColor,
+        fontWeight: optionsSetup.subTextFontWeight,
+        fontSize: optionsSetup.subTextFontSize
+      };
+      this.options.title = title;
+    },
+    // X轴设置
+    setOptionsX() {
+      const optionsSetup = this.optionsSetup;
+      const xAxis = {
+        type: "category",
+        // 坐标轴是否显示
+        show: optionsSetup.hideX,
+        // 坐标轴名称
+        name: optionsSetup.xName,
+        nameTextStyle: {
+          color: optionsSetup.xNameColor,
+          fontSize: optionsSetup.xNameFontSize
+        },
+        // 轴反转
+        inverse: optionsSetup.reversalX,
+        axisLabel: {
+          show: true,
+          // 文字间隔
+          interval: optionsSetup.textInterval,
+          // 文字角度
+          rotate: optionsSetup.textAngleX,
+          textStyle: {
+            // 坐标文字颜色
+            color: optionsSetup.Xcolor,
+            fontSize: optionsSetup.fontSizeX
+          }
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: optionsSetup.lineColorX
+          }
+        },
+        splitLine: {
+          show: optionsSetup.isShowSplitLineX,
+          lineStyle: {
+            color: optionsSetup.splitLineColorX
+          }
+        }
+      };
+      this.options.xAxis = xAxis;
+    },
+    // Y轴设置
+    setOptionsY() {
+      const optionsSetup = this.optionsSetup;
+      const yAxis = {
+        type: "value",
+        // 坐标轴是否显示
+        show: optionsSetup.isShowY,
+        // 坐标轴名称
+        name: optionsSetup.textNameY,
+        nameTextStyle: {
+          color: optionsSetup.NameColorY,
+          fontSize: optionsSetup.NameFontSizeY
+        },
+        // y轴反转
+        inverse: optionsSetup.reversalY,
+        axisLabel: {
+          show: true,
+          // 文字角度
+          rotate: optionsSetup.textAngleY,
+          textStyle: {
+            // 坐标文字颜色
+            color: optionsSetup.colorY,
+            fontSize: optionsSetup.fontSizeY
+          }
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: optionsSetup.lineColorY
+          }
+        },
+        splitLine: {
+          show: optionsSetup.isShowSplitLineY,
+          lineStyle: {
+            color: optionsSetup.splitLineColorY
+          }
+        }
+      };
+      this.options.yAxis = yAxis;
+    },
+    // tooltip 提示语设置，鼠标放置显示
+    setOptionsTooltip() {
+      const optionsSetup = this.optionsSetup;
+      const tooltip = {
+        trigger: "item",
+        show: true,
+        textStyle: {
+          color: optionsSetup.lineColor,
+          fontSize: optionsSetup.tipsFontSize
+        }
+      };
+      this.options.tooltip = tooltip;
+    },
+    // 边距设置
+    setOptionsMargin() {
+      const optionsSetup = this.optionsSetup;
+      const grid = {
+        left: optionsSetup.marginLeft,
+        right: optionsSetup.marginRight,
+        bottom: optionsSetup.marginBottom,
+        top: optionsSetup.marginTop,
+        containLabel: true
+      };
+      this.options.grid = grid;
+    },
+    // 图例操作 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.lengedColor,
+        fontSize: optionsSetup.lengedFontSize
+      };
+      legend.itemWidth = optionsSetup.lengedWidth;
+    },
+    // 图例名称设置
+    setOptionsLegendName(name){
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series;
+      const legendName = optionsSetup.legendName;
+      // 图例没有手动写则显示原值，写了则显示新值
+      if (null == legendName || legendName == '') {
+        for (let i = 0; i < name.length; i++) {
+          series[i].name = name[i];
+        }
+        this.options.legend['data'] = name;
+      }else {
+        const arr = legendName.split('|');
+        for (let i = 0; i < arr.length; i++) {
+          series[i].name = arr[i];
+        }
+        this.options.legend['data'] = arr
+      }
+    },
+    // 数据解析
+    setOptionsData() {
+      const optionsSetup = this.optionsSetup;
+      // 数据类型 静态 or 动态
+      const optionsData = this.optionsData;
+      optionsData.dataType == "staticData"
+        ? this.staticDataFn(optionsData.staticData, optionsSetup)
+        : this.dynamicDataFn(
+          optionsData.dynamicData,
+          optionsData.refreshTime,
+          optionsSetup
+        );
+    },
+    //去重
+    setUnique(arr) {
+      let newArr = [];
+      arr.forEach(item => {
+        return newArr.includes(item) ? '' : newArr.push(item);
+      });
+      return newArr;
+    },
+    //获取堆叠样式
+    getStackStyle() {
+      const optionsSetup = this.optionsSetup;
+      let style = ""
+      if (optionsSetup.stackStyle == "upDown") {
+        style = "total"
+      }
+      return style
+    },
+    //静态数据
+    staticDataFn(val) {
+      const optionsSetup = this.optionsSetup;
+      //颜色
+      const customColor = optionsSetup.customColor;
+      const arrColor = [];
+      for (let i = 0; i < customColor.length; i++) {
+        arrColor.push(customColor[i].color);
+      }
+      //数据
+      const series = [];
+      let xAxisList = [];
+      let yAxisList = [];
+      const legendName = [];
+      for (const i in val) {
+        xAxisList[i] = val[i].axis;
+        yAxisList[i] = val[i].name;
+      }
+      xAxisList = this.setUnique(xAxisList);
+      yAxisList = this.setUnique(yAxisList);
+      for (const i in yAxisList) {
+        const data = new Array(xAxisList.length).fill(0);
+        for (const j in xAxisList) {
+          for (const k in val) {
+            if (val[k].name == yAxisList[i]) {
+              if (val[k].axis == xAxisList[j]) {
+                data[j] = val[k].data;
+              }
+            }
+          }
+        }
+        series.push({
+          name: yAxisList[i],
+          type: "bar",
+          data: data,
+          barGap: "0%",
+          stack: this.getStackStyle(),
+          barWidth: optionsSetup.maxWidth,
+          label: {
+            show: optionsSetup.isShow,
+            position: "top",
+            distance: 10,
+            fontSize: optionsSetup.fontSize,
+            color: optionsSetup.subTextColor,
+            fontWeight: optionsSetup.fontWeight,
+          },
+          //颜色，圆角属性
+          itemStyle: {
+            normal: {
+              color: arrColor[i],
+              barBorderRadius: optionsSetup.radius,
+            }
+          }
+        })
+        legendName.push(yAxisList[i]);
+      }
+      this.options.series = series;
+      if (optionsSetup.verticalShow) {
+        this.options.xAxis.data = [];
+        this.options.yAxis.data = xAxisList;
+        this.options.xAxis.type = "value";
+        this.options.yAxis.type = "category";
+      } else {
+        this.options.xAxis.data = xAxisList;
+        this.options.yAxis.data = [];
+        this.options.xAxis.type = "category";
+        this.options.yAxis.type = "value";
+      }
+      this.options.legend['data'] = legendName;
+      this.setOptionsLegendName(legendName);
+    },
+    // 动态数据
+    dynamicDataFn(val, refreshTime, optionsSetup) {
+      if (!val) return;
+      if (this.ispreview) {
+        this.getEchartData(val, optionsSetup);
+        this.flagInter = setInterval(() => {
+          this.getEchartData(val, optionsSetup);
+        }, refreshTime);
+      } else {
+        this.getEchartData(val, optionsSetup);
+      }
+    },
+    getEchartData(val, optionsSetup) {
+      const data = this.queryEchartsData(val);
+      data.then(res => {
+        this.renderingFn(optionsSetup, res);
+      });
+    },
+    renderingFn(optionsSetup, val) {
+      //颜色
+      const customColor = optionsSetup.customColor;
+      const arrColor = [];
+      for (let i = 0; i < customColor.length; i++) {
+        arrColor.push(customColor[i].color);
+      }
+      // x轴
+      if (optionsSetup.verticalShow) {
+        this.options.xAxis.data = [];
+        this.options.yAxis.data = val.xAxis;
+        this.options.xAxis.type = "value";
+        this.options.yAxis.type = "category";
+      } else {
+        this.options.xAxis.data = val.xAxis;
+        this.options.yAxis.data = [];
+        this.options.xAxis.type = "category";
+        this.options.yAxis.type = "value";
+      }
+      const series = [];
+      const legendName = [];
+      for (const i in val.series) {
+        if (val.series[i].type == "bar") {
+          series.push({
+            name: val.series[i].name,
+            type: "bar",
+            data: val.series[i].data,
+            barGap: "0%",
+            stack: this.getStackStyle(),
+            barWidth: optionsSetup.maxWidth,
+            label: {
+              show: optionsSetup.isShow,
+              position: "top",
+              distance: 10,
+              fontSize: optionsSetup.fontSize,
+              color: optionsSetup.subTextColor,
+              fontWeight: optionsSetup.fontWeight,
+            },
+            //颜色，圆角属性
+            itemStyle: {
+              normal: {
+                color: arrColor[i],
+                barBorderRadius: optionsSetup.radius,
+              }
+            }
+          })
+        }
+        legendName.push(val.series[i].name);
+      }
+      this.options.series = series;
+      this.options.legend['data'] = legendName;
+      this.setOptionsLegendName(legendName);
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.echarts {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+</style>

report-ui/src/views/screenDesigner/widget/barCharts/widgetBarchart.vue

@@ -1,6 +1,6 @@
 <template>
   <div :style="styleObj">
-    <v-chart :options="options" autoresize />
+    <v-chart :options="options" autoresize/>
   </div>
 </template>
 
@@ -165,7 +165,7 @@ export default {
       const yAxis = {
         type: "value",
         scale: optionsSetup.scale,
-        splitNumber: optionsSetup.splitNumber, // 均分
+        splitNumber: optionsSetup.splitNumber,// 均分
         show: optionsSetup.isShowY, // 坐标轴是否显示
         name: optionsSetup.textNameY, // 坐标轴名称
         nameTextStyle: {
@@ -205,14 +205,14 @@ export default {
         if (optionsSetup.verticalShow) {
           series[0].label = {
             show: optionsSetup.isShow,
-            position: "right",
+            position: 'right',
             distance: optionsSetup.distance,
             textStyle: {
               fontSize: optionsSetup.fontSize,
               color: optionsSetup.subTextColor,
               fontWeight: optionsSetup.fontWeight
             }
-          };
+          }
         } else {
           series[0].label = {
             show: optionsSetup.isShow,
@@ -221,7 +221,7 @@ export default {
             fontSize: optionsSetup.fontSize,
             color: optionsSetup.subTextColor,
             fontWeight: optionsSetup.fontWeight
-          };
+          }
         }
       }
       series[0].barWidth = optionsSetup.maxWidth;
@@ -283,10 +283,10 @@ export default {
       optionsData.dataType == "staticData"
         ? this.staticDataFn(optionsData.staticData)
         : this.dynamicDataFn(
-            optionsData.dynamicData,
-            optionsData.refreshTime,
-            optionsSetup
-          );
+          optionsData.dynamicData,
+          optionsData.refreshTime,
+          optionsSetup
+        );
     },
     // 静态数据
     staticDataFn(val) {
@@ -296,7 +296,7 @@ export default {
       let data = [];
       for (const i in val) {
         axis[i] = val[i].axis;
-        data[i] = val[i].data;
+        data[i] = val[i].data
       }
       // x轴
       if (optionsSetup.verticalShow) {

report-ui/src/views/screenDesigner/widget/barCharts/widgetBarlinechart.vue

@@ -0,0 +1,466 @@
+<template>
+  <div :style="styleObj">
+    <v-chart :options="options" autoresize/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "WidgetBarlinechart",
+  components: {},
+  props: {
+    value: Object,
+    ispreview: Boolean
+  },
+  data() {
+    return {
+      options: {
+        color: [],
+        grid: {},
+        title: {
+          text: "",
+          textStyle: {
+            color: "#fff"
+          }
+        },
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c}%"
+        },
+        legend: {
+          textStyle: {
+            color: "#fff"
+          },
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [],
+            axisLabel: {
+              show: false,
+              textStyle: {
+                color: "#fff"
+              }
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "",
+            min: 0,
+            max: 250,
+            interval: 50,
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#fff"
+              }
+            }
+          },
+          {
+            type: "value",
+            name: "",
+            min: 0,
+            max: 25,
+            interval: 5,
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#fff"
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            name: "",
+            type: "bar",
+            yAxisIndex: 0,
+            data: [],
+            itemStyle: {
+              barBorderRadius: null
+            }
+          },
+          {
+            name: "",
+            type: "line",
+            yAxisIndex: 1,
+            data: [],
+            itemStyle: {}
+          }
+        ]
+      },
+      optionsStyle: {}, // 样式
+      optionsData: {}, // 数据
+      optionsCollapse: {}, // 图标属性
+      optionsSetup: {}
+    };
+  },
+  computed: {
+    styleObj() {
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        width: this.optionsStyle.width + "px",
+        height: this.optionsStyle.height + "px",
+        left: this.optionsStyle.left + "px",
+        top: this.optionsStyle.top + "px",
+        background: this.optionsSetup.background
+      };
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.optionsStyle = val.position;
+        this.optionsData = val.data;
+        this.optionsCollapse = val.collapse;
+        this.optionsSetup = val.setup;
+        this.editorOptions();
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.optionsStyle = this.value.position;
+    this.optionsData = this.value.data;
+    this.optionsCollapse = this.value.collapse;
+    this.optionsSetup = this.value.setup;
+    this.editorOptions();
+  },
+  methods: {
+    // 修改图标options属性
+    editorOptions() {
+      this.setOptionsTitle();
+      this.setOptionsX();
+      this.setOptionsY();
+      this.setOptionsLine();
+      this.setOptionsBar();
+      this.setOptionsTooltip();
+      this.setOptionsData();
+      this.setOptionsMargin();
+      this.setOptionsLegend();
+      this.setOptionsColor();
+    },
+    // 标题修改
+    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
+      };
+      title.subtext = optionsSetup.subText;
+      title.subtextStyle = {
+        color: optionsSetup.subTextColor,
+        fontWeight: optionsSetup.subTextFontWeight,
+        fontSize: optionsSetup.subTextFontSize
+      };
+
+      this.options.title = title;
+    },
+    // X轴设置
+    setOptionsX() {
+      const optionsSetup = this.optionsSetup;
+      const xAxis = {
+        type: "category",
+        show: optionsSetup.hideX, // 坐标轴是否显示
+        name: optionsSetup.xName, // 坐标轴名称
+        nameTextStyle: {
+          color: optionsSetup.nameColorX,
+          fontSize: optionsSetup.nameFontSizeX
+        },
+        nameRotate: optionsSetup.textAngle, // 文字角度
+        inverse: optionsSetup.reversalX, // 轴反转
+        axisLabel: {
+          show: true,
+          interval: optionsSetup.textInterval, // 文字间隔
+          rotate: optionsSetup.textAngle, // 文字角度
+          textStyle: {
+            color: optionsSetup.Xcolor, // x轴 坐标文字颜色
+            fontSize: optionsSetup.fontSizeX
+          }
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: optionsSetup.lineColorX
+          }
+        },
+        splitLine: {
+          show: optionsSetup.isShowSplitLineX,
+          lineStyle: {
+            color: optionsSetup.splitLineColorX
+          }
+        }
+      };
+      this.options.xAxis = xAxis;
+    },
+    // Y轴设置
+    setOptionsY() {
+      const optionsSetup = this.optionsSetup;
+      const yAxis = [
+        {
+          type: "value",
+          splitNumber: optionsSetup.splitNumberLeft,// 均分
+          show: optionsSetup.isShowYLeft, // 坐标轴是否显示
+          name: optionsSetup.textNameYLeft, // 坐标轴名称
+          nameTextStyle: { // 别名
+            color: optionsSetup.nameColorYLeft,
+            fontSize: optionsSetup.namefontSizeYLeft
+          },
+          inverse: optionsSetup.reversalY, // 轴反转
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: optionsSetup.colorY, // y轴 坐标文字颜色
+              fontSize: optionsSetup.fontSizeY
+            }
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: optionsSetup.lineColorY
+            }
+          },
+          splitLine: {
+            show: false,
+          }
+        },
+        {
+          type: "value",
+          splitNumber: optionsSetup.splitNumberRight,// 均分
+          show: optionsSetup.isShowYRight, // 坐标轴是否显示
+          name: optionsSetup.textNameYRight, // 坐标轴名称
+          nameTextStyle: { // 别名
+            color: optionsSetup.nameColorYRight,
+            fontSize: optionsSetup.namefontSizeYRight
+          },
+          inverse: optionsSetup.reversalY, // 轴反转
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: optionsSetup.colorY, // y轴 坐标文字颜色
+              fontSize: optionsSetup.fontSizeY
+            }
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: optionsSetup.lineColorY
+            }
+          },
+          splitLine: {
+            show: false,
+          }
+        }
+      ];
+      this.options.yAxis = yAxis;
+    },
+    // 折线设置 数值设置
+    setOptionsLine() {
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series;
+      for (const key in series) {
+        if (series[key].type == "line") {
+          series[key].showSymbol = optionsSetup.markPoint;
+          series[key].symbolSize = optionsSetup.pointSize;
+          series[key].smooth = optionsSetup.smoothCurve;
+          if (optionsSetup.area) {
+            series[key].areaStyle = {
+              opacity: optionsSetup.areaThickness / 100
+            };
+          } else {
+            series[key].areaStyle = {
+              opacity: 0
+            };
+          }
+          series[key].lineStyle = {
+            width: optionsSetup.lineWidth
+          };
+          series[key].itemStyle.borderRadius = optionsSetup.radius;
+          series[key].label = {
+            show: optionsSetup.isShowLine,
+            position: "top",
+            distance: optionsSetup.distanceLine,
+            fontSize: optionsSetup.fontSizeLine,
+            color: optionsSetup.subTextColorLine,
+            fontWeight: optionsSetup.fontWeightLine
+          };
+        }
+      }
+      this.options.series = series;
+    },
+    // 柱体设置 数值设置
+    setOptionsBar() {
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series;
+      for (const key in series) {
+        if (series[key].type == "bar") {
+          series[key].label = {
+            show: optionsSetup.isShowBar,
+            position: "top",
+            distance: optionsSetup.distanceBar,
+            fontSize: optionsSetup.fontSizeBar,
+            color: optionsSetup.subTextColorBar,
+            fontWeight: optionsSetup.fontWeightBar
+          };
+          series[key].barWidth = optionsSetup.maxWidth;
+          series[key].barMinHeight = optionsSetup.minHeight;
+          series[key].itemStyle.barBorderRadius = optionsSetup.radius;
+        }
+      }
+      this.options.series = series;
+    },
+    // tooltip 设置
+    setOptionsTooltip() {
+      const optionsSetup = this.optionsSetup;
+      const tooltip = {
+        trigger: "item",
+        show: true,
+        textStyle: {
+          color: optionsSetup.lineColor,
+          fontSize: optionsSetup.tipFontSize
+        }
+      };
+      this.options.tooltip = tooltip;
+    },
+    // 边距设置
+    setOptionsMargin() {
+      const optionsSetup = this.optionsSetup;
+      const grid = {
+        left: optionsSetup.marginLeft,
+        right: optionsSetup.marginRight,
+        bottom: optionsSetup.marginBottom,
+        top: optionsSetup.marginTop,
+        containLabel: true
+      };
+      this.options.grid = grid;
+    },
+    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.lengedColor,
+        fontSize: optionsSetup.lengedFontSize
+      };
+      legend.itemWidth = optionsSetup.lengedWidth;
+    },
+    // 图例名称设置
+    setOptionsLegendName(name){
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series;
+      const legendName = optionsSetup.legendName;
+      // 图例没有手动写则显示原值，写了则显示新值
+      if (null == legendName || legendName == '') {
+        for (let i = 0; i < name.length; i++) {
+          series[i].name = name[i];
+        }
+        this.options.legend['data'] = name;
+      }else {
+        const arr = legendName.split('|');
+        for (let i = 0; i < arr.length; i++) {
+          series[i].name = arr[i];
+        }
+        this.options.legend['data'] = arr
+      }
+    },
+    // 图例颜色修改
+    setOptionsColor() {
+      const optionsSetup = this.optionsSetup;
+      const customColor = optionsSetup.customColor;
+      if (!customColor) return;
+      const arrColor = [];
+      for (let i = 0; i < customColor.length; i++) {
+        arrColor.push(customColor[i].color);
+      }
+      this.options.color = arrColor;
+      this.options = Object.assign({}, this.options);
+    },
+    // 数据处理
+    setOptionsData() {
+      const optionsData = this.optionsData; // 数据类型 静态 or 动态
+      optionsData.dataType == "staticData"
+        ? this.staticDataFn(optionsData.staticData)
+        : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
+    },
+    staticDataFn(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 = axis;
+      // series
+      for (const i in series) {
+        if (series[i].type == "bar") {
+          series[i].data = bar;
+        } else {
+          series[i].data = line;
+        }
+      }
+      const legendName = [];
+      legendName.push('bar');
+      legendName.push('line');
+      this.options.legend['data'] = legendName;
+      this.setOptionsLegendName(legendName);
+    },
+    dynamicDataFn(val, refreshTime) {
+      if (!val) return;
+      if (this.ispreview) {
+        this.getEchartData(val);
+        this.flagInter = setInterval(() => {
+          this.getEchartData(val);
+        }, refreshTime);
+      } else {
+        this.getEchartData(val);
+      }
+    },
+    getEchartData(val) {
+      const data = this.queryEchartsData(val);
+      data.then(res => {
+        this.renderingFn(res);
+      });
+    },
+    renderingFn(val) {
+      this.options.xAxis.data = val.xAxis;
+      // series
+      const series = this.options.series;
+      const legendName = [];
+      for (const i in series) {
+        for (const j in val.series) {
+          if (series[i].type == val.series[j].type) {
+            series[i].data = val.series[j].data;
+          }
+        }
+        legendName.push(val.series[i].name);
+      }
+      this.options.legend['data'] = legendName;
+      this.setOptionsLegendName(legendName);
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.echarts {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>

report-ui/src/views/screenDesigner/widget/barCharts/widgetGradientColorBarchart.vue

@@ -0,0 +1,454 @@
+<template>
+  <div :style="styleObj">
+    <v-chart :options="options" autoresize/>
+  </div>
+</template>
+
+<script>
+import echarts from "echarts";
+
+export default {
+  name: "WidgetGradientColorBarchart", //渐变色，参考https://www.makeapie.com/editor.html?c=x0oZWoncE
+  components: {},
+  props: {
+    value: Object,
+    ispreview: Boolean
+  },
+  data() {
+    return {
+      options: {
+        title: {
+          text: "",
+          x: "center",
+          y: "4%",
+          textStyle: {
+            color: "#fff",
+            fontSize: "22"
+          },
+          subtextStyle: {
+            color: "#90979c",
+            fontSize: "16"
+          }
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow"
+          }
+        },
+        grid: {
+          top: "15%",
+          right: "3%",
+          left: "5%",
+          bottom: "12%"
+        },
+        legend: {
+          textStyle: {
+            color: "#fff"
+          }
+        },
+        xAxis: {
+          type: "category",
+          data: [],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255,255,255,0.12)"
+            }
+          },
+          axisLabel: {
+            margin: 10,
+            color: "#e2e9ff",
+            textStyle: {
+              fontSize: 14
+            }
+          }
+        },
+        yAxis: {
+          name: "",
+          axisLabel: {
+            formatter: "{value}",
+            color: "#e2e9ff"
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: "rgba(255,255,255,0)"
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: "rgba(255,255,255,0.12)"
+            }
+          }
+        },
+        series: [
+          {
+            type: "bar",
+            data: [5000, 2600, 1300, 1300, 1250, 1500],
+            barWidth: "20px",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)" // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)" // 100% 处的颜色
+                    }
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                //模糊细数
+                shadowBlur: 4
+              }
+            },
+            label: {
+              normal: {
+                show: true,
+                position: ["-10", "-30"],
+                distance: 1,
+                formatter: "{a|{c}}",
+                rich: {
+                  a: {
+                    fontSize: 15,
+                    color: "#fff",
+                    align: "center"
+                  }
+                }
+              }
+            }
+          }
+        ]
+      },
+      optionsStyle: {}, // 样式
+      optionsData: {}, // 数据
+      optionsSetup: {}
+    };
+  },
+  computed: {
+    styleObj() {
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        width: this.optionsStyle.width + "px",
+        height: this.optionsStyle.height + "px",
+        left: this.optionsStyle.left + "px",
+        top: this.optionsStyle.top + "px",
+        background: this.optionsSetup.background
+      };
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.optionsStyle = val.position;
+        this.optionsData = val.data;
+        this.optionsCollapse = val.setup;
+        this.optionsSetup = val.setup;
+        this.editorOptions();
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.optionsStyle = this.value.position;
+    this.optionsData = this.value.data;
+    this.optionsCollapse = this.value.setup;
+    this.optionsSetup = this.value.setup;
+    this.editorOptions();
+  },
+  methods: {
+    // 修改图标options属性
+    editorOptions() {
+      this.setOptionsTitle();
+      this.setOptionsX();
+      this.setOptionsY();
+      this.setOptionsTop();
+      this.setOptionsMargin();
+      this.setOptionsColor();
+      this.setOptionsData();
+    },
+    // 标题修改
+    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
+      };
+      title.subtext = optionsSetup.subText;
+      title.subtextStyle = {
+        color: optionsSetup.subTextColor,
+        fontWeight: optionsSetup.subTextFontWeight,
+        fontSize: optionsSetup.subTextFontSize
+      };
+
+      this.options.title = title;
+    },
+    // X轴设置
+    setOptionsX() {
+      const optionsSetup = this.optionsSetup;
+      const xAxis = {
+        type: "category",
+        show: optionsSetup.hideX, // 坐标轴是否显示
+        name: optionsSetup.xName, // 坐标轴名称
+        nameTextStyle: {
+          color: optionsSetup.nameColorX,
+          fontSize: optionsSetup.nameFontSizeX
+        },
+        nameRotate: optionsSetup.textAngle, // 文字角度
+        inverse: optionsSetup.reversalX, // 轴反转
+        axisLabel: {
+          show: true,
+          interval: optionsSetup.textInterval, // 文字间隔
+          rotate: optionsSetup.textAngle, // 文字角度
+          textStyle: {
+            color: optionsSetup.Xcolor, // x轴 坐标文字颜色
+            fontSize: optionsSetup.fontSizeX
+          }
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: optionsSetup.lineColorX
+          }
+        },
+        splitLine: {
+          show: optionsSetup.isShowSplitLineX,
+          lineStyle: {
+            color: optionsSetup.splitLineColorX
+          }
+        }
+      };
+      this.options.xAxis = xAxis;
+    },
+    // Y轴设置
+    setOptionsY() {
+      const optionsSetup = this.optionsSetup;
+      const yAxis = {
+        type: "value",
+        scale: optionsSetup.scale,
+        splitNumber: optionsSetup.splitNumber,// 均分
+        show: optionsSetup.isShowY, // 坐标轴是否显示
+        name: optionsSetup.textNameY, // 坐标轴名称
+        nameTextStyle: { // 别名
+          color: optionsSetup.nameColorY,
+          fontSize: optionsSetup.namefontSizeY
+        },
+        inverse: optionsSetup.reversalY, // 轴反转
+        axisLabel: {
+          show: true,
+          rotate: optionsSetup.ytextAngle, // 文字角度
+          textStyle: {
+            color: optionsSetup.colorY, // y轴 坐标文字颜色
+            fontSize: optionsSetup.fontSizeY
+          }
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: optionsSetup.lineColorY
+          }
+        },
+        splitLine: {
+          show: optionsSetup.isShowSplitLineY,
+          lineStyle: {
+            color: optionsSetup.splitLineColorY
+          }
+        }
+      };
+      this.options.yAxis = yAxis;
+    },
+    // 数值设定 or 柱体设置
+    setOptionsTop() {
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series;
+      if (series[0].type == "bar") {
+        if (optionsSetup.verticalShow) {
+          series[0].label = {
+            show: optionsSetup.isShow,
+            position: "right",
+            distance: optionsSetup.distance,
+            fontSize: optionsSetup.fontSize,
+            color: optionsSetup.subTextColor,
+            fontWeight: optionsSetup.fontWeight
+          }
+        } else {
+          series[0].label = {
+            show: optionsSetup.isShow,
+            position: "top",
+            distance: optionsSetup.distance,
+            fontSize: optionsSetup.fontSize,
+            color: optionsSetup.subTextColor,
+            fontWeight: optionsSetup.fontWeight
+          }
+        }
+        series[0].barWidth = optionsSetup.maxWidth;
+      }
+    },
+    // tooltip 提示语设置
+    setOptionsTooltip() {
+      const optionsSetup = this.optionsSetup;
+      const tooltip = {
+        trigger: "item",
+        show: true,
+        textStyle: {
+          color: optionsSetup.lineColor,
+          fontSize: optionsSetup.tipsFontSize
+        }
+      };
+      this.options.tooltip = tooltip;
+    },
+    // 边距设置
+    setOptionsMargin() {
+      const optionsSetup = this.optionsSetup;
+      const grid = {
+        left: optionsSetup.marginLeft,
+        right: optionsSetup.marginRight,
+        bottom: optionsSetup.marginBottom,
+        top: optionsSetup.marginTop,
+        containLabel: true
+      };
+      this.options.grid = grid;
+    },
+    // 渐变色
+    setOptionsColor() {
+      const optionsSetup = this.optionsSetup;
+      const itemStyle = this.options.series[0]["itemStyle"];
+      let normal = {}
+      if (optionsSetup.verticalShow) {
+        normal = {
+          color: new echarts.graphic.LinearGradient(1, 0, 0, 0,
+            [
+              {
+                offset: 0,
+                color: optionsSetup.bar0color // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: optionsSetup.bar100color // 100% 处的颜色
+              }
+            ],
+          ),
+          barBorderRadius: optionsSetup.radius, //圆角
+          shadowColor: optionsSetup.shadowColor, // 阴影颜色
+          shadowBlur: optionsSetup.shadowBlur //模糊系数
+        }
+      } else {
+        normal = {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
+            [
+              {
+                offset: 0,
+                color: optionsSetup.bar0color // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: optionsSetup.bar100color // 100% 处的颜色
+              }
+            ],
+          ),
+          barBorderRadius: optionsSetup.radius, //圆角
+          shadowColor: optionsSetup.shadowColor, // 阴影颜色
+          shadowBlur: optionsSetup.shadowBlur //模糊系数
+        }
+      }
+      itemStyle["normal"] = normal;
+    },
+    // 数据解析
+    setOptionsData() {
+      const optionsSetup = this.optionsSetup;
+      const optionsData = this.optionsData; // 数据类型 静态 or 动态
+      optionsData.dataType == "staticData"
+        ? this.staticDataFn(optionsData.staticData)
+        : this.dynamicDataFn(
+          optionsData.dynamicData,
+          optionsData.refreshTime,
+          optionsSetup
+        );
+    },
+    // 静态数据
+    staticDataFn(val) {
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series;
+      let axis = [];
+      let data = [];
+      for (const i in val) {
+        axis[i] = val[i].axis;
+        data[i] = val[i].data
+      }
+      // x轴
+      if (optionsSetup.verticalShow) {
+        this.options.xAxis.data = [];
+        this.options.yAxis.data = axis;
+        this.options.xAxis.type = "value";
+        this.options.yAxis.type = "category";
+      } else {
+        this.options.xAxis.data = axis;
+        this.options.yAxis.data = [];
+        this.options.xAxis.type = "category";
+        this.options.yAxis.type = "value";
+      }
+      if (series[0].type == "bar") {
+        series[0].data = data;
+      }
+    },
+    // 动态数据
+    dynamicDataFn(val, refreshTime, optionsSetup) {
+      if (!val) return;
+      if (this.ispreview) {
+        this.getEchartData(val, optionsSetup);
+        this.flagInter = setInterval(() => {
+          this.getEchartData(val, optionsSetup);
+        }, refreshTime);
+      } else {
+        this.getEchartData(val, optionsSetup);
+      }
+    },
+    getEchartData(val, optionsSetup) {
+      const data = this.queryEchartsData(val);
+      data.then(res => {
+        this.renderingFn(optionsSetup, res);
+      });
+    },
+    renderingFn(optionsSetup, val) {
+      // x轴
+      if (optionsSetup.verticalShow) {
+        this.options.xAxis.data = [];
+        this.options.yAxis.data = val.xAxis;
+        this.options.xAxis.type = "value";
+        this.options.yAxis.type = "category";
+      } else {
+        this.options.xAxis.data = val.xAxis;
+        this.options.yAxis.data = [];
+        this.options.xAxis.type = "category";
+        this.options.yAxis.type = "value";
+      }
+
+      // series
+      const series = this.options.series;
+      for (const i in series) {
+        if (series[i].type == "bar") {
+          series[i].name = val.series[i].name;
+          series[i].data = val.series[i].data;
+        }
+      }
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.echarts {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>

report-ui/src/views/screenDesigner/widget/barCharts/widgetMoreBarLineChart.vue

@@ -0,0 +1,579 @@
+<template>
+  <div :style='styleObj'>
+    <v-chart :options='options' autoresize/>
+  </div>
+</template>
+
+<script>
+
+import echarts from 'echarts';
+
+export default {
+  name: 'widgetMoreBarLineChart',
+  components: {},
+  props: {
+    value: Object,
+    ispreview: Boolean
+  },
+  data() {
+    return {
+      options: {
+        tooltip: {
+          trigger: 'item',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '2%',
+          right: '4%',
+          bottom: '14%',
+          top: '16%',
+          containLabel: true
+        },
+        legend: {
+          data: ['调解成功', '调解失败', '调解终止', '调解成功率'],
+          left: '7%',
+          top: '5%',
+          textStyle: {
+            color: '#666666'
+          },
+          itemWidth: 15,
+          itemHeight: 10,
+          itemGap: 25
+        },
+        xAxis: {
+          type: 'category',
+          data: ['2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019'],
+          axisLine: {
+            lineStyle: {
+              color: '#cdd5e2'
+
+            }
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#666666'
+            }
+          },
+        },
+        yAxis: [
+          {
+            type: 'value',
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#cdd5e2'
+              }
+            },
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              textStyle: {
+                color: '#666666'
+              }
+            },
+          },
+          {
+            type: 'value',
+            nameTextStyle: {
+              color: '#666666'
+            },
+            position: 'right',
+            axisLine: {
+              lineStyle: {
+                color: '#cdd5e2'
+              }
+            },
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: '#666666'
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            name: '调解成功',
+            type: 'bar',
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: '#29acff'
+                }, {
+                  offset: 1,
+                  color: '#4bdfff'
+                }]),
+                barBorderRadius: 6,
+              },
+            },
+            data: []
+          },
+          {
+            name: '调解失败',
+            type: 'bar',
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: '#3d93f2'
+                }, {
+                  offset: 1,
+                  color: '#5dc1fd'
+                }]),
+                barBorderRadius: 6,
+              }
+
+            },
+            data: []
+          },
+          {
+            name: '调解终止',
+            type: 'bar',
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: '#01c871'
+                }, {
+                  offset: 1,
+                  color: '#55f49c'
+                }]),
+                barBorderRadius: 6,
+              }
+            },
+            data: []
+          },
+          {
+            name: '调解成功率',
+            type: 'line',
+            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
+            smooth: false, //平滑曲线显示
+            symbol: 'circle', //标记的图形为实心圆
+            symbolSize: 8, //标记的大小
+            itemStyle: {
+              normal: {
+                color: '#ffa43a',
+                borderColor: 'rgba(255, 234, 0, 0.5)',  //圆点透明 边框
+                borderWidth: 5
+              },
+
+            },
+            lineStyle: {
+              color: '#ffa43a'
+            },
+            data: []
+          }
+        ]
+      }
+    }
+  },
+  computed: {
+    styleObj() {
+      return {
+        position: this.ispreview ? 'absolute' : 'static',
+        width: this.optionsStyle.width + 'px',
+        height: this.optionsStyle.height + 'px',
+        left: this.optionsStyle.left + 'px',
+        top: this.optionsStyle.top + 'px',
+        background: this.optionsSetup.background
+      };
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.optionsStyle = val.position;
+        this.optionsData = val.data;
+        this.optionsCollapse = val.collapse;
+        this.optionsSetup = val.setup;
+        this.editorOptions();
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.optionsStyle = this.value.position;
+    this.optionsData = this.value.data;
+    this.optionsCollapse = this.value.collapse;
+    this.optionsSetup = this.value.setup;
+    this.editorOptions();
+  },
+  methods: {
+    // 修改图标options属性
+    editorOptions() {
+      this.setOptionsTitle();
+      this.setOptionsX();
+      this.setOptionsY();
+      this.setOptionsLegend();
+      this.setOptionsTooltip();
+      this.setOptionsMargin();
+      this.setOptionsColor();
+      this.setOptionsData();
+    },
+    // 标题修改
+    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
+      };
+      title.subtext = optionsSetup.subText;
+      title.subtextStyle = {
+        color: optionsSetup.subTextColor,
+        fontWeight: optionsSetup.subTextFontWeight,
+        fontSize: optionsSetup.subTextFontSize
+      };
+
+      this.options.title = title;
+    },
+    // X轴设置
+    setOptionsX() {
+      const optionsSetup = this.optionsSetup;
+      const xAxis = {
+        type: 'category',
+        show: optionsSetup.hideX, // 坐标轴是否显示
+        name: optionsSetup.xName, // 坐标轴名称
+        nameTextStyle: {
+          color: optionsSetup.nameColorX,
+          fontSize: optionsSetup.nameFontSizeX
+        },
+        nameRotate: optionsSetup.textAngle, // 文字角度
+        inverse: optionsSetup.reversalX, // 轴反转
+        axisLabel: {
+          show: true,
+          interval: optionsSetup.textInterval, // 文字间隔
+          rotate: optionsSetup.textAngle, // 文字角度
+          textStyle: {
+            color: optionsSetup.Xcolor, // x轴 坐标文字颜色
+            fontSize: optionsSetup.fontSizeX
+          }
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: optionsSetup.lineColorX
+          }
+        },
+        splitLine: {
+          show: optionsSetup.isShowSplitLineX,
+          lineStyle: {
+            color: optionsSetup.splitLineColorX
+          }
+        }
+      };
+      this.options.xAxis = xAxis;
+    },
+    // Y轴设置
+    setOptionsY() {
+      const optionsSetup = this.optionsSetup;
+      const yAxis = [
+        {
+          type: 'value',
+          show: optionsSetup.isShowYLeft, // 坐标轴是否显示
+          name: optionsSetup.textNameYLeft, // 坐标轴名称
+          nameTextStyle: { // 别名
+            color: optionsSetup.nameColorYLeft,
+            fontSize: optionsSetup.namefontSizeYLeft
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: optionsSetup.colorY, // y轴 坐标文字颜色
+              fontSize: optionsSetup.fontSizeY
+            }
+          },
+          axisLine: {
+            show: optionsSetup.isShowYLeft,
+            lineStyle: {
+              color: optionsSetup.lineColorY
+            }
+          },
+          splitLine: {
+            show: false,
+          }
+        },
+        {
+          type: 'value',
+          position: 'right',
+          show: optionsSetup.isShowYRight, // 坐标轴是否显示
+          name: optionsSetup.textNameYRight, // 坐标轴名称
+          nameTextStyle: { // 别名
+            color: optionsSetup.nameColorYRight,
+            fontSize: optionsSetup.namefontSizeYRight
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: optionsSetup.colorY, // y轴 坐标文字颜色
+              fontSize: optionsSetup.fontSizeY
+            }
+          },
+          axisLine: {
+            show: optionsSetup.isShowYRight,
+            lineStyle: {
+              color: optionsSetup.lineColorY
+            }
+          },
+          splitLine: {
+            show: false,
+          }
+        }
+      ];
+      this.options.yAxis = yAxis;
+    },
+    // tooltip 设置
+    setOptionsTooltip() {
+      const optionsSetup = this.optionsSetup;
+      const tooltip = {
+        trigger: 'item',
+        show: true,
+        textStyle: {
+          color: optionsSetup.lineColor,
+          fontSize: optionsSetup.tipFontSize
+        }
+      };
+      this.options.tooltip = tooltip;
+    },
+    // 边距设置
+    setOptionsMargin() {
+      const optionsSetup = this.optionsSetup;
+      const grid = {
+        left: optionsSetup.marginLeft,
+        right: optionsSetup.marginRight,
+        bottom: optionsSetup.marginBottom,
+        top: optionsSetup.marginTop,
+        containLabel: true
+      };
+      this.options.grid = grid;
+    },
+    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.lengedColor,
+        fontSize: optionsSetup.lengedFontSize
+      };
+      legend.itemWidth = optionsSetup.lengedWidth;
+    },
+    // 图例名称设置
+    setOptionsLegendName(name){
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series;
+      const legendName = optionsSetup.legendName;
+      // 图例没有手动写则显示原值，写了则显示新值
+      if (null == legendName || legendName == '') {
+        for (let i = 0; i < name.length; i++) {
+          series[i].name = name[i];
+        }
+        this.options.legend['data'] = name;
+      }else {
+        const arr = legendName.split('|');
+        for (let i = 0; i < arr.length; i++) {
+          series[i].name = arr[i];
+        }
+        this.options.legend['data'] = arr
+      }
+    },
+    // 颜色修改
+    setOptionsColor() {
+      const optionsSetup = this.optionsSetup;
+      const customColor = optionsSetup.customColor;
+      const series = this.options.series;
+      if (!customColor) return;
+      const arrColor = [];
+      for (let i = 0; i < customColor.length; i++) {
+        arrColor.push(customColor[i].color);
+      }
+      for (const i in series) {
+        if (series[i].type == 'bar') {
+          series[i].itemStyle.normal['color'] = arrColor[i];
+        } else {
+          series[i].lineStyle['color'] = arrColor[i];
+        }
+      }
+    },
+    // 数据处理
+    setOptionsData() {
+      const optionsData = this.optionsData; // 数据类型 静态 or 动态
+      optionsData.dataType == 'staticData'
+        ? this.staticDataFn(optionsData.staticData)
+        : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
+    },
+    staticDataFn(val) {
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series;
+      let axis = [];
+      let bar1 = [];
+      let bar2 = [];
+      let bar3 = [];
+      let line = [];
+      for (const i in val) {
+        axis[i] = val[i].date;
+        bar1[i] = val[i].unsales;
+        bar2[i] = val[i].manus;
+        bar3[i] = val[i].rework;
+        line[i] = val[i].sales;
+      }
+      // x轴
+      this.options.xAxis.data = axis;
+      // series
+      for (const i in series) {
+        if (series[i].type == 'bar') {
+          series[i].label = {
+            show: optionsSetup.isShowBar,
+            position: 'top',
+            distance: optionsSetup.distanceBar,
+            fontSize: optionsSetup.fontSizeBar,
+            color: optionsSetup.subTextColorBar,
+            fontWeight: optionsSetup.fontWeightBar
+          };
+          series[i].barWidth = optionsSetup.maxWidth;
+          series[i].itemStyle.normal['barBorderRadius'] = optionsSetup.radius;
+        } else if (series[i].type == 'line') {
+          series[i].yAxisIndex = 1;
+          series[i].showSymbol = optionsSetup.markPoint;
+          series[i].symbolSize = optionsSetup.pointSize;
+          series[i].smooth = optionsSetup.smoothCurve;
+          if (optionsSetup.area) {
+            series[i].areaStyle = {
+              opacity: optionsSetup.areaThickness / 100
+            };
+          } else {
+            series[i].areaStyle = {
+              opacity: 0
+            };
+          }
+          series[i].lineStyle = {
+            width: optionsSetup.lineWidth
+          };
+          series[i].label = {
+            show: optionsSetup.isShowLine,
+            position: 'top',
+            distance: optionsSetup.distanceLine,
+            fontSize: optionsSetup.fontSizeLine,
+            color: optionsSetup.subTextColorLine,
+            fontWeight: optionsSetup.fontWeightLine
+          };
+        }
+      }
+      series[0].data = bar1;
+      series[1].data = bar2;
+      series[2].data = bar3;
+      series[3].data = line;
+      const legendName = [];
+      legendName.push('调解成功');
+      legendName.push('调解失败');
+      legendName.push('调解终止');
+      legendName.push('调解成功率');
+      this.options.legend['data'] = legendName;
+      this.setOptionsLegendName(legendName);
+    },
+    dynamicDataFn(val, refreshTime) {
+      if (!val) return;
+      if (this.ispreview) {
+        this.getEchartData(val);
+        this.flagInter = setInterval(() => {
+          this.getEchartData(val);
+        }, refreshTime);
+      } else {
+        this.getEchartData(val);
+      }
+    },
+    getEchartData(val) {
+      const data = this.queryEchartsData(val);
+      data.then(res => {
+        this.renderingFn(res);
+      });
+    },
+    renderingFn(val) {
+      const optionsSetup = this.optionsSetup;
+      this.options.xAxis.data = val.xAxis;
+      const series = [];
+      const legendName = [];
+      for (const i in val.series) {
+        const obj = {};
+        if (val.series[i].type == 'bar') {
+          obj.name = val.series[i].name;
+          obj.type = val.series[i].type;
+          obj.label = {
+            show: optionsSetup.isShowBar,
+            position: 'top',
+            distance: optionsSetup.distanceBar,
+            fontSize: optionsSetup.fontSizeBar,
+            color: optionsSetup.subTextColorBar,
+            fontWeight: optionsSetup.fontWeightBar
+          };
+          obj.barWidth = optionsSetup.maxWidth;
+          obj.itemStyle = {
+            normal: {
+              barBorderRadius: optionsSetup.radius,
+            }
+          };
+          obj.data = val.series[i].data;
+          series.push(obj);
+        } else if (val.series[i].type == 'line') {
+          obj.name = val.series[i].name;
+          obj.type = val.series[i].type;
+          obj.yAxisIndex = 1;
+          obj.showSymbol = optionsSetup.markPoint;
+          obj.symbolSize = optionsSetup.pointSize;
+          obj.smooth = optionsSetup.smoothCurve;
+          if (optionsSetup.area) {
+            obj.areaStyle = {
+              opacity: optionsSetup.areaThickness / 100
+            };
+          } else {
+            obj.areaStyle = {
+              opacity: 0
+            };
+          }
+          obj.lineStyle = {
+            width: optionsSetup.lineWidth
+          };
+          obj.label = {
+            show: optionsSetup.isShowLine,
+            position: 'top',
+            distance: optionsSetup.distanceLine,
+            fontSize: optionsSetup.fontSizeLine,
+            color: optionsSetup.subTextColorLine,
+            fontWeight: optionsSetup.fontWeightLine
+          };
+          obj.data = val.series[i].data;
+          series.push(obj);
+        }
+        legendName.push(val.series[i].name);
+      }
+      this.options.series = series;
+      this.options.legend['data'] = legendName;
+      this.setOptionsLegendName(legendName);
+    },
+  }
+};
+
+</script>
+
+<style scoped lang='scss'>
+.echarts {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>

report-ui/src/views/screenDesigner/widget/decorateCharts/widgetDecoratePieChart.vue

@@ -0,0 +1,490 @@
+<template>
+  <div :style="styleObj">
+    <v-chart :options="options" autoresize/>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "widgetRotatePieChart",
+  components: {},
+  props: {
+    value: Object,
+    ispreview: Boolean
+  },
+  data() {
+    return {
+      options: {
+        title: {},
+        series: [
+          {
+            name: '最外环',
+            type: 'pie',
+            silent: true,
+            radius: ['98%', '97%'],
+            label: {
+              normal: {
+                show: false
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+            itemStyle: {
+              normal: {
+                show: false,
+              },
+            },
+            data: [0]
+          },
+          {
+            name: '外四环',
+            type: 'pie',
+            zlevel: 2,
+            silent: true,
+            radius: ['90%', '91%'],
+            startAngle: 50,
+            hoverAnimation: false,
+            label: {
+              normal: {
+                show: false
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+            data: [0]
+          },
+          {
+            name: '里四环',
+            type: 'pie',
+            zlevel: 3,
+            silent: true,
+            radius: ['88%', '87%'],
+            label: {
+              normal: {
+                show: false
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+            data: [0]
+          },
+          {
+            name: '虚线环',
+            type: 'pie',
+            zlevel: 4,
+            silent: true,
+            radius: ['84%', '83%'],
+            label: {
+              normal: {
+                show: false
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+            data: [0]
+          },
+          {
+            name: '三分环',
+            type: 'pie',
+            zlevel: 5,
+            silent: true,
+            radius: ['80%', '78%'],
+            color: ["#fc8d89", "#46d3f3", "rgba(203,203,203,.2)"],
+            startAngle: 50,
+            avoidLabelOverlap: false,
+            hoverAnimation: false,
+            label: {
+              normal: {
+                show: false
+              },
+            },
+            data: [50, 20, 40]
+          },
+          {
+            name: "外指标环",
+            type: 'gauge',
+            splitNumber: 30,
+            min: 0,
+            max: 100,
+            radius: '73%', //图表尺寸
+            center: ['50%', '50%'],
+            startAngle: 90,
+            endAngle: -269.9999,
+            axisLabel: {
+              show: false
+            },
+            pointer: {
+              show: 0,
+            },
+            detail: {
+              show: 0,
+            },
+          },
+          {
+            name: '里指标环',
+            type: 'gauge',
+            splitNumber: 30,
+            min: 0,
+            max: 100,
+            radius: '68%',
+            center: ['50%', '50%'],
+            startAngle: 90,
+            endAngle: -269.9999,
+            axisLabel: {
+              show: false
+            },
+            pointer: {
+              show: 0,
+            },
+            detail: {
+              show: false,
+            },
+          },
+          {
+            name: '环外环',
+            type: 'pie',
+            zlevel: 20,
+            silent: true,
+            radius: ['60%', '59%'],
+            hoverAnimation: false,
+            label: {
+              normal: {
+                show: false
+              },
+            },
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+          },
+          {
+            name: '中间环形图',
+            type: 'pie',
+            radius: ['40%', '55%'],
+            avoidLabelOverlap: false,
+            hoverAnimation: false,
+            itemStyle: {
+              normal: {
+                color: '#80ADD2',
+                borderColor: '#3D4268',
+              }
+            },
+            label: {
+              normal: {
+                show: false,
+                position: 'center',
+
+              },
+              emphasis: {
+                show: true,
+                textStyle: {
+                  fontSize: '30',
+                  fontWeight: 'bold'
+                }
+              }
+            },
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+            data: [
+              25, 25, 25, 25, 25, 25
+            ]
+          },
+        ]
+      },
+      optionsStyle: {}, // 样式
+      optionsCollapse: {}, // 图标属性
+      optionsSetup: {}
+    }
+  },
+  computed: {
+    styleObj() {
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        width: this.optionsStyle.width + "px",
+        height: this.optionsStyle.height + "px",
+        left: this.optionsStyle.left + "px",
+        top: this.optionsStyle.top + "px",
+        background: this.optionsSetup.background
+      };
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.optionsStyle = val.position;
+        this.optionsData = val.data;
+        this.optionsCollapse = val.setup;
+        this.optionsSetup = val.setup;
+        this.editorOptions();
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.optionsStyle = this.value.position;
+    this.optionsData = this.value.data;
+    this.optionsCollapse = this.value.setup;
+    this.optionsSetup = this.value.setup;
+    this.editorOptions();
+  },
+  methods: {
+    editorOptions() {
+      this.setOptionsLastRing();
+      this.setOptionsEightRing();
+      this.setOptionsDottedRing();
+      this.setOptionsThreeRing();
+      this.setOptionsOutRing();
+      this.setOptionsInRing();
+      this.setOptionsRingOnRing();
+      this.setOptionsPie();
+    },
+    // 颜色设置
+    setColor(color) {
+      const nullColor = 'rgba(0,0,0,0)'
+      if (color == "") {
+        color = nullColor
+      }
+      return color
+    },
+    // 最外外环1
+    setOptionsLastRing() {
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series[0];
+      if (optionsSetup.isLastRingShow) {
+        series.data = [0]
+      } else {
+        series.data = ''
+      }
+      const normal = {
+        color: {
+          colorStops: [
+            {
+              offset: 0,
+              color: this.setColor(optionsSetup.lastRing0Color),
+            },
+            {
+              offset: 1,
+              color: this.setColor(optionsSetup.lastRing100Color),
+            },
+          ],
+        },
+      };
+      series.itemStyle['normal'] = normal;
+    },
+    setRingPie2() {
+      const optionsSetup = this.optionsSetup;
+      let dataArr = [];
+      for (let i = 0; i < 8; i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 25,
+            itemStyle: {
+              normal: {
+                color: this.setColor(optionsSetup.eightColor),
+                borderWidth: 0,
+                borderColor: 'rgba(0,0,0,0)'
+              }
+            }
+          })
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 20,
+            itemStyle: {
+              normal: {
+                color: 'rgba(0,0,0,0)'
+              }
+            }
+          })
+        }
+      }
+      return dataArr
+    },
+    // 八分环
+    setOptionsEightRing() {
+      const series = this.options.series;
+      series[1].data = this.setRingPie2();
+      series[2].data = this.setRingPie2();
+    },
+    setRingPie3() {
+      const optionsSetup = this.optionsSetup;
+      let dataArr = [];
+      for (let i = 0; i < (optionsSetup.dottedNum * 2); i++) {
+        if (i % 2 === 0) {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 25,
+            itemStyle: {
+              normal: {
+                color: this.setColor(optionsSetup.dottedColor),
+                borderWidth: 0,
+                borderColor: 'rgba(0,0,0,0)'
+              }
+            }
+          })
+        } else {
+          dataArr.push({
+            name: (i + 1).toString(),
+            value: 20,
+            itemStyle: {
+              normal: {
+                color: 'rgba(0,0,0,0)',
+              }
+            }
+          })
+        }
+      }
+      return dataArr
+    },
+    // 虚线环
+    setOptionsDottedRing() {
+      const series = this.options.series;
+      series[3].data = this.setRingPie3()
+    },
+    // 三分环
+    setOptionsThreeRing() {
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series[4];
+      series.color = [this.setColor(optionsSetup.three1Color), this.setColor(optionsSetup.three2Color), this.setColor(optionsSetup.three3Color)]
+    },
+    // 外指标环
+    setOptionsOutRing() {
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series;
+      const axisLine = {
+        show: optionsSetup.isOutRingShow,
+        lineStyle: {
+          width: optionsSetup.outRingWidth,
+          shadowBlur: 0,
+          color: [
+            [1, this.setColor(optionsSetup.outRingColor)]
+          ]
+        }
+      };
+      const axisTick = {
+        show: optionsSetup.isOutTickShow,
+        lineStyle: {
+          color: this.setColor(optionsSetup.outTickColor),
+          width: optionsSetup.outTickWidth
+        },
+        length: optionsSetup.outTickLength,
+        splitNumber: optionsSetup.outTickWidth
+      };
+      series[5].splitNumber = optionsSetup.outSplitNum
+      const splitLine = {
+        show: optionsSetup.isOutSplitShow,
+        length: optionsSetup.outSplitLength,
+        lineStyle: {
+          color: this.setColor(optionsSetup.outSplitColor),
+          width: optionsSetup.outSplitWidth,
+        }
+      };
+      series[5].axisLine = axisLine
+      series[5].axisTick = axisTick
+      series[5].splitLine = splitLine
+    },
+    // 里指标环
+    setOptionsInRing() {
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series;
+      const axisLine = {
+        show: optionsSetup.isInRingShow,
+        lineStyle: {
+          width: optionsSetup.inRingWidth,
+          shadowBlur: 0,
+          color: [
+            [1, this.setColor(optionsSetup.inRingColor)],
+          ],
+        },
+      };
+      const axisTick = {
+        show: optionsSetup.isInTickShow,
+        lineStyle: {
+          color: this.setColor(optionsSetup.inTickColor),
+          width: optionsSetup.inTickWidth,
+        },
+        length: optionsSetup.inTickLength,
+        splitNumber: optionsSetup.inTickNum,
+      };
+      series[6].splitNumber = optionsSetup.inSplitNum
+      const splitLine = {
+        show: optionsSetup.isInSplitShow,
+        length: optionsSetup.inSplitLength,
+        lineStyle: {
+          color: this.setColor(optionsSetup.inSplitColor),
+          width: optionsSetup.inSplitWidth
+        }
+      };
+      series[6].axisLine = axisLine
+      series[6].axisTick = axisTick
+      series[6].splitLine = splitLine
+    },
+    // 环外环设置
+    setOptionsRingOnRing() {
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series[7];
+      if (optionsSetup.isRingOnRingShow) {
+        series.data = [0]
+      } else {
+        series.data = ''
+      }
+      const itemStyle = {
+        normal: {
+          color: this.setColor(optionsSetup.ringOnRingColor),
+        }
+      }
+      series.itemStyle = itemStyle
+    },
+    // 中饼图设置
+    setOptionsPie() {
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series[8];
+      let width = optionsSetup.pieWidth
+      const pieWidth = width + "%"
+      series.radius = [pieWidth, '55%']
+
+      let pieBlocks = optionsSetup.pieBlocks
+      if (pieBlocks == "six") {
+        series.data = [25, 25, 25, 25, 25, 25]
+      } else if (pieBlocks == "five") {
+        series.data = [30, 30, 30, 30, 30]
+      } else {
+        series.data = [40, 40, 40, 40]
+      }
+      const itemStyle = {
+        normal: {
+          color: this.setColor(optionsSetup.pieColor),
+          borderColor: this.setColor(optionsSetup.pieBorderColor),
+        }
+      }
+      series.itemStyle = itemStyle
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.echarts {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>

report-ui/src/views/screenDesigner/widget/funnelCharts/widgetFunnel.vue

@@ -0,0 +1,258 @@
+<template>
+  <div :style="styleObj">
+    <v-chart :options="options" autoresize/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "WidgetFunnel",
+  components: {},
+  props: {
+    value: Object,
+    ispreview: Boolean
+  },
+  data() {
+    return {
+      options: {
+        color: [],
+        title: {
+          text: "",
+          textStyle: {
+            color: "#fff"
+          }
+        },
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c}"
+        },
+        legend: {
+          x: 'center',
+          y: '92%',
+          textStyle: {
+            color: "#fff"
+          }
+        },
+        series: [
+          {
+            name: "",
+            type: "funnel",
+            left: "center",
+            width: "80%",
+            //maxSize: '80%',
+            sort: "descending",
+            label: {
+              normal: {
+                show: true,
+                position: 'inside',
+                formatter: '{c}',
+                textStyle: {
+                  color: '#fff',
+                  fontSize: 14,
+                }
+              },
+              emphasis: {
+                position: 'inside',
+                formatter: '{b}: {c}'
+              }
+            },
+            itemStyle: {
+              normal: {
+                opacity: 0.8,
+                borderColor: 'rgba(12, 13, 43, .9)',
+                borderWidth: 1,
+                shadowBlur: 4,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                shadowColor: 'rgba(0, 0, 0, .6)'
+              }
+            },
+            data: []
+          }
+        ]
+      },
+      optionsStyle: {}, // 样式
+      optionsData: {}, // 数据
+      optionsCollapse: {}, // 图标属性
+      optionsSetup: {}
+    };
+  },
+  computed: {
+    styleObj() {
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        width: this.optionsStyle.width + "px",
+        height: this.optionsStyle.height + "px",
+        left: this.optionsStyle.left + "px",
+        top: this.optionsStyle.top + "px",
+        background: this.optionsSetup.background
+      };
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.optionsStyle = val.position;
+        this.optionsData = val.data;
+        this.optionsCollapse = val.collapse;
+        this.optionsSetup = val.setup;
+        this.editorOptions();
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.optionsStyle = this.value.position;
+    this.optionsData = this.value.data;
+    this.optionsCollapse = this.value.collapse;
+    this.optionsSetup = this.value.setup;
+    this.editorOptions();
+  },
+  methods: {
+    // 修改图标options属性
+    editorOptions() {
+      this.setEnding();
+      this.setOptionsText();
+      this.setOptionsTitle();
+      this.setOptionsTooltip();
+      this.setOptionsLegend();
+      this.setOptionsColor();
+      this.setOptionsData();
+    },
+    // 翻转
+    setEnding() {
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series;
+      if (optionsSetup.ending) {
+        series[0].sort = "ascending";
+      } else {
+        series[0].sort = "descending";
+      }
+    },
+    // 数值设置
+    setOptionsText() {
+      const optionsSetup = this.optionsSetup;
+      const normal = {
+        show: optionsSetup.isShow,
+        position: 'inside',
+        formatter: '{c}',
+        textStyle: {
+          color: optionsSetup.color,
+          fontSize: optionsSetup.fontSize,
+          fontWeight: optionsSetup.fontWeight,
+        }
+      }
+      this.options.series[0].label['normal'] = normal;
+    },
+    // 标题修改
+    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
+      };
+      title.subtext = optionsSetup.subText;
+      title.subtextStyle = {
+        color: optionsSetup.subTextColor,
+        fontWeight: optionsSetup.subTextFontWeight,
+        fontSize: optionsSetup.subTextFontSize
+      };
+
+      this.options.title = title;
+    },
+    // 提示语设置 tooltip
+    setOptionsTooltip() {
+      const optionsSetup = this.optionsSetup;
+      const tooltip = {
+        trigger: "item",
+        show: true,
+        textStyle: {
+          color: optionsSetup.lineColor,
+          fontSize: optionsSetup.tipFontSize
+        }
+      };
+      this.options.tooltip = tooltip;
+    },
+    // 图例操作 legend
+    setOptionsLegend() {
+      const optionsSetup = this.optionsSetup;
+      const legend = this.options.legend;
+      legend.show = optionsSetup.isShowLegend;
+      legend.left = optionsSetup.lateralPosition;
+      legend.right = optionsSetup.lateralPosition;
+      legend.top = optionsSetup.longitudinalPosition;
+      legend.bottom =
+        optionsSetup.longitudinalPosition;
+      legend.orient = optionsSetup.layoutFront;
+      legend.textStyle = {
+        color: optionsSetup.lengedColor,
+        fontSize: optionsSetup.lengedFontSize
+      };
+      legend.itemWidth = optionsSetup.lengedWidth;
+    },
+    // 图例颜色修改
+    setOptionsColor() {
+      const optionsSetup = this.optionsSetup;
+      const customColor = optionsSetup.customColor;
+      if (!customColor) return;
+      const arrColor = [];
+      for (let i = 0; i < customColor.length; i++) {
+        arrColor.push(customColor[i].color);
+      }
+      this.options.color = arrColor;
+      this.options = Object.assign({}, this.options);
+    },
+    setOptionsData() {
+      const optionsData = this.optionsData; // 数据类型 静态 or 动态
+      optionsData.dataType == "staticData"
+        ? this.staticDataFn(optionsData.staticData)
+        : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
+    },
+    staticDataFn(val) {
+      const staticData = typeof val == "string" ? JSON.parse(val) : val;
+      for (const key in this.options.series) {
+        if (this.options.series[key].type == "funnel") {
+          this.options.series[key].data = staticData;
+        }
+      }
+    },
+    dynamicDataFn(val, refreshTime) {
+      if (!val) return;
+      if (this.ispreview) {
+        this.getEchartData(val);
+        this.flagInter = setInterval(() => {
+          this.getEchartData(val);
+        }, refreshTime);
+      } else {
+        this.getEchartData(val);
+      }
+    },
+    getEchartData(val) {
+      const data = this.queryEchartsData(val);
+      data.then(res => {
+        this.renderingFn(res);
+      });
+    },
+    renderingFn(val) {
+      for (const key in this.options.series) {
+        if (this.options.series[key].type == "funnel") {
+          this.options.series[key].data = val;
+        }
+      }
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.echarts {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>

report-ui/src/views/screenDesigner/widget/heatmap/widgetHeatmap.vue

@@ -0,0 +1,367 @@
+<template>
+  <div :style="styleObj">
+    <v-chart :options="options" autoresize/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "widgetHeatmap",
+  components: {},
+  props: {
+    value: Object,
+    ispreview: Boolean,
+  },
+  data() {
+    return {
+      options: {
+        title: {
+          text: "",
+          left: "center",
+          textStyle: {
+            color: "#fff",
+          },
+        },
+        tooltip: {
+          position: "top",
+          show: true,
+          textStyle: {},
+        },
+        grid: {
+          height: "90%",
+          width: "90%",
+          top: 10,
+          left: 20,
+        },
+        xAxis: {
+          name: "",
+          type: "category",
+          axisLabel: {
+            show: true,
+            color: "#0f0",
+          },
+          data: [],
+          splitArea: {
+            show: false,
+          },
+          nameTextStyle: {
+            color: "",
+            fontSize: 14,
+          },
+        },
+        yAxis: {
+          name: "",
+          type: "category",
+          axisLabel: {
+            show: true,
+            color: "#0f0",
+          },
+          data: [],
+          splitArea: {
+            show: false,
+          },
+          nameTextStyle: {
+            color: "",
+            fontSize: 14,
+          },
+        },
+        visualMap: {
+          show: true,
+          min: 0,
+          max: 5000,
+          calculable: true,
+          orient: "horizontal",
+          left: "center",
+          bottom: 0,
+          inRange: {
+            color: [],
+          },
+          textStyle: {
+            fontSize: 14,
+            color: "#fff",
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "heatmap",
+            data: [],
+            label: {
+              show: false,
+              fontSize: 16,
+            },
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+      },
+      optionsStyle: {}, // 样式
+      optionsData: {}, // 数据
+      optionsCollapse: {}, // 图标属性
+      optionsSetup: {},
+    };
+  },
+  computed: {
+    styleObj() {
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        width: this.optionsStyle.width + "px",
+        height: this.optionsStyle.height + "px",
+        left: this.optionsStyle.left + "px",
+        top: this.optionsStyle.top + "px",
+        background: this.optionsSetup.background,
+      };
+    },
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.optionsStyle = val.position;
+        this.optionsData = val.data;
+        this.optionsCollapse = val.collapse;
+        this.optionsSetup = val.setup;
+        this.editorOptions();
+      },
+      deep: true,
+    },
+  },
+  created() {
+    this.optionsStyle = this.value.position;
+    this.optionsData = this.value.data;
+    this.optionsCollapse = this.value.collapse;
+    this.optionsSetup = this.value.setup;
+    this.editorOptions();
+  },
+  methods: {
+    // 修改图标options属性
+    editorOptions() {
+      this.setOptionsTitle();
+      this.setOptionsX();
+      this.setOptionsY();
+      this.setOptionsSeries();
+      this.setOptionsMargin();
+      this.setOptionsVisualMap();
+      this.setOptionsData();
+    },
+    // 标题修改
+    setOptionsTitle() {
+      const optionsSetup = this.optionsSetup;
+      const title = {
+        text: optionsSetup.titleText,
+        show: optionsSetup.isNoTitle,
+        left: optionsSetup.textAlign,
+        textStyle: {
+          color: optionsSetup.textColor,
+          fontSize: optionsSetup.textFontSize,
+          fontWeight: optionsSetup.textFontWeight
+        },
+        subtext: optionsSetup.subText,
+        subtextStyle: {
+          color: optionsSetup.subTextColor,
+          fontWeight: optionsSetup.subTextFontWeight,
+          fontSize: optionsSetup.subTextFontSize
+        },
+      };
+      this.options.title = title;
+    },
+    // X轴设置
+    setOptionsX() {
+      const optionsSetup = this.optionsSetup;
+      const xAxis = {
+        type: "category",
+        // 坐标轴是否显示
+        show: optionsSetup.hideX,
+        // 坐标轴名称
+        name: optionsSetup.xName,
+        nameTextStyle: {
+          color: optionsSetup.xNameColor,
+          fontSize: optionsSetup.xNameFontSize
+        },
+        // 轴反转
+        inverse: optionsSetup.reversalX,
+        axisLabel: {
+          show: true,
+          // 文字间隔
+          interval: optionsSetup.textInterval,
+          // 文字角度
+          rotate: optionsSetup.textAngleX,
+          textStyle: {
+            // 坐标文字颜色
+            color: optionsSetup.Xcolor,
+            fontSize: optionsSetup.fontSizeX
+          }
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: optionsSetup.lineColorX
+          }
+        },
+        splitArea: {
+          show: false,
+        },
+      };
+      this.options.xAxis = xAxis;
+    },
+    // Y轴设置
+    setOptionsY() {
+      const optionsSetup = this.optionsSetup;
+      const yAxis = {
+        type: "category",
+        // 坐标轴是否显示
+        show: optionsSetup.isShowY,
+        // 坐标轴名称
+        name: optionsSetup.textNameY,
+        nameTextStyle: {
+          color: optionsSetup.NameColorY,
+          fontSize: optionsSetup.NameFontSizeY
+        },
+        // y轴反转
+        inverse: optionsSetup.reversalY,
+        axisLabel: {
+          show: true,
+          // 文字角度
+          rotate: optionsSetup.textAngleY,
+          textStyle: {
+            // 坐标文字颜色
+            color: optionsSetup.colorY,
+            fontSize: optionsSetup.fontSizeY
+          }
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: optionsSetup.lineColorY
+          }
+        },
+        splitArea: {
+          show: false,
+        },
+      };
+      this.options.yAxis = yAxis;
+    },
+    // 数值设定
+    setOptionsSeries() {
+      const optionsSetup = this.optionsSetup;
+      const lable = {
+        show: optionsSetup.isShow,
+        textStyle: {
+          fontSize: optionsSetup.fontSize,
+          color: optionsSetup.subTextColor,
+          fontWeight: optionsSetup.fontWeight
+        }
+      }
+      this.options.series[0].label = lable;
+    },
+    // 边距设置
+    setOptionsMargin() {
+      const optionsSetup = this.optionsSetup;
+      const grid = {
+        left: optionsSetup.marginLeft,
+        right: optionsSetup.marginRight,
+        bottom: optionsSetup.marginBottom,
+        top: optionsSetup.marginTop,
+        containLabel: true
+      };
+      this.options.grid = grid;
+    },
+    // tooltip 设置
+    setOptionsTooltip() {
+      const optionsSetup = this.optionsSetup;
+      const tooltip = {
+        trigger: "item",
+        position: "top",
+        show: true,
+        textStyle: {
+          color: optionsSetup.lineColor,
+          fontSize: optionsSetup.tipsLineColor
+        }
+      };
+      this.options.tooltip = tooltip;
+    },
+    // 图设置
+    setOptionsVisualMap() {
+      const optionsSetup = this.optionsSetup;
+      const visualMap = this.options.visualMap;
+      visualMap.show = optionsSetup.isShowLegend;
+      visualMap.min = optionsSetup.dataMin;
+      visualMap.max = optionsSetup.dataMax;
+      visualMap.textStyle = {
+        fontSize : optionsSetup.lengedFontSize,
+        color : optionsSetup.lengedColor
+      };
+      visualMap.inRange.color = optionsSetup.lengedColorList.map((x) => {
+        return x.color;
+      });
+      visualMap.left = optionsSetup.lateralPosition;
+      visualMap.top = optionsSetup.longitudinalPosition;
+      visualMap.bottom = optionsSetup.longitudinalPosition;
+      visualMap.orient = optionsSetup.layoutFront;
+      visualMap.itemWidth = optionsSetup.lengedWidth;
+    },
+    setOptionsData() {
+      const optionsData = this.optionsData; // 数据类型 静态 or 动态
+      optionsData.dataType == "staticData"
+        ? this.staticDataFn(optionsData.staticData)
+        : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
+    },
+    //去重
+    setUnique(arr) {
+      let newArr = [];
+      arr.forEach(item => {
+        return newArr.includes(item) ? '' : newArr.push(item);
+      });
+      return newArr;
+    },
+    staticDataFn(val) {
+      const data = [];
+      let xAxisList = [];
+      let yAxisList = [];
+      for (const i in val) {
+        xAxisList[i] = val[i].axis;
+        yAxisList[i] = val[i].yaxis;
+        data[i] = [val[i].axis,val[i].yaxis,val[i].num]
+      }
+      xAxisList = this.setUnique(xAxisList);
+      yAxisList = this.setUnique(yAxisList);
+      this.options.xAxis.data = xAxisList;
+      this.options.yAxis.data = yAxisList;
+      this.options.series[0].data = data;
+    },
+    dynamicDataFn(val, refreshTime) {
+      if (!val) return;
+      if (this.ispreview) {
+        this.getEchartData(val);
+        this.flagInter = setInterval(() => {
+          this.getEchartData(val);
+        }, refreshTime);
+      } else {
+        this.getEchartData(val);
+      }
+    },
+    getEchartData(val) {
+      const data = this.queryEchartsData(val);
+      data.then((res) => {
+        this.renderingFn(res);
+      });
+    },
+    renderingFn(val) {
+      this.options.xAxis.data = val.xAxis;
+      this.options.yAxis.data = val.yAxis;
+      this.options.series[0].data = val.series;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.echarts {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>

report-ui/src/views/screenDesigner/widget/index.vue

@@ -25,6 +25,24 @@ import widgetText from "./texts/widgetText.vue";
 import widgetTime from "./texts/widgetTime.vue";
 import widgetVideo from "./texts/widgetVideo.vue";
 import widgetBarchart from "./barCharts/widgetBarchart.vue";
+import widgetGradientColorBarchart from "./barCharts/widgetGradientColorBarchart.vue";
+import widgetLinechart from "./lineCharts/widgetLinechart.vue";
+import widgetBarlinechart from "./barCharts/widgetBarlinechart";
+import WidgetPiechart from "./pieCharts/widgetPiechart.vue";
+import WidgetFunnel from "./funnelCharts/widgetFunnel.vue";
+import WidgetGauge from "./percentCharts/widgetGauge.vue";
+import WidgetPieNightingaleRoseArea from "./pieCharts/widgetPieNightingaleRose";
+import widgetMap from "./mapCharts/widgetMap.vue";
+import widgetPiePercentageChart from "./percentCharts/widgetPiePercentageChart";
+import widgetAirBubbleMap from "./mapCharts/widgetAirBubbleMap";
+import widgetBarStackChart from "./barCharts/widgetBarStackChart";
+import widgetLineStackChart from "./lineCharts/widgetLineStackChart";
+import widgetBarCompareChart from "./barCharts/widgetBarCompareChart";
+import widgetLineCompareChart from "./lineCharts/widgetLineCompareChart";
+import widgetDecoratePieChart from "./decorateCharts/widgetDecoratePieChart";
+import widgetMoreBarLineChart from "./barCharts/widgetMoreBarLineChart";
+import widgetWordCloud from "./wordcloudCharts/widgetWordCloud";
+import widgetHeatmap from "./heatmap/widgetHeatmap";
 
 export default {
   name: "Widget",
@@ -38,7 +56,25 @@ export default {
     widgetText,
     widgetTime,
     widgetVideo,
-    widgetBarchart
+    widgetBarchart,
+    widgetGradientColorBarchart,
+    widgetLinechart,
+    widgetBarlinechart,
+    WidgetPiechart,
+    WidgetFunnel,
+    WidgetGauge,
+    WidgetPieNightingaleRoseArea,
+    widgetMap,
+    widgetPiePercentageChart,
+    widgetAirBubbleMap,
+    widgetBarStackChart,
+    widgetLineStackChart,
+    widgetBarCompareChart,
+    widgetLineCompareChart,
+    widgetDecoratePieChart,
+    widgetMoreBarLineChart,
+    widgetWordCloud,
+    widgetHeatmap
   },
   model: {
     prop: "value",

report-ui/src/views/screenDesigner/widget/lineCharts/widgetLineCompareChart.vue

@@ -0,0 +1,690 @@
+<template>
+  <div :style="styleObj">
+    <v-chart :options="options" autoresize/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "WidgetBarCompareChart",
+  //参考 https://www.makeapie.com/editor.html?c=xOjLyozu2W
+  components: {},
+  props: {
+    value: Object,
+    ispreview: Boolean
+  },
+  data() {
+    return {
+      options: {
+        axisPointer: {
+          link: {
+            xAxisIndex: "all",
+          },
+        },
+        title: {
+          x: 'center',
+          textStyle: {
+            color: '#ffffff',
+          },
+        },
+        tooltip: {
+          show: true,
+          trigger: 'axis',
+          axisPointer: {
+            type: 'line',
+            lineStyle: {
+              color: '#ffffff',
+              type: 'dashed',
+            },
+          },
+          /*axisPointer: {
+              type: 'cross',
+              lineStyle: {
+                  color: '#ffffff',
+                  type: 'dashed',
+              },
+              crossStyle: {
+                  color: '#ffffff',
+              }
+          },*/
+        },
+        //边距
+        grid: [
+          {// 上
+            left: 30,
+            right: 20,
+            top: '60px',
+            containLabel: true,
+            bottom: '50%',
+          },
+          { // 下
+            left: 30,
+            containLabel: true,
+            right: 20,
+            top: '51%',
+          },
+        ],
+        //图例
+        legend: {
+          textStyle: {
+            color: '#fff',
+            textAlign: 'center'
+          },
+          //itemGap:80,
+          //itemWidth: 0
+        },
+        xAxis: [
+          {//
+            gridIndex: 0,
+            show: true,
+            type: 'category',
+            boundaryGap: true, // 居中
+            axisLine: { //x轴线
+              show: true,
+              lineStyle: {
+                color: '#ffffff',
+              }
+            },
+            axisTick: { // 刻度
+              show: true,
+            },
+            axisLabel: { // X轴数据
+              show: true,
+              textStyle: {
+                interval: 0,
+                color: '#ffffff',
+                fontSize: 14
+              }
+            },
+            data: [],
+          },
+          {//
+            gridIndex: 1,
+            show: true,
+            type: 'category',
+            position: 'top',
+            boundaryGap: true, // 居中
+            axisLine: { // x轴线
+              show: true,
+              lineStyle: {
+                color: '#ffffff',
+              }
+            },
+            axisTick: { // 刻度
+              show: true,
+            },
+            axisLabel: {
+              show: false,
+              interval: 0,
+            },
+            data: [],
+          },
+        ],
+        yAxis: [
+          {
+            gridIndex: 0,
+            show: true,
+            scale: true, // 是否不从0开始,false从0开始
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: '#ffffff',
+                fontSize: 14,
+              },
+            },
+            axisLine: { // 轴线
+              show: true,
+              lineStyle: {
+                color: '#ffffff',
+              },
+            },
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: '#ffffff',
+              },
+            },
+            axisPointer: {
+              snap: true
+            },
+          },
+          {
+            gridIndex: 1,
+            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',
+              },
+            },
+            axisPointer: {
+              snap: true
+            },
+          },
+        ],
+        series: [
+          {
+            name: '',
+            type: 'line',
+            xAxisIndex: 0,
+            yAxisIndex: 0,
+            showSymbol: true,// 标记点
+            symbol: 'circle',
+            symbolSize: 5,
+            smooth: true, // 曲线，折线
+            itemStyle: {
+              color: '#36c5e7',
+            },
+            lineStyle: {
+              color: '#36c5e7',
+              width: 2,
+            },
+            label: { // 数值
+              position: 'top',
+              distance: 10,
+              show: true,
+              color: '#36c5e7',
+              fontSize: 14,
+            },
+            data: [],
+          },
+          {
+            name: '',
+            type: 'line',
+            xAxisIndex: 1,
+            yAxisIndex: 1,
+            showSymbol: true,// 标记点
+            symbol: 'circle',
+            symbolSize: 5,
+            smooth: true, // 曲线，折线
+            itemStyle: {
+              color: '#e68b55',
+            },
+            lineStyle: {
+              color: '#e68b55',
+              width: 2,
+            },
+            label: {// 数值
+              position: 'bottom',
+              distance: 10,
+              show: true,
+              color: '#e68b55',
+              fontSize: 16,
+            },
+            data: [],
+          },
+        ]
+      },
+      optionsStyle: {},
+      optionsData: {},
+      optionsSetup: {},
+      flagInter: null
+    };
+  },
+  computed: {
+    styleObj() {
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        width: this.optionsStyle.width + "px",
+        height: this.optionsStyle.height + "px",
+        left: this.optionsStyle.left + "px",
+        top: this.optionsStyle.top + "px",
+        background: this.optionsSetup.background
+      };
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.optionsStyle = val.position;
+        this.optionsData = val.data;
+        this.optionsCollapse = val.setup;
+        this.optionsSetup = val.setup;
+        this.editorOptions();
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.optionsStyle = this.value.position;
+    this.optionsData = this.value.data;
+    this.optionsCollapse = this.value.setup;
+    this.optionsSetup = this.value.setup;
+    this.editorOptions();
+  },
+  methods: {
+    // 修改图标options属性
+    editorOptions() {
+      this.setOptionsTitle();
+      this.setOptionsX();
+      this.setOptionsYTop();
+      this.setOptionsYBottom();
+      this.setOptionsTop();
+      this.setOptionsTooltip();
+      this.setOptionsGrid();
+      this.setOptionsLegend();
+      this.setOptionsColor();
+      this.setOptionsData();
+    },
+    // 标题修改
+    setOptionsTitle() {
+      const optionsCollapse = this.optionsSetup;
+      const title = {};
+      title.text = optionsCollapse.titleText;
+      title.show = optionsCollapse.isNoTitle;
+      title.left = optionsCollapse.textAlign;
+      title.textStyle = {
+        color: optionsCollapse.textColor,
+        fontSize: optionsCollapse.textFontSize,
+        fontWeight: optionsCollapse.textFontWeight
+      };
+      this.options.title = title;
+    },
+    // X轴设置
+    setOptionsX() {
+      const optionsSetup = this.optionsSetup;
+      const xAxis0 = {
+        gridIndex: 0,
+        show: optionsSetup.isShowX,
+        name: optionsSetup.xName, // 坐标轴名称
+        nameTextStyle: {
+          color: optionsSetup.nameColorX,
+          fontSize: optionsSetup.nameFontSizeX
+        },
+        type: 'category',
+        boundaryGap: optionsSetup.boundaryX, // 值居中
+        axisLine: { //x轴线
+          show: optionsSetup.lineX,
+          lineStyle: {
+            color: optionsSetup.lineColorX,
+          }
+        },
+        axisTick: { // 刻度
+          show: optionsSetup.tickLineX,
+        },
+        axisLabel: { // X轴数据
+          show: true,
+          interval: optionsSetup.splitNumberX,
+          textStyle: {
+            color: optionsSetup.colorX,
+            fontSize: optionsSetup.fontSizeX
+          }
+        },
+      }
+      const xAxis1 = {
+        gridIndex: 1,
+        show: optionsSetup.isShowX,
+        type: 'category',
+        position: 'top',
+        boundaryGap: optionsSetup.boundaryX, // 值居中
+        axisLine: { // x轴线
+          show: optionsSetup.lineX,
+          lineStyle: {
+            color: optionsSetup.lineColorX,
+          }
+        },
+        axisTick: { // 刻度
+          show: optionsSetup.tickLineX,
+        },
+        axisLabel: {
+          show: false,
+          interval: optionsSetup.splitNumberX,
+        },
+      }
+      this.options.xAxis[0] = xAxis0;
+      this.options.xAxis[1] = xAxis1;
+    },
+    // 上y轴设置
+    setOptionsYTop() {
+      const optionsSetup = this.optionsSetup;
+      const yAxis = {
+        gridIndex: 0,
+        splitNumber: optionsSetup.splitNumberYTop,
+        show: optionsSetup.isShowYTop,
+        scale: optionsSetup.scaleYTop, // 缩放
+        name: optionsSetup.textNameYTop, // 坐标轴名称
+        nameTextStyle: {
+          color: optionsSetup.nameColorYTop,
+          fontSize: optionsSetup.namefontSizeYTop
+        },
+        axisLabel: {
+          show: true,
+          textStyle: {
+            color: optionsSetup.colorYTop,
+            fontSize: optionsSetup.fontSizeYTop,
+          },
+        },
+        axisTick: { // 刻度
+          show: optionsSetup.tickLineYTop,
+        },
+        axisLine: { // 轴线
+          show: optionsSetup.lineYTop,
+          lineStyle: {
+            color: optionsSetup.lineColorYTop,
+          },
+        },
+        splitLine: {
+          show: optionsSetup.splitLineYTop,
+          lineStyle: {
+            width: optionsSetup.splitLinefontSizeYTop,
+            color: optionsSetup.splitLineColorYTop,
+          },
+        },
+        axisPointer: {
+          snap: true
+        },
+      }
+      this.options.yAxis[0] = yAxis
+    },
+    // 下Y轴设置
+    setOptionsYBottom() {
+      const optionsSetup = this.optionsSetup;
+      const yAxis = {
+        gridIndex: 1,
+        splitNumber: optionsSetup.splitNumberYBottom,
+        show: optionsSetup.isShowYBottom,
+        scale: optionsSetup.scaleYBottom, // 缩放
+        name: optionsSetup.textNameYBottom, // 坐标轴名称
+        nameTextStyle: {
+          color: optionsSetup.nameColorYBottom,
+          fontSize: optionsSetup.namefontSizeYBottom
+        },
+        inverse: true, // 翻转
+        axisLabel: {
+          show: true,
+          textStyle: {
+            color: optionsSetup.colorYBottom,
+            fontSize: optionsSetup.fontSizeYBottom,
+          },
+        },
+        axisTick: { // 刻度
+          show: optionsSetup.tickLineYBottom,
+        },
+        axisLine: { // 轴线
+          show: optionsSetup.lineYBottom,
+          lineStyle: {
+            color: optionsSetup.lineColorYBottom,
+          },
+        },
+        splitLine: {
+          show: optionsSetup.splitLineYBottom,
+          lineStyle: {
+            width: optionsSetup.splitLinefontSizeYBottom,
+            color: optionsSetup.splitLineColorYBottom,
+          },
+        },
+        axisPointer: {
+          snap: true
+        },
+      }
+      this.options.yAxis[1] = yAxis
+    },
+    // 数值设定 折线设置
+    setOptionsTop() {
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series
+      // 折线
+      for (const key in series) {
+        series[key].showSymbol = optionsSetup.markPoint
+        series[key].symbolSize = optionsSetup.pointSize
+        series[key].smooth = optionsSetup.smoothCurve
+        if (optionsSetup.area) {
+          series[key].areaStyle = {
+            opacity: optionsSetup.areaThickness / 100
+          }
+        } else {
+          series[key].areaStyle = {
+            opacity: 0
+          }
+        }
+      }
+      // 数值
+      if (series[0].type == 'line') {
+        series[0].label = {
+          position: 'top',
+          distance: 10,
+          show: optionsSetup.isShow,
+          color: optionsSetup.subTextColor,
+          fontSize: optionsSetup.fontSize,
+          fontWeight: optionsSetup.fontWeight
+        }
+        series[1].label = {
+          position: 'bottom',
+          distance: 10,
+          show: optionsSetup.isShow,
+          color: optionsSetup.subTextColor,
+          fontSize: optionsSetup.fontSize,
+          fontWeight: optionsSetup.fontWeight
+        }
+      }
+    },
+    // tooltip 提示语设置
+    setOptionsTooltip() {
+      const optionsSetup = this.optionsSetup;
+      let tooltip = {}
+      if (optionsSetup.tipType == "line") {
+        tooltip = {
+          show: optionsSetup.tipShow,
+          trigger: 'axis',
+          axisPointer: {
+            type: optionsSetup.tipType,
+            lineStyle: {
+              color: optionsSetup.tipColor,
+              type: 'dashed',
+            },
+          },
+        }
+      } else {
+        tooltip = {
+          show: optionsSetup.tipShow,
+          trigger: 'axis',
+          axisPointer: {
+            type: optionsSetup.tipType,
+            lineStyle: {
+              color: optionsSetup.tipColor,
+              type: 'dashed',
+            },
+            crossStyle: {
+              color: optionsSetup.tipColor,
+            }
+          },
+        }
+      }
+      this.options.tooltip = tooltip;
+    },
+    // 边距设置
+    setOptionsGrid() {
+      const optionsSetup = this.optionsSetup;
+      const grid = [
+        {// 上
+          left: optionsSetup.marginLeft,
+          right: optionsSetup.marginRight,
+          top: optionsSetup.marginTop,
+          containLabel: true,
+          bottom: '50%',
+        },
+        { // 下
+          left: optionsSetup.marginLeft,
+          right: optionsSetup.marginRight,
+          containLabel: true,
+          top: '51%',
+          bottom: optionsSetup.marginBottom,
+        },
+      ]
+      this.options.grid = grid;
+    },
+    // 图例操作
+    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.lengedColor,
+        fontSize: optionsSetup.lengedFontSize
+      };
+      legend.itemWidth = optionsSetup.lengedWidth;
+    },
+    // 图例名称设置
+    setOptionsLegendName(name){
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series;
+      const legendName = optionsSetup.legendName;
+      // 图例没有手动写则显示原值，写了则显示新值
+      if (null == legendName || legendName == '') {
+        for (let i = 0; i < name.length; i++) {
+          series[i].name = name[i];
+        }
+        this.options.legend['data'] = name;
+      }else {
+        const arr = legendName.split('|');
+        for (let i = 0; i < arr.length; i++) {
+          series[i].name = arr[i];
+        }
+        this.options.legend['data'] = arr
+      }
+    },
+    // 颜色修改、宽度修改
+    setOptionsColor() {
+      const optionsSetup = this.optionsSetup;
+      const customColor = optionsSetup.customColor;
+      const series = this.options.series
+      const arrColor = [];
+      for (let i = 0; i < customColor.length; i++) {
+        arrColor.push(customColor[i].color);
+      }
+      if (!customColor) return;
+      for (const key in series) {
+        const itemStyle = {
+          color: arrColor[key],
+        }
+        const lineStyle = {
+          color: arrColor[key],
+          width: optionsSetup.lineWidth,
+        }
+        this.options.series[key].itemStyle = itemStyle
+        this.options.series[key].lineStyle = lineStyle
+      }
+    },
+    // 数据解析
+    setOptionsData() {
+      const optionsSetup = this.optionsSetup;
+      const optionsData = this.optionsData; // 数据类型 静态 or 动态
+      optionsData.dataType == "staticData"
+        ? this.staticDataFn(optionsData.staticData, optionsSetup)
+        : this.dynamicDataFn(
+        optionsData.dynamicData,
+        optionsData.refreshTime,
+        optionsSetup
+        );
+    },
+    //去重
+    setUnique(arr) {
+      let newArr = [];
+      arr.forEach(item => {
+        return newArr.includes(item) ? '' : newArr.push(item);
+      });
+      return newArr;
+    },
+    //静态数据
+    staticDataFn(val) {
+      //数据
+      let xAxisList = [];
+      let yAxisList = [];
+      let arrayList = [];
+      const legendName = [];
+      for (const i in val) {
+        xAxisList[i] = val[i].axis;
+        yAxisList[i] = val[i].name;
+      }
+      xAxisList = this.setUnique(xAxisList);
+      yAxisList = this.setUnique(yAxisList);
+      for (const i in yAxisList) {
+        const data = new Array(xAxisList.length).fill(0);
+        for (const j in xAxisList) {
+          for (const k in val) {
+            if (val[k].name == yAxisList[i]) {
+              if (val[k].axis == xAxisList[j]) {
+                data[j] = val[k].data;
+              }
+            }
+          }
+        }
+        arrayList.push({
+          name: yAxisList[i],
+          data: data
+        })
+        legendName.push(yAxisList[i]);
+      }
+      this.options.series[0]['name'] = arrayList[0].name;
+      this.options.series[0]['data'] = arrayList[0].data;
+      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;
+      this.options.legend['data'] = legendName;
+      this.setOptionsLegendName(legendName);
+    },
+    // 动态数据
+    dynamicDataFn(val, refreshTime, optionsSetup) {
+      if (!val) return;
+      if (this.ispreview) {
+        this.getEchartData(val, optionsSetup);
+        this.flagInter = setInterval(() => {
+          this.getEchartData(val, optionsSetup);
+        }, refreshTime);
+      } else {
+        this.getEchartData(val, optionsSetup);
+      }
+    },
+    getEchartData(val, optionsSetup) {
+      const data = this.queryEchartsData(val);
+      data.then(res => {
+        this.renderingFn(optionsSetup, res);
+      });
+    },
+    renderingFn(optionsSetup, val) {
+      const legendName = [];
+      this.options.xAxis[0]['data'] = val.xAxis;
+      this.options.xAxis[1]['data'] = val.xAxis;
+      if (val.series[0].type == "line") {
+        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;
+        this.options.series[1]['data'] = val.series[1].data;
+        legendName.push(val.series[0].name);
+        legendName.push(val.series[1].name);
+      }
+      this.options.legend['data'] = legendName;
+      this.setOptionsLegendName(legendName);
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.echarts {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+</style>

report-ui/src/views/screenDesigner/widget/lineCharts/widgetLineStackChart.vue

@@ -0,0 +1,480 @@
+<template>
+  <div :style="styleObj">
+    <v-chart :options="options" autoresize/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "WidgetBarStackchart",
+  components: {},
+  props: {
+    value: Object,
+    ispreview: Boolean
+  },
+  data() {
+    return {
+      options: {
+        grid: {},
+        legend: {
+          textStyle: {
+            color: "#fff"
+          }
+        },
+        xAxis: {
+          type: "category",
+          data: [],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff"
+            }
+          }
+        },
+        yAxis: {
+          type: "value",
+          data: [],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff"
+            }
+          }
+        },
+        series: [
+          {
+            data: [],
+            name: '',
+            type: "line",
+            barGap: "0%",
+            itemStyle: {
+              barBorderRadius: null
+            }
+          }
+        ]
+      },
+      optionsStyle: {}, // 样式
+      optionsData: {}, // 数据
+      optionsSetup: {},
+      flagInter: null
+    };
+  },
+  computed: {
+    styleObj() {
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        width: this.optionsStyle.width + "px",
+        height: this.optionsStyle.height + "px",
+        left: this.optionsStyle.left + "px",
+        top: this.optionsStyle.top + "px",
+        background: this.optionsSetup.background
+      };
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.optionsStyle = val.position;
+        this.optionsData = val.data;
+        this.optionsCollapse = val.setup;
+        this.optionsSetup = val.setup;
+        this.editorOptions();
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.optionsStyle = this.value.position;
+    this.optionsData = this.value.data;
+    this.optionsCollapse = this.value.setup;
+    this.optionsSetup = this.value.setup;
+    this.editorOptions();
+  },
+  methods: {
+    // 修改图标options属性
+    editorOptions() {
+      this.setOptionsTitle();
+      this.setOptionsX();
+      this.setOptionsY();
+      this.setOptionsTooltip();
+      this.setOptionsMargin();
+      this.setOptionsLegend();
+      this.setOptionsData();
+    },
+    // 标题修改
+    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
+      };
+      title.subtext = optionsSetup.subText;
+      title.subtextStyle = {
+        color: optionsSetup.subTextColor,
+        fontWeight: optionsSetup.subTextFontWeight,
+        fontSize: optionsSetup.subTextFontSize
+      };
+      this.options.title = title;
+    },
+    // X轴设置
+    setOptionsX() {
+      const optionsSetup = this.optionsSetup;
+      const xAxis = {
+        type: "category",
+        // 坐标轴是否显示
+        show: optionsSetup.hideX,
+        // 坐标轴名称
+        name: optionsSetup.xName,
+        nameTextStyle: {
+          color: optionsSetup.xNameColor,
+          fontSize: optionsSetup.xNameFontSize
+        },
+        // 轴反转
+        inverse: optionsSetup.reversalX,
+        axisLabel: {
+          show: true,
+          // 文字间隔
+          interval: optionsSetup.textInterval,
+          // 文字角度
+          rotate: optionsSetup.textAngleX,
+          textStyle: {
+            // 坐标文字颜色
+            color: optionsSetup.Xcolor,
+            fontSize: optionsSetup.fontSizeX
+          }
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: optionsSetup.lineColorX
+          }
+        },
+        splitLine: {
+          show: optionsSetup.isShowSplitLineX,
+          lineStyle: {
+            color: optionsSetup.splitLineColorX
+          }
+        }
+      };
+      this.options.xAxis = xAxis;
+    },
+    // Y轴设置
+    setOptionsY() {
+      const optionsSetup = this.optionsSetup;
+      const yAxis = {
+        type: "value",
+        // 坐标轴是否显示
+        show: optionsSetup.isShowY,
+        // 坐标轴名称
+        name: optionsSetup.textNameY,
+        nameTextStyle: {
+          color: optionsSetup.NameColorY,
+          fontSize: optionsSetup.NameFontSizeY
+        },
+        // y轴反转
+        inverse: optionsSetup.reversalY,
+        axisLabel: {
+          show: true,
+          // 文字角度
+          rotate: optionsSetup.textAngleY,
+          textStyle: {
+            // y轴 坐标文字颜色
+            color: optionsSetup.colorY,
+            fontSize: optionsSetup.fontSizeY
+          }
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: optionsSetup.lineColorY
+          }
+        },
+        splitLine: {
+          show: optionsSetup.isShowSplitLineY,
+          lineStyle: {
+            color: optionsSetup.splitLineColorY
+          }
+        }
+      };
+      this.options.yAxis = yAxis;
+    },
+    // 获取面积
+    getOptionArea() {
+      const optionsSetup = this.optionsSetup;
+      let areaStyle = [];
+      if (optionsSetup.area) {
+        areaStyle = {
+          opacity: optionsSetup.areaThickness / 100
+        }
+      } else {
+        areaStyle = {
+          opacity: 0
+        }
+      }
+      return areaStyle
+    },
+    // tooltip 提示语设置，鼠标放置显示
+    setOptionsTooltip() {
+      const optionsSetup = this.optionsSetup;
+      const tooltip = {
+        trigger: "item",
+        show: true,
+        textStyle: {
+          color: optionsSetup.lineColor,
+          fontSize: optionsSetup.tipsFontSize
+        }
+      };
+      this.options.tooltip = tooltip;
+    },
+    // 边距设置
+    setOptionsMargin() {
+      const optionsSetup = this.optionsSetup;
+      const grid = {
+        left: optionsSetup.marginLeft,
+        right: optionsSetup.marginRight,
+        bottom: optionsSetup.marginBottom,
+        top: optionsSetup.marginTop,
+        containLabel: true
+      };
+      this.options.grid = grid;
+    },
+    // 图例操作 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.lengedColor,
+        fontSize: optionsSetup.lengedFontSize
+      };
+      legend.itemWidth = optionsSetup.lengedWidth;
+    },
+    // 图例名称设置
+    setOptionsLegendName(name){
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series;
+      const legendName = optionsSetup.legendName;
+      // 图例没有手动写则显示原值，写了则显示新值
+      if (null == legendName || legendName == '') {
+        for (let i = 0; i < name.length; i++) {
+          series[i].name = name[i];
+        }
+        this.options.legend['data'] = name;
+      }else {
+        const arr = legendName.split('|');
+        for (let i = 0; i < arr.length; i++) {
+          series[i].name = arr[i];
+        }
+        this.options.legend['data'] = arr
+      }
+    },
+    // 图例颜色修改
+    setOptionsColor() {
+      const optionsCollapse = this.optionsSetup;
+      const customColor = optionsCollapse.customColor;
+      if (!customColor) return;
+      const arrColor = [];
+      for (let i = 0; i < customColor.length; i++) {
+        arrColor.push(customColor[i].color);
+      }
+      this.options.color = arrColor;
+      this.options = Object.assign({}, this.options);
+    },
+    // 数据解析
+    setOptionsData() {
+      const optionsSetup = this.optionsSetup;
+      // 数据类型 静态 or 动态
+      const optionsData = this.optionsData;
+      optionsData.dataType == "staticData"
+        ? this.staticDataFn(optionsData.staticData, optionsSetup)
+        : this.dynamicDataFn(
+          optionsData.dynamicData,
+          optionsData.refreshTime,
+          optionsSetup
+        );
+    },
+    //去重
+    setUnique(arr) {
+      let newArr = [];
+      arr.forEach(item => {
+        return newArr.includes(item) ? '' : newArr.push(item);
+      });
+      return newArr;
+    },
+    //静态数据
+    staticDataFn(val) {
+      const optionsSetup = this.optionsSetup;
+      //颜色
+      const customColor = optionsSetup.customColor;
+      const arrColor = [];
+      for (let i = 0; i < customColor.length; i++) {
+        arrColor.push(customColor[i].color);
+      }
+      //数据
+      const series = [];
+      let xAxisList = [];
+      let yAxisList = [];
+      const legendName = [];
+      for (const i in val) {
+        xAxisList[i] = val[i].axis;
+        yAxisList[i] = val[i].name;
+      }
+      xAxisList = this.setUnique(xAxisList);
+      yAxisList = this.setUnique(yAxisList);
+      for (const i in yAxisList) {
+        const data = new Array(xAxisList.length).fill(0);
+        for (const j in xAxisList) {
+          for (const k in val) {
+            if (val[k].name == yAxisList[i]) {
+              if (val[k].axis == xAxisList[j]) {
+                data[j] = val[k].data;
+              }
+            }
+          }
+        }
+        series.push({
+          name: yAxisList[i],
+          type: "line",
+          data: data,
+          width: optionsSetup.lineWidth,
+          symbol: 'circle',
+          showSymbol: optionsSetup.markPoint,
+          symbolSize: optionsSetup.pointSize,
+          smooth: optionsSetup.smoothCurve,
+          // 线条
+          lineStyle: {
+            color: arrColor[i],
+            width: optionsSetup.lineWidth,
+          },
+          //点
+          itemStyle: {
+            color: arrColor[i],
+          },
+          areaStyle: this.getOptionArea(),
+          //标题部分
+          label: {
+            show: optionsSetup.isShow,
+            position: "top",
+            distance: 10,
+            fontSize: optionsSetup.fontSize,
+            color: optionsSetup.subTextColor,
+            fontWeight: optionsSetup.fontWeight,
+          },
+        })
+        legendName.push(yAxisList[i]);
+      }
+      this.options.series = series;
+      if (optionsSetup.verticalShow) {
+        this.options.xAxis.data = [];
+        this.options.yAxis.data = xAxisList;
+        this.options.xAxis.type = "value";
+        this.options.yAxis.type = "category";
+      } else {
+        this.options.xAxis.data = xAxisList;
+        this.options.yAxis.data = [];
+        this.options.xAxis.type = "category";
+        this.options.yAxis.type = "value";
+      }
+      this.options.legend['data'] = legendName;
+      this.setOptionsLegendName(legendName);
+    },
+    // 动态数据
+    dynamicDataFn(val, refreshTime, optionsSetup) {
+      if (!val) return;
+      if (this.ispreview) {
+        this.getEchartData(val, optionsSetup);
+        this.flagInter = setInterval(() => {
+          this.getEchartData(val, optionsSetup);
+        }, refreshTime);
+      } else {
+        this.getEchartData(val, optionsSetup);
+      }
+    },
+    getEchartData(val, optionsSetup) {
+      const data = this.queryEchartsData(val);
+      data.then(res => {
+        this.renderingFn(optionsSetup, res);
+      });
+    },
+    renderingFn(optionsSetup, val) {
+      //颜色
+      const customColor = optionsSetup.customColor;
+      const arrColor = [];
+      for (let i = 0; i < customColor.length; i++) {
+        arrColor.push(customColor[i].color);
+      }
+      // x轴
+      if (optionsSetup.verticalShow) {
+        this.options.xAxis.data = [];
+        this.options.yAxis.data = val.xAxis;
+        this.options.xAxis.type = "value";
+        this.options.yAxis.type = "category";
+      } else {
+        this.options.xAxis.data = val.xAxis;
+        this.options.yAxis.data = [];
+        this.options.xAxis.type = "category";
+        this.options.yAxis.type = "value";
+      }
+      const series = [];
+      const legendName = [];
+      for (const i in val.series) {
+        if (val.series[i].type == "line") {
+          series.push({
+            name: val.series[i].name,
+            type: "line",
+            data: val.series[i].data,
+            width: optionsSetup.lineWidth,
+            symbol: 'circle',
+            showSymbol: optionsSetup.markPoint,
+            symbolSize: optionsSetup.pointSize,
+            symbolColor: arrColor[i],
+            smooth: optionsSetup.smoothCurve,
+            // 线条
+            lineStyle: {
+              color: arrColor[i],
+              width: optionsSetup.lineWidth,
+            },
+            //点
+            itemStyle: {
+              color: arrColor[i],
+            },
+            areaStyle: this.getOptionArea(),
+            // 标题部分
+            label: {
+              show: optionsSetup.isShow,
+              position: "top",
+              distance: 10,
+              fontSize: optionsSetup.fontSize,
+              color: optionsSetup.subTextColor,
+              fontWeight: optionsSetup.fontWeight,
+            },
+          })
+        }
+        legendName.push(val.series[i].name);
+      }
+      this.options.series = series;
+      this.options.legend['data'] = legendName;
+      this.setOptionsLegendName(legendName);
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.echarts {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+</style>

report-ui/src/views/screenDesigner/widget/lineCharts/widgetLinechart.vue

@@ -0,0 +1,337 @@
+<template>
+  <div :style="styleObj">
+    <v-chart :options="options" autoresize/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "WidgetLinechart",
+  components: {},
+  props: {
+    value: Object,
+    ispreview: Boolean
+  },
+  data() {
+    return {
+      options: {
+        grid: {},
+        color: [],
+        title: {
+          text: "",
+          textStyle: {
+            color: "#fff"
+          }
+        },
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c}%"
+        },
+        legend: {
+          textStyle: {
+            color: "#fff"
+          }
+        },
+        xAxis: {
+          type: "category",
+          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff"
+            }
+          }
+        },
+        yAxis: {
+          type: "value",
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff"
+            }
+          }
+        },
+        series: [
+          {
+            data: [],
+            type: "line"
+          }
+        ]
+      },
+      optionsStyle: {}, // 样式
+      optionsData: {}, // 数据
+      optionsCollapse: {}, // 图标属性
+      optionsSetup: {}
+    };
+  },
+  computed: {
+    styleObj() {
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        width: this.optionsStyle.width + "px",
+        height: this.optionsStyle.height + "px",
+        left: this.optionsStyle.left + "px",
+        top: this.optionsStyle.top + "px",
+        background: this.optionsSetup.background
+      };
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.optionsStyle = val.position;
+        this.optionsData = val.data;
+        this.optionsCollapse = val.collapse;
+        this.optionsSetup = val.setup;
+        this.editorOptions();
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.optionsStyle = this.value.position;
+    this.optionsData = this.value.data;
+    this.optionsCollapse = this.value.collapse;
+    this.optionsSetup = this.value.setup;
+    this.editorOptions();
+  },
+  methods: {
+    // 修改图标options属性
+    editorOptions() {
+      this.setOptionsTitle();
+      this.setOptionsX();
+      this.setOptionsY();
+      this.setOptionsTop();
+      this.setOptionsTooltip();
+      this.setOptionsData();
+      this.setOptionsMargin();
+      this.setOptionsColor();
+    },
+    // 标题修改
+    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
+      };
+      title.subtext = optionsSetup.subText;
+      title.subtextStyle = {
+        color: optionsSetup.subTextColor,
+        fontWeight: optionsSetup.subTextFontWeight,
+        fontSize: optionsSetup.subTextFontSize
+      };
+      this.options.title = title;
+    },
+    // X轴设置
+    setOptionsX() {
+      const optionsSetup = this.optionsSetup;
+      const xAxis = {
+        type: "category",
+        show: optionsSetup.hideX, // 坐标轴是否显示
+        name: optionsSetup.xName, // 坐标轴名称
+        nameTextStyle: {
+          color: optionsSetup.nameColorX,
+          fontSize: optionsSetup.nameFontSizeX
+        },
+        nameRotate: optionsSetup.textAngle, // 文字角度
+        inverse: optionsSetup.reversalX, // 轴反转
+        axisLabel: {
+          show: true,
+          interval: optionsSetup.textInterval, // 文字间隔
+          rotate: optionsSetup.textAngle, // 文字角度
+          textStyle: {
+            color: optionsSetup.Xcolor, // x轴 坐标文字颜色
+            fontSize: optionsSetup.fontSizeX
+          }
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: optionsSetup.lineColorX
+          }
+        },
+        splitLine: {
+          show: optionsSetup.isShowSplitLineX,
+          lineStyle: {
+            color: optionsSetup.splitLineColorX
+          }
+        }
+      };
+      this.options.xAxis = xAxis;
+    },
+    // Y轴设置
+    setOptionsY() {
+      const optionsSetup = this.optionsSetup;
+      const yAxis = {
+        type: "value",
+        scale: optionsSetup.scale,
+        splitNumber: optionsSetup.splitNumber,// 均分
+        show: optionsSetup.isShowY, // 坐标轴是否显示
+        name: optionsSetup.textNameY, // 坐标轴名称
+        nameTextStyle: { // 别名
+          color: optionsSetup.nameColorY,
+          fontSize: optionsSetup.namefontSizeY
+        },
+        inverse: optionsSetup.reversalY, // 轴反转
+        axisLabel: {
+          show: true,
+          rotate: optionsSetup.ytextAngle, // 文字角度
+          textStyle: {
+            color: optionsSetup.colorY, // y轴 坐标文字颜色
+            fontSize: optionsSetup.fontSizeY
+          }
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: optionsSetup.lineColorY
+          }
+        },
+        splitLine: {
+          show: optionsSetup.isShowSplitLineY,
+          lineStyle: {
+            color: optionsSetup.splitLineColorY
+          }
+        }
+      };
+      this.options.yAxis = yAxis;
+    },
+    // 折线设置
+    setOptionsTop() {
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series;
+      for (const key in series) {
+        if (series[key].type == "line") {
+          series[key].showSymbol = optionsSetup.markPoint;
+          series[key].symbolSize = optionsSetup.pointSize;
+          series[key].smooth = optionsSetup.smoothCurve;
+          if (optionsSetup.area) {
+            series[key].areaStyle = {
+              opacity: optionsSetup.areaThickness / 100
+            };
+          } else {
+            series[key].areaStyle = {
+              opacity: 0
+            };
+          }
+
+          series[key].lineStyle = {
+            width: optionsSetup.lineWidth
+          };
+          series[key].label = {
+            show: optionsSetup.isShow,
+            position: "top",
+            distance: 10,
+            fontSize: optionsSetup.fontSize,
+            color: optionsSetup.subTextColor,
+            fontWeight: optionsSetup.fontWeight
+          };
+        }
+      }
+      this.options.series = series;
+    },
+    // tooltip 设置
+    setOptionsTooltip() {
+      const optionsSetup = this.optionsSetup;
+      const tooltip = {
+        trigger: "item",
+        show: true,
+        textStyle: {
+          color: optionsSetup.lineColor,
+          fontSize: optionsSetup.tipsFontSize
+        }
+      };
+      this.options.tooltip = tooltip;
+    },
+    // 边距设置
+    setOptionsMargin() {
+      const optionsSetup = this.optionsSetup;
+      const grid = {
+        left: optionsSetup.marginLeft,
+        right: optionsSetup.marginRight,
+        bottom: optionsSetup.marginBottom,
+        top: optionsSetup.marginTop,
+        containLabel: true
+      };
+      this.options.grid = grid;
+    },
+    // 图例颜色修改
+    setOptionsColor() {
+      const optionsSetup = this.optionsSetup;
+      const customColor = optionsSetup.customColor;
+      if (!customColor) return;
+      const arrColor = [];
+      for (let i = 0; i < customColor.length; i++) {
+        arrColor.push(customColor[i].color);
+      }
+      this.options.color = arrColor;
+      this.options = Object.assign({}, this.options);
+    },
+    // 处理数据
+    setOptionsData() {
+      const optionsData = this.optionsData; // 数据类型 静态 or 动态
+      optionsData.dataType == "staticData"
+        ? this.staticDataFn(optionsData.staticData)
+        : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
+    },
+    staticDataFn(val) {
+      const series = this.options.series;
+      let axis = [];
+      let data = [];
+      for (const i in val) {
+        axis[i] = val[i].axis;
+        data[i] = val[i].data
+      }
+      // x轴
+      this.options.xAxis.data = axis;
+      // series
+      for (const i in series) {
+        if (series[i].type == "line") {
+          series[i].data = data;
+        }
+      }
+    },
+    dynamicDataFn(val, refreshTime) {
+      if (!val) return;
+      if (this.ispreview) {
+        this.getEchartData(val);
+        this.flagInter = setInterval(() => {
+          this.getEchartData(val);
+        }, refreshTime);
+      } else {
+        this.getEchartData(val);
+      }
+    },
+    getEchartData(val) {
+      const data = this.queryEchartsData(val);
+      data.then(res => {
+        this.renderingFn(res);
+      });
+    },
+    renderingFn(val) {
+      // x轴
+      this.options.xAxis.data = val.xAxis;
+      // series
+      const series = this.options.series;
+      for (const i in series) {
+        if (series[i].type == "line") {
+          series[i].data = val.series[i].data;
+        }
+      }
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.echarts {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>

report-ui/src/views/screenDesigner/widget/mapCharts/widgetAirBubbleMap.vue

@@ -0,0 +1,616 @@
+<template>
+  <div :style="styleObj">
+    <v-chart :options="options" autoresize />
+  </div>
+</template>
+<script>
+import echarts from "echarts";
+import "../../../../../node_modules/echarts/map/js/china.js";
+//https://www.makeapie.com/editor.html?c=x2yaz6dfRw
+//https://www.makeapie.com/editor.html?c=xMpGBbTEKU
+let geoCoordMap = {
+  台湾: [121.5135, 25.0308],
+  黑龙江: [127.9688, 45.368],
+  内蒙古: [110.3467, 41.4899],
+  吉林: [125.8154, 44.2584],
+  北京: [116.4551, 40.2539],
+  辽宁: [123.1238, 42.1216],
+  河北: [114.4995, 38.1006],
+  天津: [117.4219, 39.4189],
+  山西: [112.3352, 37.9413],
+  陕西: [109.1162, 34.2004],
+  甘肃: [103.5901, 36.3043],
+  宁夏: [106.3586, 38.1775],
+  青海: [101.4038, 36.8207],
+  新疆: [87.9236, 43.5883],
+  西藏: [91.11, 29.97],
+  四川: [103.9526, 30.7617],
+  重庆: [108.384366, 30.439702],
+  山东: [117.1582, 36.8701],
+  河南: [113.4668, 34.6234],
+  江苏: [118.8062, 31.9208],
+  安徽: [117.29, 32.0581],
+  湖北: [114.3896, 30.6628],
+  浙江: [119.5313, 29.8773],
+  福建: [119.4543, 25.9222],
+  江西: [116.0046, 28.6633],
+  湖南: [113.0823, 28.2568],
+  贵州: [106.6992, 26.7682],
+  云南: [102.9199, 25.4663],
+  广东: [113.12244, 23.009505],
+  广西: [108.479, 23.1152],
+  海南: [110.3893, 19.8516],
+  上海: [121.4648, 31.2891]
+};
+let data = [
+  {
+    name: "南海诸岛",
+    value: 1
+  },
+  {
+    name: "北京",
+    value: 524
+  },
+  {
+    name: "天津",
+    value: 14
+  },
+  {
+    name: "上海",
+    value: 150
+  },
+  {
+    name: "重庆",
+    value: 75
+  },
+  {
+    name: "河北",
+    value: 13
+  },
+  {
+    name: "河南",
+    value: 83
+  },
+  {
+    name: "云南",
+    value: 11
+  },
+  {
+    name: "辽宁",
+    value: 19
+  },
+  {
+    name: "黑龙江",
+    value: 15
+  },
+  {
+    name: "湖南",
+    value: 69
+  },
+  {
+    name: "安徽",
+    value: 260
+  },
+  {
+    name: "山东",
+    value: 39
+  },
+  {
+    name: "新疆",
+    value: 4
+  },
+  {
+    name: "江苏",
+    value: 31
+  },
+  {
+    name: "浙江",
+    value: 104
+  },
+  {
+    name: "江西",
+    value: 36
+  },
+  {
+    name: "湖北",
+    value: 1052
+  },
+  {
+    name: "广西",
+    value: 33
+  },
+  {
+    name: "甘肃",
+    value: 347
+  },
+  {
+    name: "山西",
+    value: 8
+  },
+  {
+    name: "内蒙古",
+    value: 157
+  },
+  {
+    name: "陕西",
+    value: 22
+  },
+  {
+    name: "吉林",
+    value: 4
+  },
+  {
+    name: "福建",
+    value: 36
+  },
+  {
+    name: "贵州",
+    value: 39
+  },
+  {
+    name: "广东",
+    value: 996
+  },
+  {
+    name: "青海",
+    value: 27
+  },
+  {
+    name: "西藏",
+    value: 31
+  },
+  {
+    name: "四川",
+    value: 46
+  },
+  {
+    name: "宁夏",
+    value: 16
+  },
+  {
+    name: "海南",
+    value: 22
+  },
+  {
+    name: "台湾",
+    value: 6
+  },
+  {
+    name: "香港",
+    value: 2
+  },
+  {
+    name: "澳门",
+    value: 9
+  }
+];
+let convertData = function(data) {
+  let res = [];
+  for (let i = 0; i < data.length; i++) {
+    let geoCoord = geoCoordMap[data[i].name];
+    if (geoCoord) {
+      res.push({
+        name: data[i].name,
+        value: geoCoord.concat(data[i].value)
+      });
+    }
+  }
+  return res;
+};
+let max = 6000,
+  min = 10;
+let maxSize4Pin = 100,
+  minSize4Pin = 20;
+
+export default {
+  name: "widgetAirBubbleMap",
+  props: {
+    value: Object,
+    ispreview: Boolean
+  },
+  data() {
+    return {
+      options: {
+        //backgroundColor: '#0F1C3C',
+        tooltip: {
+          show: true,
+          formatter: function(params) {
+            if (params.value.length > 1) {
+              return (
+                "&nbsp;&nbsp;" +
+                params.name +
+                "&nbsp;&nbsp;&nbsp;" +
+                params.value[2] +
+                "&nbsp;&nbsp;"
+              );
+            } else {
+              return (
+                "&nbsp;&nbsp;" +
+                params.name +
+                "&nbsp;&nbsp;&nbsp;" +
+                params.value +
+                "&nbsp;&nbsp;"
+              );
+            }
+          }
+        },
+        geo: {
+          map: "china",
+          show: true,
+          roam: false,
+          label: {
+            emphasis: {
+              show: false
+            }
+          },
+          layoutSize: "80%",
+          itemStyle: {
+            normal: {
+              borderColor: new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  {
+                    offset: 0,
+                    color: "#00F6FF"
+                  },
+                  {
+                    offset: 1,
+                    color: "#53D9FF"
+                  }
+                ],
+                false
+              ),
+              borderWidth: 3,
+              shadowColor: "rgba(10,76,139,1)",
+              shadowOffsetY: 0,
+              shadowBlur: 60
+            }
+          }
+        },
+        series: [
+          {
+            type: "map",
+            map: "china",
+            aspectScale: 0.75,
+            label: {
+              normal: {
+                //调整数值
+                position: "right",
+                show: true,
+                color: "#53D9FF",
+                fontSize: 20
+              },
+              emphasis: {
+                show: true
+              }
+            },
+            itemStyle: {
+              normal: {
+                //地图块颜色
+                areaColor: {
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "#073684" // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#061E3D" // 100% 处的颜色
+                    }
+                  ]
+                },
+                borderColor: "#215495",
+                borderWidth: 1
+              },
+              //鼠标放置颜色加深
+              emphasis: {
+                areaColor: {
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "#073684" // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#2B91B7" // 100% 处的颜色
+                    }
+                  ]
+                }
+              }
+            },
+            data: data
+          },
+          {
+            type: "effectScatter",
+            coordinateSystem: "geo",
+            rippleEffect: {
+              brushType: "stroke"
+            },
+            showEffectOn: "render",
+            itemStyle: {
+              normal: {
+                //气泡颜色
+                color: {
+                  type: "radial",
+                  x: 0.5,
+                  y: 0.5,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(5,80,151,0.2)"
+                    },
+                    {
+                      offset: 0.8,
+                      color: "rgba(5,80,151,0.8)"
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,108,255,0.7)"
+                    }
+                  ],
+                  global: false
+                }
+              }
+            },
+            label: {
+              normal: {
+                show: true,
+                color: "#fff",
+                fontWeight: "bold",
+                position: "inside",
+                formatter: function(para) {
+                  return "{cnNum|" + para.data.value[2] + "}";
+                },
+                rich: {
+                  cnNum: {
+                    fontSize: 13,
+                    color: "#D4EEFF"
+                  }
+                }
+              }
+            },
+            symbol: "circle",
+            symbolSize: function(val) {
+              if (val[2] == 0) {
+                return 0;
+              }
+              return (
+                ((maxSize4Pin - minSize4Pin) / (max - min)) * val[2] +
+                (maxSize4Pin -
+                  ((maxSize4Pin - minSize4Pin) / (max - min)) * max) *
+                  1.2
+              );
+            },
+            data: convertData(data),
+            zlevel: 1
+          }
+        ]
+      },
+      optionsStyle: {}, // 样式
+      optionsData: {}, // 数据
+      optionsCollapse: {}, // 图标属性
+      optionsSetup: {}
+    };
+  },
+  computed: {
+    styleObj() {
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        width: this.optionsStyle.width + "px",
+        height: this.optionsStyle.height + "px",
+        left: this.optionsStyle.left + "px",
+        top: this.optionsStyle.top + "px",
+        background: this.optionsSetup.background
+      };
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.optionsStyle = val.position;
+        this.optionsData = val.data;
+        this.optionsCollapse = val.setup;
+        this.optionsSetup = val.setup;
+        this.editorOptions();
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.optionsStyle = this.value.position;
+    this.optionsData = this.value.data;
+    this.optionsCollapse = this.value.setup;
+    this.optionsSetup = this.value.setup;
+    this.editorOptions();
+  },
+  methods: {
+    // 修改图标options属性
+    editorOptions() {
+      this.setOptionsTitle();
+      this.setOptionTextValue();
+      //this.setOptionDataValue();
+      this.setOptionsData();
+      this.setOptionAirSize();
+      this.setOptionMapBlocak();
+    },
+    // 标题设置
+    setOptionsTitle() {
+      const optionsCollapse = this.optionsSetup;
+      const title = {};
+      title.show = optionsCollapse.isNoTitle;
+      title.text = optionsCollapse.titleText;
+      title.left = optionsCollapse.textAlign;
+      title.textStyle = {
+        color: optionsCollapse.textColor,
+        fontSize: optionsCollapse.textFontSize,
+        fontWeight: optionsCollapse.textFontWeight
+      };
+      title.subtext = optionsCollapse.subText;
+      title.subtextStyle = {
+        color: optionsCollapse.subTextColor,
+        fontWeight: optionsCollapse.subTextFontWeight,
+        fontSize: optionsCollapse.subTextFontSize
+      };
+      this.options.title = title;
+    },
+    setOptionTextValue() {
+      const optionsSetup = this.optionsSetup;
+      const label = this.options.series[0]["label"];
+      const normal = {
+        position: "right",
+        show: true,
+        color: optionsSetup.fontTextColor,
+        fontSize: optionsSetup.fontTextSize,
+        fontWeight: optionsSetup.fontTextWeight
+      };
+      label["normal"] = normal;
+    },
+    setOptionMapBlocak() {
+      const optionsSetup = this.optionsSetup;
+      const itemStyle = this.options.series[0]["itemStyle"];
+      const normal = {
+        //地图块颜色
+        areaColor: {
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: optionsSetup.font0PreColor // 0% 处的颜色
+            },
+            {
+              offset: 1,
+              color: optionsSetup.font100PreColor // 100% 处的颜色
+            }
+          ]
+        },
+        borderColor: "#215495",
+        borderWidth: 1
+      };
+      //鼠标放置颜色加深
+      const emphasis = {
+        areaColor: {
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: "#073684" // 0% 处的颜色
+            },
+            {
+              offset: 1,
+              color: optionsSetup.fontHighlightColor // 100% 处的颜色
+            }
+          ]
+        }
+      };
+      itemStyle["normal"] = normal;
+      itemStyle["emphasis"] = emphasis;
+    },
+    setOptionAirSize() {
+      maxSize4Pin = this.optionsSetup.fontmaxSize4Pin;
+      minSize4Pin = this.optionsSetup.fontminSize4Pin;
+    },
+    //数据解析
+    setOptionsData() {
+      const optionsData = this.optionsData; // 数据类型 静态 or 动态
+      optionsData.dataType == "staticData"
+        ? this.staticDataFn(optionsData.staticData)
+        : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
+    },
+    staticDataFn(val) {
+      this.options.series[0]["data"] = val;
+      const optionsSetup = this.optionsSetup;
+      const label = this.options.series[1]["label"];
+      const normal = {
+        show: true,
+        color: "#fff",
+        fontWeight: "bold",
+        position: "inside",
+        formatter: function(para) {
+          return "{cnNum|" + para.data.value[2] + "}";
+        },
+        rich: {
+          cnNum: {
+            fontSize: optionsSetup.fontDataSize,
+            color: optionsSetup.fontDataColor,
+            fontWeight: optionsSetup.fontDataWeight
+          }
+        }
+      };
+      const data = convertData(val);
+      this.options.series[1]["data"] = data;
+      label["normal"] = normal;
+    },
+    dynamicDataFn(val, refreshTime) {
+      if (!val) return;
+      if (this.ispreview) {
+        this.getEchartData(val);
+        this.flagInter = setInterval(() => {
+          this.getEchartData(val);
+        }, refreshTime);
+      } else {
+        this.getEchartData(val);
+      }
+    },
+    getEchartData(val) {
+      const data = this.queryEchartsData(val);
+      data.then(res => {
+        this.renderingFn(res);
+      });
+    },
+    renderingFn(val) {
+      this.options.series[0]["data"] = val;
+      const optionsSetup = this.optionsSetup;
+      const label = this.options.series[1]["label"];
+      const normal = {
+        show: true,
+        color: "#fff",
+        fontWeight: "bold",
+        position: "inside",
+        formatter: function(para) {
+          return "{cnNum|" + para.data.value[2] + "}";
+        },
+        rich: {
+          cnNum: {
+            fontSize: optionsSetup.fontDataSize,
+            color: optionsSetup.fontDataColor,
+            fontWeight: optionsSetup.fontDataWeight
+          }
+        }
+      };
+      const data = convertData(val);
+      this.options.series[1]["data"] = data;
+      label["normal"] = normal;
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.echartMap {
+  width: 100%;
+  height: 100%;
+}
+
+.echarts {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>

report-ui/src/views/screenDesigner/widget/mapCharts/widgetMap.vue

@@ -0,0 +1,468 @@
+<template>
+  <div :style="styleObj">
+    <v-chart :options="options" autoresize />
+  </div>
+</template>
+<script>
+import "../../../../../node_modules/echarts/map/js/china.js";
+let GZData = [
+  [
+    {
+      name: "广州"
+    },
+    {
+      name: "福州",
+      value: 95
+    }
+  ],
+  [
+    {
+      name: "广州"
+    },
+    {
+      name: "太原",
+      value: 90
+    }
+  ],
+  [
+    {
+      name: "广州"
+    },
+    {
+      name: "长春",
+      value: 80
+    }
+  ],
+  [
+    {
+      name: "广州"
+    },
+    {
+      name: "重庆",
+      value: 70
+    }
+  ],
+  [
+    {
+      name: "广州"
+    },
+    {
+      name: "西安",
+      value: 60
+    }
+  ],
+  [
+    {
+      name: "广州"
+    },
+    {
+      name: "成都",
+      value: 50
+    }
+  ],
+  [
+    {
+      name: "广州"
+    },
+    {
+      name: "常州",
+      value: 40
+    }
+  ],
+  [
+    {
+      name: "广州"
+    },
+    {
+      name: "北京",
+      value: 30
+    }
+  ],
+  [
+    {
+      name: "广州"
+    },
+    {
+      name: "北海",
+      value: 20
+    }
+  ],
+  [
+    {
+      name: "广州"
+    },
+    {
+      name: "海口",
+      value: 10
+    }
+  ]
+];
+let geoCoordMap = {
+  上海: [121.4648, 31.2891],
+  东莞: [113.8953, 22.901],
+  东营: [118.7073, 37.5513],
+  中山: [113.4229, 22.478],
+  临汾: [111.4783, 36.1615],
+  临沂: [118.3118, 35.2936],
+  丹东: [124.541, 40.4242],
+  丽水: [119.5642, 28.1854],
+  乌鲁木齐: [87.9236, 43.5883],
+  佛山: [112.8955, 23.1097],
+  保定: [115.0488, 39.0948],
+  兰州: [103.5901, 36.3043],
+  包头: [110.3467, 41.4899],
+  北京: [116.4551, 40.2539],
+  北海: [109.314, 21.6211],
+  南京: [118.8062, 31.9208],
+  南宁: [108.479, 23.1152],
+  南昌: [116.0046, 28.6633],
+  南通: [121.1023, 32.1625],
+  厦门: [118.1689, 24.6478],
+  台州: [121.1353, 28.6688],
+  合肥: [117.29, 32.0581],
+  呼和浩特: [111.4124, 40.4901],
+  咸阳: [108.4131, 34.8706],
+  哈尔滨: [127.9688, 45.368],
+  唐山: [118.4766, 39.6826],
+  嘉兴: [120.9155, 30.6354],
+  大同: [113.7854, 39.8035],
+  大连: [122.2229, 39.4409],
+  天津: [117.4219, 39.4189],
+  太原: [112.3352, 37.9413],
+  威海: [121.9482, 37.1393],
+  宁波: [121.5967, 29.6466],
+  宝鸡: [107.1826, 34.3433],
+  宿迁: [118.5535, 33.7775],
+  常州: [119.4543, 31.5582],
+  广州: [113.5107, 23.2196],
+  廊坊: [116.521, 39.0509],
+  延安: [109.1052, 36.4252],
+  张家口: [115.1477, 40.8527],
+  徐州: [117.5208, 34.3268],
+  德州: [116.6858, 37.2107],
+  惠州: [114.6204, 23.1647],
+  成都: [103.9526, 30.7617],
+  扬州: [119.4653, 32.8162],
+  承德: [117.5757, 41.4075],
+  拉萨: [91.1865, 30.1465],
+  无锡: [120.3442, 31.5527],
+  日照: [119.2786, 35.5023],
+  昆明: [102.9199, 25.4663],
+  杭州: [119.5313, 29.8773],
+  枣庄: [117.323, 34.8926],
+  柳州: [109.3799, 24.9774],
+  株洲: [113.5327, 27.0319],
+  武汉: [114.3896, 30.6628],
+  汕头: [117.1692, 23.3405],
+  江门: [112.6318, 22.1484],
+  沈阳: [123.1238, 42.1216],
+  沧州: [116.8286, 38.2104],
+  河源: [114.917, 23.9722],
+  泉州: [118.3228, 25.1147],
+  泰安: [117.0264, 36.0516],
+  泰州: [120.0586, 32.5525],
+  济南: [117.1582, 36.8701],
+  济宁: [116.8286, 35.3375],
+  海口: [110.3893, 19.8516],
+  淄博: [118.0371, 36.6064],
+  淮安: [118.927, 33.4039],
+  深圳: [114.5435, 22.5439],
+  清远: [112.9175, 24.3292],
+  温州: [120.498, 27.8119],
+  渭南: [109.7864, 35.0299],
+  湖州: [119.8608, 30.7782],
+  湘潭: [112.5439, 27.7075],
+  滨州: [117.8174, 37.4963],
+  潍坊: [119.0918, 36.524],
+  烟台: [120.7397, 37.5128],
+  玉溪: [101.9312, 23.8898],
+  珠海: [113.7305, 22.1155],
+  盐城: [120.2234, 33.5577],
+  盘锦: [121.9482, 41.0449],
+  石家庄: [114.4995, 38.1006],
+  福州: [119.4543, 25.9222],
+  秦皇岛: [119.2126, 40.0232],
+  绍兴: [120.564, 29.7565],
+  聊城: [115.9167, 36.4032],
+  肇庆: [112.1265, 23.5822],
+  舟山: [122.2559, 30.2234],
+  苏州: [120.6519, 31.3989],
+  莱芜: [117.6526, 36.2714],
+  菏泽: [115.6201, 35.2057],
+  营口: [122.4316, 40.4297],
+  葫芦岛: [120.1575, 40.578],
+  衡水: [115.8838, 37.7161],
+  衢州: [118.6853, 28.8666],
+  西宁: [101.4038, 36.8207],
+  西安: [109.1162, 34.2004],
+  贵阳: [106.6992, 26.7682],
+  连云港: [119.1248, 34.552],
+  邢台: [114.8071, 37.2821],
+  邯郸: [114.4775, 36.535],
+  郑州: [113.4668, 34.6234],
+  鄂尔多斯: [108.9734, 39.2487],
+  重庆: [107.7539, 30.1904],
+  金华: [120.0037, 29.1028],
+  铜川: [109.0393, 35.1947],
+  银川: [106.3586, 38.1775],
+  镇江: [119.4763, 31.9702],
+  长春: [125.8154, 44.2584],
+  长沙: [113.0823, 28.2568],
+  长治: [112.8625, 36.4746],
+  阳泉: [113.4778, 38.0951],
+  青岛: [120.4651, 36.3373],
+  韶关: [113.7964, 24.7028]
+};
+let type = "流出";
+let color = ["#a6c84c", "#ffa022", "#46bee9"];
+let tempData = ["广州", GZData];
+let planePath =
+  "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
+export default {
+  name: "widgetMap",
+  props: {
+    value: Object,
+    ispreview: Boolean
+  },
+  data() {
+    return {
+      options: {
+        title: {
+          text: "模拟迁徙",
+          subtext: "数据纯属虚构",
+          left: "center",
+          textStyle: {
+            color: "#fff"
+          }
+        },
+        tooltip: {
+          trigger: "item",
+          formatter: function(params) {
+            console.log(params);
+            if (params.seriesType == "effectScatter") {
+              if ("流入" == type) {
+                return (
+                  type +
+                  "<br>" +
+                  params.data.name +
+                  " ---> " +
+                  params.seriesName +
+                  "<br />人数：" +
+                  params.data.value[2] +
+                  "人"
+                );
+              } else {
+                return (
+                  "流出<br>" +
+                  params.seriesName +
+                  " ---> " +
+                  params.data.name +
+                  "<br />人数：" +
+                  params.data.value[2] +
+                  "人"
+                );
+              }
+            } else if (params.seriesType == "lines") {
+              if ("流入" == type) {
+                return (
+                  type +
+                  "<br>" +
+                  params.data.toName +
+                  " ---> " +
+                  params.data.fromName +
+                  "<br />人数：" +
+                  params.data.value +
+                  "人"
+                );
+              } else {
+                return (
+                  type +
+                  "<br>" +
+                  params.data.fromName +
+                  " ---> " +
+                  params.data.toName +
+                  "<br />人数：" +
+                  params.data.value +
+                  "人"
+                );
+              }
+            } else {
+              return params.name;
+            }
+          }
+        },
+        legend: {
+          show: false,
+          orient: "vertical",
+          top: "bottom",
+          left: "right",
+          data: ["广州"],
+          textStyle: {
+            color: "#fff"
+          },
+          selectedMode: "single"
+        },
+        geo: {
+          map: "china",
+          label: {
+            emphasis: {
+              //show: false,
+              show: true,
+              color: "white"
+            }
+          },
+          roam: true,
+          itemStyle: {
+            normal: {
+              areaColor: "#323c48",
+              borderColor: "#404a59"
+            },
+            emphasis: {
+              areaColor: "#2a333d"
+            }
+          }
+        },
+        series: []
+      },
+      optionsSetup: {}
+    };
+  },
+  computed: {
+    styleObj() {
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        width: this.optionsStyle.width + "px",
+        height: this.optionsStyle.height + "px",
+        left: this.optionsStyle.left + "px",
+        top: this.optionsStyle.top + "px",
+        background: this.optionsSetup.background
+      };
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.optionsStyle = val.position;
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.optionsStyle = this.value.position;
+  },
+  mounted() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      const options = this.options;
+      options.series.push(
+        {
+          name: tempData[0],
+          type: "lines",
+          zlevel: 1,
+          effect: {
+            show: true,
+            period: 6,
+            trailLength: 0.7,
+            color: "#fff",
+            symbolSize: 3
+          },
+          lineStyle: {
+            normal: {
+              color: color[0],
+              width: 0,
+              curveness: 0.2
+            }
+          },
+          data: this.convertData(tempData[1])
+        },
+        {
+          name: tempData[0],
+          type: "lines",
+          zlevel: 2,
+          effect: {
+            show: true,
+            period: 6,
+            trailLength: 0,
+            symbol: planePath,
+            symbolSize: 15
+          },
+          lineStyle: {
+            normal: {
+              color: color[0],
+              width: 1,
+              opacity: 0.4,
+              curveness: 0.2
+            }
+          },
+          data: this.convertData(tempData[1])
+        },
+        {
+          name: tempData[0],
+          type: "effectScatter",
+          coordinateSystem: "geo",
+          zlevel: 2,
+          rippleEffect: {
+            brushType: "stroke"
+          },
+          label: {
+            normal: {
+              show: true,
+              position: "right",
+              formatter: "{b}"
+            }
+          },
+          symbolSize: function(val) {
+            return val[2] / 8;
+          },
+          itemStyle: {
+            normal: {
+              color: color[0]
+            }
+          },
+          data: tempData[1].map(function(dataItem) {
+            return {
+              name: dataItem[1].name,
+              value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
+            };
+          })
+        }
+      );
+      this.options = options;
+    },
+    convertData(data) {
+      let res = [];
+      for (let i = 0; i < data.length; i++) {
+        let dataItem = data[i];
+        let fromCoord = geoCoordMap[dataItem[0].name];
+        let toCoord = geoCoordMap[dataItem[1].name];
+        if ("流入" == type) {
+          fromCoord = geoCoordMap[dataItem[1].name];
+          toCoord = geoCoordMap[dataItem[0].name];
+        }
+        if (fromCoord && toCoord) {
+          res.push({
+            fromName: dataItem[0].name,
+            toName: dataItem[1].name,
+            coords: [fromCoord, toCoord],
+            value: dataItem[1].value
+          });
+        }
+      }
+      return res;
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.echartMap {
+  width: 100%;
+  height: 100%;
+}
+.echarts {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>

report-ui/src/views/screenDesigner/widget/percentCharts/widgetGauge.vue

@@ -0,0 +1,323 @@
+<template>
+  <div :style="styleObj">
+    <v-chart :options="options" autoresize/>
+  </div>
+</template>
+
+<script>
+import echarts from "echarts";
+
+export default {
+  name: "WidgetGauge",
+  components: {},
+  props: {
+    value: Object,
+    ispreview: Boolean
+  },
+  data() {
+    return {
+      options: {
+        series: [
+          {
+            type: 'gauge',
+            z: 100,
+            axisLine: {
+              lineStyle: {
+                width: 10,
+                color: [
+                  [
+                    0.3,
+                    new echarts.graphic.LinearGradient(0, 1, 1, 0, [
+                      {
+                        offset: 0,
+                        color: 'rgba(0, 237, 3,0.1)',
+                      },
+                      {
+                        offset: 0.5,
+                        color: 'rgba(0, 237, 3,0.6)',
+                      },
+                      {
+                        offset: 1,
+                        color: 'rgba(0, 237, 3,1)',
+                      },
+                    ]),
+                  ],
+                  [
+                    0.7,
+                    new echarts.graphic.LinearGradient(0, 1, 1, 0, [
+                      {
+                        offset: 0,
+                        color: 'rgba(255, 184, 0,0.1)',
+                      },
+                      {
+                        offset: 0.5,
+                        color: 'rgba(255, 184, 0,0.6)',
+                      },
+                      {
+                        offset: 1,
+                        color: 'rgba(255, 184, 0,1)',
+                      },
+                    ]),
+                  ],
+                  [
+                    1,
+                    new echarts.graphic.LinearGradient(0, 1, 1, 0, [
+                      {
+                        offset: 0,
+                        color: 'rgba(175, 36, 74,0.1)',
+                      },
+                      {
+                        offset: 0.5,
+                        color: 'rgba(255, 36, 74,0.6)',
+                      },
+                      {
+                        offset: 1,
+                        color: 'rgba(255, 36, 74,1)',
+                      },
+                    ]),
+                  ],
+                ],
+              },
+            },
+            pointer: {
+              itemStyle: {
+                color: 'auto',
+              },
+            },
+            axisTick: {
+              show: true,
+              distance: 0,
+              length: 10,
+              lineStyle: {
+                color: 'auto',
+                width: 2,
+              },
+            },
+            splitLine: {
+              show: true,
+              distance: 0,
+              length: 14,
+              lineStyle: {
+                color: 'auto',
+                width: 4,
+              },
+            },
+            axisLabel: {
+              show: true,
+              color: 'white',
+              distance: 2,
+              fontSize: 10,
+            },
+            detail: {
+              valueAnimation: true,
+              formatter: '{value} %',
+              color: 'white',
+              fontSize: 18,
+            },
+            data: [
+              {
+                value: 70,
+              },
+            ],
+          },
+        ],
+      },
+      optionsStyle: {}, // 样式
+      optionsData: {}, // 数据
+      optionsCollapse: {}, // 图标属性
+      optionsSetup: {}
+    };
+  },
+  computed: {
+    styleObj() {
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        width: this.optionsStyle.width + "px",
+        height: this.optionsStyle.height + "px",
+        left: this.optionsStyle.left + "px",
+        top: this.optionsStyle.top + "px",
+        background: this.optionsSetup.background
+      };
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.optionsStyle = val.position; // 位置
+        this.optionsData = val.data; // 数据
+        this.optionsCollapse = val.collapse; // 折叠数据
+        this.optionsSetup = val.setup; // 样式
+        this.editorOptions();
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.optionsStyle = this.value.position;
+    this.optionsData = this.value.data;
+    this.optionsCollapse = this.value.collapse;
+    this.optionsSetup = this.value.setup;
+    this.editorOptions();
+  },
+  methods: {
+    editorOptions() {
+      this.setOptions()
+      this.setOptionsData()
+    },
+    setOptions() {
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series;
+      if (series[0].type == 'gauge') {
+        const axisLine = {
+          show: optionsSetup.ringShow,
+          lineStyle: {
+            width: optionsSetup.pieWeight,
+            color: [
+              [
+                0.3,
+                new echarts.graphic.LinearGradient(0, 1, 1, 0, [
+                  {
+                    offset: 0,
+                    color: optionsSetup.color30p0,
+                  },
+                  {
+                    offset: 0.5,
+                    color: optionsSetup.color30p5,
+                  },
+                  {
+                    offset: 1,
+                    color: optionsSetup.color30p10,
+                  },
+                ]),
+              ],
+              [
+                0.7,
+                new echarts.graphic.LinearGradient(0, 1, 1, 0, [
+                  {
+                    offset: 0,
+                    color: optionsSetup.color70p0,
+                  },
+                  {
+                    offset: 0.5,
+                    color: optionsSetup.color70p5,
+                  },
+                  {
+                    offset: 1,
+                    color: optionsSetup.color70p10,
+                  },
+                ]),
+              ],
+              [
+                1,
+                new echarts.graphic.LinearGradient(0, 1, 1, 0, [
+                  {
+                    offset: 0,
+                    color: optionsSetup.color100p0,
+                  },
+                  {
+                    offset: 0.5,
+                    color: optionsSetup.color100p5,
+                  },
+                  {
+                    offset: 1,
+                    color: optionsSetup.color100p10,
+                  },
+                ]),
+              ],
+            ],
+          },
+        }
+        const axisTick = {
+          show: optionsSetup.tickShow,
+          distance: optionsSetup.tickDistance,
+          length: optionsSetup.tickLength,
+          lineStyle: {
+            color: 'auto',
+            width: optionsSetup.tickWidth,
+          },
+        }
+        const splitLine = {
+          show: optionsSetup.splitShow,
+          distance: optionsSetup.splitDistance,
+          length: optionsSetup.splitLength,
+          lineStyle: {
+            color: 'auto',
+            width: optionsSetup.splitWidth,
+          },
+        }
+        series[0].axisLine = axisLine
+        series[0].axisTick = axisTick
+        series[0].splitLine = splitLine
+      }
+    },
+    setOptionsData() {
+      const optionsData = this.optionsData; // 数据类型 静态 or 动态
+      optionsData.dataType == "staticData"
+        ? this.staticDataFn(optionsData.staticData)
+        : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
+    },
+    staticDataFn(val) {
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series;
+      const num = val[0]['num'];
+      const data = [
+        {
+          value: num
+        }
+      ]
+      const detail = {
+        valueAnimation: true,
+        formatter: '{value} %',
+        color: optionsSetup.labelColor,
+        fontSize: optionsSetup.labelFontSize,
+        fontWeight: optionsSetup.labelFontWeight,
+      }
+      series[0].data = data
+      series[0].detail = detail
+    },
+    dynamicDataFn(val, refreshTime) {
+      if (!val) return;
+      if (this.ispreview) {
+        this.getEchartData(val);
+        this.flagInter = setInterval(() => {
+          this.getEchartData(val);
+        }, refreshTime);
+      } else {
+        this.getEchartData(val);
+      }
+    },
+    getEchartData(val) {
+      const data = this.queryEchartsData(val);
+      data.then(res => {
+        this.renderingFn(res);
+      });
+    },
+    renderingFn(val) {
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series;
+      const data = [
+        {
+          value: val[0].value
+        }
+      ]
+      const detail = {
+        valueAnimation: true,
+        formatter: '{value} %',
+        color: optionsSetup.labelColor,
+        fontSize: optionsSetup.labelFontSize,
+        fontWeight: optionsSetup.labelFontWeight,
+      }
+      series[0].data = data
+      series[0].detail = detail
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.echarts {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>

report-ui/src/views/screenDesigner/widget/percentCharts/widgetPiePercentageChart.vue

@@ -0,0 +1,473 @@
+<template>
+  <div :style="styleObj">
+    <v-chart :options="options" autoresize />
+  </div>
+</template>
+
+<script>
+let per = 60;
+export default {
+  name: "widgetPiePercentageChart", //百分比图参考：https://www.makeapie.com/editor.html?c=xFkzKG-bpl
+  components: {},
+  props: {
+    value: Object,
+    ispreview: Boolean
+  },
+  data() {
+    return {
+      angle: 0,
+      options: {
+        title: {
+          text: "{nums|" + per + "}{percent|%}",
+          x: "center",
+          y: "center",
+          textStyle: {
+            rich: {
+              nums: {
+                fontSize: 60,
+                color: "#29EEF3"
+              },
+              percent: {
+                fontSize: 30,
+                color: "#29EEF3"
+              }
+            }
+          }
+        },
+        legend: {
+          type: "plain",
+          orient: "vertical",
+          right: 0,
+          top: "10%",
+          align: "auto",
+          data: [
+            {
+              name: "1",
+              icon: "circle"
+            },
+            {
+              name: "2",
+              icon: "circle"
+            },
+            {
+              name: "3",
+              icon: "circle"
+            },
+            {
+              name: "4",
+              icon: "circle"
+            }
+          ],
+          textStyle: {
+            color: "white",
+            fontSize: 16,
+            padding: [10, 1, 10, 0]
+          },
+          selectedMode: false
+        },
+        series: [
+          {
+            //name: '环1',
+            type: "custom",
+            coordinateSystem: "none",
+            renderItem: (params, api) => {
+              return {
+                type: "arc",
+                shape: {
+                  cx: api.getWidth() / 2,
+                  cy: api.getHeight() / 2,
+                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
+                  startAngle: ((0 + this.angle) * Math.PI) / 180,
+                  endAngle: ((90 + this.angle) * Math.PI) / 180
+                },
+                style: {
+                  stroke: "#0CD3DB",
+                  fill: "transparent",
+                  lineWidth: 1.5
+                },
+                silent: true
+              };
+            },
+            data: [0]
+          },
+          {
+            //name: '环2',
+            type: "custom",
+            coordinateSystem: "none",
+            renderItem: (params, api) => {
+              return {
+                type: "arc",
+                shape: {
+                  cx: api.getWidth() / 2,
+                  cy: api.getHeight() / 2,
+                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
+                  startAngle: ((180 + this.angle) * Math.PI) / 180,
+                  endAngle: ((270 + this.angle) * Math.PI) / 180
+                },
+                style: {
+                  stroke: "#0CD3DB",
+                  fill: "transparent",
+                  lineWidth: 1.5
+                },
+                silent: true
+              };
+            },
+            data: [0]
+          },
+          {
+            //name: '环3',
+            type: "custom",
+            coordinateSystem: "none",
+            renderItem: (params, api) => {
+              return {
+                type: "arc",
+                shape: {
+                  cx: api.getWidth() / 2,
+                  cy: api.getHeight() / 2,
+                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
+                  startAngle: ((270 + -this.angle) * Math.PI) / 180,
+                  endAngle: ((40 + -this.angle) * Math.PI) / 180
+                },
+                style: {
+                  stroke: "#0CD3DB",
+                  fill: "transparent",
+                  lineWidth: 1.5
+                },
+                silent: true
+              };
+            },
+            data: [0]
+          },
+          {
+            //name: '环4',
+            type: "custom",
+            coordinateSystem: "none",
+            renderItem: (params, api) => {
+              return {
+                type: "arc",
+                shape: {
+                  cx: api.getWidth() / 2,
+                  cy: api.getHeight() / 2,
+                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
+                  startAngle: ((90 + -this.angle) * Math.PI) / 180,
+                  endAngle: ((220 + -this.angle) * Math.PI) / 180
+                },
+                style: {
+                  stroke: "#0CD3DB",
+                  fill: "transparent",
+                  lineWidth: 1.5
+                },
+                silent: true
+              };
+            },
+            data: [0]
+          },
+          {
+            //name: '绿点1',
+            type: "custom",
+            coordinateSystem: "none",
+            renderItem: (params, api) => {
+              let x0 = api.getWidth() / 2;
+              let y0 = api.getHeight() / 2;
+              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65;
+              let point = this.getCirlPoint(x0, y0, r, 90 + -this.angle);
+              return {
+                type: "circle",
+                shape: {
+                  cx: point.x,
+                  cy: point.y,
+                  r: 4
+                },
+                style: {
+                  stroke: "#0CD3DB", //粉
+                  fill: "#0CD3DB"
+                },
+                silent: true
+              };
+            },
+            data: [0]
+          },
+          {
+            //name: '绿点2',
+            type: "custom",
+            coordinateSystem: "none",
+            renderItem: (params, api) => {
+              let x0 = api.getWidth() / 2;
+              let y0 = api.getHeight() / 2;
+              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65;
+              let point = this.getCirlPoint(x0, y0, r, 270 + -this.angle);
+              return {
+                type: "circle",
+                shape: {
+                  cx: point.x,
+                  cy: point.y,
+                  r: 4
+                },
+                style: {
+                  stroke: "#0CD3DB", //绿
+                  fill: "#0CD3DB"
+                },
+                silent: true
+              };
+            },
+            data: [0]
+          },
+          {
+            //name: '圆环',
+            type: "pie",
+            radius: ["58%", "45%"],
+            silent: true,
+            clockwise: true,
+            startAngle: 90,
+            z: 0,
+            zlevel: 0,
+            label: {
+              normal: {
+                position: "center"
+              }
+            },
+            data: [
+              {
+                value: per,
+                name: "",
+                itemStyle: {
+                  normal: {
+                    color: {
+                      // 完成的圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#4FADFD" // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#28E8FA" // 100% 处的颜色
+                        }
+                      ]
+                    }
+                  }
+                }
+              },
+              {
+                value: 100 - per,
+                name: "",
+                label: {
+                  normal: {
+                    show: false
+                  }
+                },
+                //剩余圆环颜色
+                itemStyle: {
+                  normal: {
+                    color: "#173164"
+                  }
+                }
+              }
+            ]
+          },
+          {
+            name: "percent",
+            type: "gauge",
+            radius: "58%",
+            center: ["50%", "50%"],
+            startAngle: 0,
+            endAngle: 359.9,
+            splitNumber: 8,
+            hoverAnimation: true,
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              length: 15,
+              lineStyle: {
+                width: 5,
+                color: "#061740"
+              }
+            },
+            axisLabel: {
+              show: false
+            },
+            pointer: {
+              show: false
+            },
+            axisLine: {
+              lineStyle: {
+                opacity: 0
+              }
+            },
+            detail: {
+              show: false
+            },
+            data: [
+              {
+                value: 0,
+                name: ""
+              }
+            ]
+          }
+        ]
+      },
+      optionsStyle: {}, // 样式
+      optionsData: {}, // 数据
+      optionsCollapse: {}, // 图标属性
+      optionsSetup: {}
+    };
+  },
+  computed: {
+    styleObj() {
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        width: this.optionsStyle.width + "px",
+        height: this.optionsStyle.height + "px",
+        left: this.optionsStyle.left + "px",
+        top: this.optionsStyle.top + "px",
+        background: this.optionsSetup.background
+      };
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.optionsStyle = val.position;
+        this.optionsData = val.data;
+        this.optionsCollapse = val.collapse;
+        this.optionsSetup = val.setup;
+        this.editorOptions();
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.optionsStyle = this.value.position;
+    this.optionsData = this.value.data;
+    this.optionsCollapse = this.value.collapse;
+    this.optionsSetup = this.value.setup;
+    this.editorOptions();
+  },
+  mounted() {
+    /*        setInterval(() => {
+              this.angle = this.angle + 3
+              myChart.setOption(options,true)
+            }, 1000);*/
+  },
+  methods: {
+    //轴point设置
+    getCirlPoint(x0, y0, r, x) {
+      let x1 = x0 + r * Math.cos((x * Math.PI) / 180);
+      let y1 = y0 + r * Math.sin((x * Math.PI) / 180);
+      return {
+        x: x1,
+        y: y1
+      };
+    },
+    editorOptions() {
+      this.setOptionsTitle();
+      this.setOptionsColor();
+      this.setOptionsData();
+      this.setOptionLine();
+      this.setOptionSurplusColor();
+    },
+    setOptionsTitle() {
+      const optionsSetup = this.optionsSetup;
+      const title = this.options.title;
+      title.x = "center";
+      title.y = "center";
+      const rich = {
+        nums: {
+          fontSize: optionsSetup.textNumFontSize,
+          color: optionsSetup.textNumColor,
+          fontWeight: optionsSetup.textNumFontWeight
+        },
+        percent: {
+          fontSize: optionsSetup.textPerFontSize,
+          color: optionsSetup.textPerColor,
+          fontWeight: optionsSetup.textPerFontWeight
+        }
+      };
+      title.textStyle["rich"] = rich;
+      this.options.title = title;
+    },
+    //圆环0-100%颜色
+    setOptionsColor() {
+      const optionsSetup = this.optionsSetup;
+      const itemStyle = this.options.series[6]["data"][0]["itemStyle"];
+      const normal = {
+        color: {
+          // 完成的圆环的颜色
+          colorStops: [
+            {
+              offset: 0,
+              color: optionsSetup.color0Start // 0% 处的颜色
+            },
+            {
+              offset: 1,
+              color: optionsSetup.color100End // 100% 处的颜色
+            }
+          ]
+        }
+      };
+      itemStyle["normal"] = normal;
+    },
+    setOptionSurplusColor() {
+      const itemStyle = this.options.series[6]["data"][1]["itemStyle"];
+      const normal = {
+        color: this.optionsSetup.colorsurplus
+      };
+      itemStyle["normal"] = normal;
+    },
+    setOptionLine() {
+      const optionsSetup = this.optionsSetup;
+      const line = this.options.series[7]["splitLine"];
+      const num = this.options.series[7];
+      num.splitNumber = optionsSetup.lineNumber;
+      line.length = optionsSetup.lineLength;
+      const lineStyle = {
+        width: optionsSetup.lineWidth,
+        color: optionsSetup.lineColor
+      };
+      line["lineStyle"] = lineStyle;
+    },
+    // 数据解析
+    setOptionsData() {
+      const optionsData = this.optionsData; // 数据类型 静态 or 动态
+      optionsData.dataType == "staticData"
+        ? this.staticDataFn(optionsData.staticData)
+        : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
+    },
+    staticDataFn(val) {
+      const title = this.options.title;
+      const num = val[0]["num"];
+      title.text = "{nums|" + num + "}{percent|%}";
+      this.options.series[6]["data"][0]["value"] = num;
+      this.options.series[6]["data"][1]["value"] = 100 - num;
+    },
+    dynamicDataFn(val, refreshTime) {
+      if (!val) return;
+      if (this.ispreview) {
+        this.getEchartData(val);
+        this.flagInter = setInterval(() => {
+          this.getEchartData(val);
+        }, refreshTime);
+      } else {
+        this.getEchartData(val);
+      }
+    },
+    getEchartData(val) {
+      const data = this.queryEchartsData(val);
+      data.then(res => {
+        this.options.title.text = "{nums|" + res[0].value + "}{percent|%}";
+        this.options.series[6]["data"][0]["value"] = res[0].value;
+        this.options.series[6]["data"][1]["value"] = 100 - res[0].value;
+      });
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.echarts {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>

report-ui/src/views/screenDesigner/widget/pieCharts/widgetPieNightingaleRose.vue

@@ -0,0 +1,244 @@
+<template>
+  <div :style="styleObj">
+    <v-chart :options="options" autoresize />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "WidgetPieNightingaleRoseArea", //南丁格尔玫瑰图面积模式 参考：https://echarts.apache.org/examples/zh/editor.html?c=pie-roseType-simple
+  components: {},
+  props: {
+    value: Object,
+    ispreview: Boolean
+  },
+  data() {
+    return {
+      options: {
+        legend: {
+          top: "bottom"
+        },
+        toolbox: {
+          show: true,
+          feature: {
+            mark: { show: true }
+          }
+        },
+        series: [
+          {
+            //name: "面积模式",
+            type: "pie",
+            radius: ["10%", "50%"],
+            center: ["50%", "50%"],
+            roseType: "area",
+            itemStyle: {
+              borderRadius: 8
+            },
+            data: []
+          }
+        ]
+      },
+      optionsStyle: {}, // 样式
+      optionsData: {}, // 数据
+      optionsCollapse: {}, // 图标属性
+      optionsSetup: {}
+    };
+  },
+  computed: {
+    styleObj() {
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        width: this.optionsStyle.width + "px",
+        height: this.optionsStyle.height + "px",
+        left: this.optionsStyle.left + "px",
+        top: this.optionsStyle.top + "px",
+        background: this.optionsSetup.background
+      };
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.optionsStyle = val.position;
+        this.optionsData = val.data;
+        this.optionsCollapse = val.setup;
+        this.optionsSetup = val.setup;
+        this.editorOptions();
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.optionsStyle = this.value.position;
+    this.optionsData = this.value.data;
+    this.optionsCollapse = this.value.setup;
+    this.optionsSetup = this.value.setup;
+    this.editorOptions();
+  },
+  methods: {
+    // 修改图标options属性
+    editorOptions() {
+      this.setOptionsTitle();
+      this.setOptionsValue();
+      this.setOptionsTooltip();
+      this.setOptionsLegend();
+      this.setOptionsColor();
+      this.setOptionsData();
+      this.setOptionsRosetype();
+    },
+    // 饼图模式 面积模式"area" 半径模式"radius"
+    setOptionsRosetype() {
+      this.options.series[0]["roseType"] = this.optionsSetup.nightingleRosetype;
+    },
+    // 标题修改
+    setOptionsTitle() {
+      const optionsCollapse = this.optionsSetup;
+      const title = {};
+      title.text = optionsCollapse.titleText;
+      title.show = optionsCollapse.isNoTitle;
+      title.left = optionsCollapse.textAlign;
+      title.textStyle = {
+        color: optionsCollapse.textColor,
+        fontSize: optionsCollapse.textFontSize,
+        fontWeight: optionsCollapse.textFontWeight
+      };
+      title.subtext = optionsCollapse.subText;
+      title.subtextStyle = {
+        color: optionsCollapse.subTextColor,
+        fontWeight: optionsCollapse.subTextFontWeight,
+        fontSize: optionsCollapse.subTextFontSize
+      };
+      this.options.title = title;
+    },
+    // 数值设定
+    setOptionsValue() {
+      const optionsCollapse = this.optionsSetup;
+      const series = this.options.series;
+      const numberValue = optionsCollapse.numberValue ? "{c}" : "";
+      const percentage = optionsCollapse.percentage ? "({d})%" : "";
+      const label = {
+        show: optionsCollapse.isShow,
+        formatter: `{a|{b}：${numberValue} ${percentage}}`,
+        rich: {
+          a: {
+            padding: [-30, 15, -20, 15],
+            color: optionsCollapse.subTextColor,
+            fontSize: optionsCollapse.fontSize,
+            fontWeight: optionsCollapse.fontWeight
+          }
+        },
+        fontSize: optionsCollapse.fontSize,
+
+        fontWeight: optionsCollapse.optionsCollapse
+      };
+      for (const key in series) {
+        if (series[key].type == "pie") {
+          series[key].label = label;
+          series[key].labelLine = { show: optionsCollapse.isShow };
+        }
+      }
+    },
+    // tooltip 设置
+    setOptionsTooltip() {
+      const optionsCollapse = this.optionsSetup;
+      const tooltip = {
+        trigger: "item",
+        show: true,
+        textStyle: {
+          color: optionsCollapse.lineColor,
+          fontSize: optionsCollapse.fontSize
+        }
+      };
+      this.options.tooltip = tooltip;
+    },
+    // 边距设置
+    setOptionsMargin() {
+      const optionsCollapse = this.optionsSetup;
+      const grid = {
+        left: optionsCollapse.marginLeft,
+        right: optionsCollapse.marginRight,
+        bottom: optionsCollapse.marginBottom,
+        top: optionsCollapse.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 == "left" ? 0 : "auto";
+      legend.right = optionsCollapse.lateralPosition == "right" ? 0 : "auto";
+      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.fontSize
+      };
+      legend.itemWidth = optionsCollapse.lengedWidth;
+    },
+    // 图例颜色修改
+    setOptionsColor() {
+      const optionsCollapse = this.optionsSetup;
+      const customColor = optionsCollapse.customColor;
+      if (!customColor) return;
+      const arrColor = [];
+      for (let i = 0; i < customColor.length; i++) {
+        arrColor.push(customColor[i].color);
+      }
+      this.options.color = arrColor;
+      this.options = Object.assign({}, this.options);
+    },
+    // 数据解析
+    setOptionsData() {
+      const optionsData = this.optionsData; // 数据类型 静态 or 动态
+      optionsData.dataType == "staticData"
+        ? this.staticDataFn(optionsData.staticData)
+        : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
+    },
+    staticDataFn(val) {
+      const staticData = typeof val == "string" ? JSON.parse(val) : val;
+      for (const key in this.options.series) {
+        if (this.options.series[key].type == "pie") {
+          this.options.series[key].data = staticData;
+        }
+      }
+    },
+    dynamicDataFn(val, refreshTime) {
+      if (!val) return;
+      if (this.ispreview) {
+        this.getEchartData(val);
+        this.flagInter = setInterval(() => {
+          this.getEchartData(val);
+        }, refreshTime);
+      } else {
+        this.getEchartData(val);
+      }
+    },
+    getEchartData(val) {
+      const data = this.queryEchartsData(val);
+      data.then(res => {
+        this.renderingFn(res);
+      });
+    },
+    renderingFn(val) {
+      for (const key in this.options.series) {
+        if (this.options.series[key].type == "pie") {
+          this.options.series[key].data = val;
+        }
+      }
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.echarts {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>

report-ui/src/views/screenDesigner/widget/pieCharts/widgetPiechart.vue

@@ -0,0 +1,242 @@
+<template>
+  <div :style="styleObj">
+    <v-chart :options="options" autoresize/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "WidgetPiechart",
+  components: {},
+  props: {
+    value: Object,
+    ispreview: Boolean
+  },
+  data() {
+    return {
+      options: {
+        title: {
+          text: "",
+          left: "center",
+          textStyle: {
+            color: "#fff"
+          }
+        },
+        legend: {
+          orient: "vertical",
+          left: "left",
+          textStyle: {
+            color: "#fff"
+          }
+        },
+        series: [
+          {
+            type: "pie",
+            radius: "50%",
+            data: [],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)"
+              }
+            }
+          }
+        ]
+      },
+      optionsStyle: {}, // 样式
+      optionsData: {}, // 数据
+      optionsCollapse: {}, // 图标属性
+      optionsSetup: {}
+    };
+  },
+  computed: {
+    styleObj() {
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        width: this.optionsStyle.width + "px",
+        height: this.optionsStyle.height + "px",
+        left: this.optionsStyle.left + "px",
+        top: this.optionsStyle.top + "px",
+        background: this.optionsSetup.background
+      };
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.optionsStyle = val.position;
+        this.optionsData = val.data;
+        this.optionsCollapse = val.collapse;
+        this.optionsSetup = val.setup;
+        this.editorOptions();
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.optionsStyle = this.value.position;
+    this.optionsData = this.value.data;
+    this.optionsCollapse = this.value.collapse;
+    this.optionsSetup = this.value.setup;
+    this.editorOptions();
+  },
+  methods: {
+    // 修改图标options属性
+    editorOptions() {
+      this.setOptionsTitle();
+      this.setOptionsValue();
+      this.setOptionsTooltip();
+      this.setOptionsLegend();
+      this.setOptionsColor();
+      this.setOptionsData();
+      this.setOptionsPiechartStyle();
+    },
+    // 饼图样式
+    setOptionsPiechartStyle() {
+      if (this.optionsSetup.piechartStyle == "shixin") {
+        this.options.series[0]["radius"] = "50%";
+      } else if (this.optionsSetup.piechartStyle == "kongxin") {
+        this.options.series[0]["radius"] = ["40%", "70%"];
+      } else {
+      }
+    },
+    // 标题设置
+    setOptionsTitle() {
+      const optionsSetup = this.optionsSetup;
+      const title = {};
+      title.show = optionsSetup.isNoTitle;
+      title.text = optionsSetup.titleText;
+      title.left = optionsSetup.textAlign;
+      title.textStyle = {
+        color: optionsSetup.textColor,
+        fontSize: optionsSetup.textFontSize,
+        fontWeight: optionsSetup.textFontWeight
+      };
+      title.subtext = optionsSetup.subText;
+      title.subtextStyle = {
+        color: optionsSetup.subTextColor,
+        fontWeight: optionsSetup.subTextFontWeight,
+        fontSize: optionsSetup.subTextFontSize
+      };
+      this.options.title = title;
+    },
+    // 数值设定
+    setOptionsValue() {
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series;
+      const numberValue = optionsSetup.numberValue ? "{c}" : "";
+      const percentage = optionsSetup.percentage ? "({d})%" : "";
+      const label = {
+        show: optionsSetup.isShow,
+        formatter: `{a|{b}：${numberValue} ${percentage}}`,
+        rich: {
+          a: {
+            padding: [-30, 15, -20, 15],
+            color: optionsSetup.subTextColor,
+            fontSize: optionsSetup.fontSize,
+            fontWeight: optionsSetup.fontWeight
+          }
+        },
+        fontSize: optionsSetup.fontSize,
+
+        fontWeight: optionsSetup.optionsSetup
+      };
+      for (const key in series) {
+        if (series[key].type == "pie") {
+          series[key].label = label;
+          series[key].labelLine = {show: optionsSetup.isShow};
+        }
+      }
+    },
+    // 提示语设置 tooltip
+    setOptionsTooltip() {
+      const optionsSetup = this.optionsSetup;
+      const tooltip = {
+        trigger: "item",
+        show: true,
+        textStyle: {
+          color: optionsSetup.lineColor,
+          fontSize: optionsSetup.fontSize
+        }
+      };
+      this.options.tooltip = tooltip;
+    },
+    // 图例操作 legend
+    setOptionsLegend() {
+      const optionsSetup = this.optionsSetup;
+      const legend = this.options.legend;
+      legend.show = optionsSetup.isShowLegend;
+      legend.left = optionsSetup.lateralPosition == "left" ? 0 : "auto";
+      legend.right = optionsSetup.lateralPosition == "right" ? 0 : "auto";
+      legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";
+      legend.bottom =
+        optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
+      legend.orient = optionsSetup.layoutFront;
+      legend.textStyle = {
+        color: optionsSetup.lengedColor,
+        fontSize: optionsSetup.fontSize
+      };
+      legend.itemWidth = optionsSetup.lengedWidth;
+    },
+    // 图例颜色修改
+    setOptionsColor() {
+      const optionsSetup = this.optionsSetup;
+      const customColor = optionsSetup.customColor;
+      if (!customColor) return;
+      const arrColor = [];
+      for (let i = 0; i < customColor.length; i++) {
+        arrColor.push(customColor[i].color);
+      }
+      this.options.color = arrColor;
+      this.options = Object.assign({}, this.options);
+    },
+    setOptionsData() {
+      const optionsData = this.optionsData; // 数据类型 静态 or 动态
+      optionsData.dataType == "staticData"
+        ? this.staticDataFn(optionsData.staticData)
+        : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
+    },
+    staticDataFn(val) {
+      const staticData = typeof val == "string" ? JSON.parse(val) : val;
+      for (const key in this.options.series) {
+        if (this.options.series[key].type == "pie") {
+          this.options.series[key].data = staticData;
+        }
+      }
+    },
+    dynamicDataFn(val, refreshTime) {
+      if (!val) return;
+      if (this.ispreview) {
+        this.getEchartData(val);
+        this.flagInter = setInterval(() => {
+          this.getEchartData(val);
+        }, refreshTime);
+      } else {
+        this.getEchartData(val);
+      }
+    },
+    getEchartData(val) {
+      const data = this.queryEchartsData(val);
+      data.then(res => {
+        this.renderingFn(res);
+      });
+    },
+    renderingFn(val) {
+      for (const key in this.options.series) {
+        if (this.options.series[key].type == "pie") {
+          this.options.series[key].data = val;
+        }
+      }
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.echarts {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>

report-ui/src/views/screenDesigner/widget/wordcloudCharts/widgetWordCloud.vue

@@ -0,0 +1,183 @@
+<template>
+  <div :style="styleObj">
+    <v-chart :options="options" autoresize/>
+  </div>
+</template>
+<script>
+import wordCloud from "../../../../../static/wordCloud/echarts-wordcloud.min.js";
+
+export default {
+  name: "widgetWordCloud",
+  components: {},
+  props: {
+    value: Object,
+    ispreview: Boolean
+  },
+  data() {
+    return {
+      options: {
+        tooltip: {
+          show: true
+        },
+        series: [
+          {
+            type: 'wordCloud',
+            size: ['9%', '99%'],
+            sizeRange: [6, 30],
+            textRotation: [0, 45, 90, -45],
+            rotationRange: [-45, 90],
+            shape: 'circle',
+            textPadding: 0,
+            autoSize: {
+              enable: true,
+              minSize: 6
+            },
+            textStyle: {
+              normal: {
+                color: function () {
+                  return 'rgb(' + [
+                    Math.round(Math.random() * 160),
+                    Math.round(Math.random() * 160),
+                    Math.round(Math.random() * 160)
+                  ].join(',') + ')';
+                }
+              },
+            },
+            data: []
+          }
+        ]
+      },
+      optionsStyle: {}, // 样式
+      optionsData: {}, // 数据
+      optionsSetup: {},
+      flagInter: null
+    };
+  },
+  computed: {
+    styleObj() {
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        width: this.optionsStyle.width + "px",
+        height: this.optionsStyle.height + "px",
+        left: this.optionsStyle.left + "px",
+        top: this.optionsStyle.top + "px",
+        background: this.optionsSetup.background
+      };
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.optionsStyle = val.position;
+        this.optionsData = val.data;
+        this.optionsCollapse = val.setup;
+        this.optionsSetup = val.setup;
+        this.editorOptions();
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.optionsStyle = this.value.position;
+    this.optionsData = this.value.data;
+    this.optionsCollapse = this.value.setup;
+    this.optionsSetup = this.value.setup;
+    this.editorOptions();
+  },
+  methods: {
+    // 修改图标options属性
+    editorOptions() {
+      this.setOptionsTitle();
+      this.setOptionsSizeRange();
+      this.setOptionsRotationRange();
+      this.setOptionsTooltip();
+      this.setOptionsData();
+    },
+    // 标题修改
+    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
+      };
+      title.subtext = optionsSetup.subText;
+      title.subtextStyle = {
+        color: optionsSetup.subTextColor,
+        fontWeight: optionsSetup.subTextFontWeight,
+        fontSize: optionsSetup.subTextFontSize
+      };
+      this.options.title = title;
+    },
+    // 词云字体范围
+    setOptionsSizeRange() {
+      const optionsSetup = this.optionsSetup;
+      this.options.series[0].sizeRange = [optionsSetup.minRangeSize, optionsSetup.maxRangeSize];
+    },
+    // 文字角度
+    setOptionsRotationRange() {
+      const optionsSetup = this.optionsSetup;
+      this.options.series[0].rotationRange = [optionsSetup.minRotationRange, optionsSetup.maxRotationRange];
+    },
+    // tooltip 设置
+    setOptionsTooltip() {
+      const optionsSetup = this.optionsSetup;
+      const tooltip = {
+        trigger: "item",
+        show: true,
+        textStyle: {
+          color: optionsSetup.lineColor,
+          fontSize: optionsSetup.fontSize
+        }
+      };
+      this.options.tooltip = tooltip;
+    },
+    // 数据解析
+    setOptionsData() {
+      const optionsData = this.optionsData; // 数据类型 静态 or 动态
+      optionsData.dataType == "staticData"
+        ? this.staticDataFn(optionsData.staticData)
+        : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
+    },
+    staticDataFn(val) {
+      const staticData = typeof val == "string" ? JSON.parse(val) : val;
+      for (const key in this.options.series) {
+        this.options.series[key].data = staticData;
+      }
+    },
+    dynamicDataFn(val, refreshTime) {
+      if (!val) return;
+      if (this.ispreview) {
+        this.getEchartData(val);
+        this.flagInter = setInterval(() => {
+          this.getEchartData(val);
+        }, refreshTime);
+      } else {
+        this.getEchartData(val);
+      }
+    },
+    getEchartData(val) {
+      const data = this.queryEchartsData(val);
+      data.then(res => {
+        this.renderingFn(res);
+      });
+    },
+    renderingFn(val) {
+      for (const key in this.options.series) {
+        this.options.series[key].data = val;
+      }
+    }
+  }
+};
+</script>
+<style scoped lang="scss">
+.echarts {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>