Selaa lähdekoodia

feat--饼图、雷达图优化

qianming 1 vuosi sitten
vanhempi
sitoutus
4169b51aef

+ 226 - 133
report-ui/src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-pie-nightingale.js

@@ -32,93 +32,13 @@ export const widgetPieNightingale = {
         value: ''
       },
       [
-        {
-          name: '饼图设置',
-          list : [
-            {
-              type: 'el-select',
-              label: '饼图模式',
-              name: 'nightingaleRoseType',
-              required: false,
-              placeholder: '',
-              selectOptions: [
-                { code: 'area', name: '面积模式' },
-                { code: 'radius', name: '半径模式' },
-              ],
-              value: 'area'
-            },
-            {
-              type: 'el-slider',
-              label: '内半径',
-              name: 'innerNumber',
-              required: false,
-              placeholder: '',
-              value: 10,
-            },
-            {
-              type: 'el-slider',
-              label: '外半径',
-              name: 'outerNumber',
-              required: false,
-              placeholder: '',
-              value: 60,
-            },
-            {
-              type: 'el-switch',
-              label: '顺时针排布',
-              name: 'clockwise',
-              required: false,
-              placeholder: '',
-              value: true,
-            },
-            {
-              type: 'el-select',
-              label: '起始角度',
-              name: 'startAngle',
-              required: false,
-              placeholder: '',
-              selectOptions: [
-                { code: 0, name: '0度' },
-                { code: 30, name: '30度' },
-                { code: 90, name: '90度' },
-                { code: 180, name: '180度' },
-                { code: 360, name: '360度' }
-              ],
-              value: 90
-            },
-            {
-              type: 'el-slider',
-              label: '最小角度',
-              name: 'minAngle',
-              require: false,
-              placeholder: '',
-              value: 0,
-            },
-            {
-              type: 'el-slider',
-              label: '不显示标签角度',
-              name: 'minShowLabelAngle',
-              require: false,
-              placeholder: '',
-              value: 0,
-            },
-/*            {
-              type: 'el-slider',
-              label: '圆角属性',
-              name: 'borderRadius',
-              required: false,
-              placeholder: '',
-              value: 10,
-            },*/
-          ]
-        },
         {
           name: '标题设置',
           list: [
             {
               type: 'el-switch',
               label: '标题显示',
-              name: 'isNoTitle',
+              name: 'isShowTitle',
               required: false,
               placeholder: '',
               value: true,
@@ -126,7 +46,7 @@ export const widgetPieNightingale = {
             {
               type: 'el-input-text',
               label: '标题名',
-              name: 'titleText',
+              name: 'text',
               required: false,
               placeholder: '',
               value: '',
@@ -176,21 +96,22 @@ export const widgetPieNightingale = {
             },
             {
               type: 'el-select',
-              label: '字体位置',
-              name: 'textAlign',
+              label: '字体系列',
+              name: 'textFontFamily',
               required: false,
               placeholder: '',
               selectOptions: [
-                { code: 'center', name: '居中' },
-                { code: 'left', name: '左对齐' },
-                { code: 'right', name: '右对齐' },
+                { code: 'Microsoft YaHei', name: '微软雅黑' },
+                { code: 'serif', name: 'serif字体' },
+                { code: 'Arial', name: 'Arial字体' },
+                { code: 'Courier New', name: 'Courier New字体' },
               ],
-              value: 'center'
+              value: 'Microsoft YaHei'
             },
             {
               type: 'el-input-text',
               label: '副标题名',
-              name: 'subText',
+              name: 'subtext',
               required: false,
               placeholder: '',
               value: ''
@@ -198,7 +119,7 @@ export const widgetPieNightingale = {
             {
               type: 'vue-color',
               label: '字体颜色',
-              name: 'subTextColor',
+              name: 'subtextColor',
               required: false,
               placeholder: '',
               value: 'rgba(30, 144, 255, 1)'
@@ -206,7 +127,7 @@ export const widgetPieNightingale = {
             {
               type: 'el-input-number',
               label: '字体字号',
-              name: 'subTextFontSize',
+              name: 'subtextFontSize',
               required: false,
               placeholder: '',
               value: 20
@@ -214,7 +135,7 @@ export const widgetPieNightingale = {
             {
               type: 'el-select',
               label: '字体粗细',
-              name: 'subTextFontWeight',
+              name: 'subtextFontWeight',
               required: false,
               placeholder: '',
               selectOptions: [
@@ -228,7 +149,7 @@ export const widgetPieNightingale = {
             {
               type: 'el-select',
               label: '字体风格',
-              name: 'subTextFontStyle',
+              name: 'subtextFontStyle',
               required: false,
               placeholder: '',
               selectOptions: [
@@ -238,81 +159,130 @@ export const widgetPieNightingale = {
               ],
               value: 'normal'
             },
-          ],
-        },
-        {
-          name: '图例操作',
-          list: [
             {
-              type: 'el-switch',
-              label: '图例',
-              name: 'isShowLegend',
+              type: 'el-select',
+              label: '字体系列',
+              name: 'subtextFontFamily',
               required: false,
               placeholder: '',
-              value: true,
+              selectOptions: [
+                { code: 'Microsoft YaHei', name: '微软雅黑' },
+                { code: 'serif', name: 'serif字体' },
+                { code: 'Arial', name: 'Arial字体' },
+                { code: 'Courier New', name: 'Courier New字体' },
+              ],
+              value: 'Microsoft YaHei'
             },
             {
-              type: 'vue-color',
-              label: '字体颜色',
-              name: 'legendColor',
+              type: 'el-select',
+              label: '左右位置',
+              name: 'titleLeft',
               required: false,
               placeholder: '',
-              value: '#fff',
+              selectOptions: [
+                { code: 'center', name: '居中' },
+                { code: 'left', name: '左对齐' },
+                { code: 'right', name: '右对齐' },
+              ],
+              value: 'center'
             },
             {
-              type: 'el-input-number',
-              label: '字体字号',
-              name: 'legendFontSize',
+              type: 'el-slider',
+              label: '上下间距',
+              name: 'titleTop',
               required: false,
               placeholder: '',
-              value: 12,
+              value: 5,
             },
             {
               type: 'el-input-number',
-              label: '图例宽度',
-              name: 'legendWidth',
+              label: '主副标题间距',
+              name: 'titleItemGap',
               required: false,
               placeholder: '',
-              value: 15,
+              value: 0
             },
+          ],
+        },
+        {
+          name: '饼图设置',
+          list : [
             {
               type: 'el-select',
-              label: '横向位置',
-              name: 'lateralPosition',
+              label: '饼图模式',
+              name: 'nightingaleRoseType',
               required: false,
               placeholder: '',
               selectOptions: [
-                { code: 'center', name: '居中' },
-                { code: 'left', name: '左对齐' },
-                { code: 'right', name: '右对齐' },
+                { code: 'area', name: '面积模式' },
+                { code: 'radius', name: '半径模式' },
               ],
-              value: 'center'
+              value: 'area'
             },
             {
-              type: 'el-select',
-              label: '纵向位置',
-              name: 'longitudinalPosition',
+              type: 'el-slider',
+              label: '内半径',
+              name: 'innerNumber',
               required: false,
               placeholder: '',
-              selectOptions: [
-                { code: 'top', name: '顶部' },
-                { code: 'bottom', name: '底部' },
-              ],
-              value: 'top'
+              value: 10,
+            },
+            {
+              type: 'el-slider',
+              label: '外半径',
+              name: 'outerNumber',
+              required: false,
+              placeholder: '',
+              value: 60,
+            },
+            {
+              type: 'el-switch',
+              label: '顺时针排布',
+              name: 'clockwise',
+              required: false,
+              placeholder: '',
+              value: true,
             },
             {
               type: 'el-select',
-              label: '布局前置',
-              name: 'layoutFront',
+              label: '起始角度',
+              name: 'startAngle',
               required: false,
               placeholder: '',
               selectOptions: [
-                { code: 'vertical', name: '竖排' },
-                { code: 'horizontal', name: '横排' },
+                { code: 0, name: '0度' },
+                { code: 30, name: '30度' },
+                { code: 90, name: '90度' },
+                { code: 180, name: '180度' },
+                { code: 360, name: '360度' }
               ],
-              value: 'horizontal'
+              value: 90
             },
-          ],
+            {
+              type: 'el-slider',
+              label: '最小角度',
+              name: 'minAngle',
+              require: false,
+              placeholder: '',
+              value: 0,
+            },
+            {
+              type: 'el-slider',
+              label: '不显示标签角度',
+              name: 'minShowLabelAngle',
+              require: false,
+              placeholder: '',
+              value: 0,
+            },
+/*            {
+              type: 'el-slider',
+              label: '圆角属性',
+              name: 'borderRadius',
+              required: false,
+              placeholder: '',
+              value: 10,
+            },*/
+          ]
         },
         {
           name: '扇区设置',
@@ -429,6 +399,129 @@ export const widgetPieNightingale = {
             },
           ],
         },
+        {
+          name: '图例操作',
+          list: [
+            {
+              type: 'el-switch',
+              label: '图例显示',
+              name: 'isShowLegend',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'legendColor',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'legendFontSize',
+              required: false,
+              placeholder: '',
+              value: 12,
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'legendFontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'normal', name: '正常' },
+                { code: 'bold', name: '粗体' },
+                { code: 'bolder', name: '特粗体' },
+                { code: 'lighter', name: '细体' }
+              ],
+              value: 'normal'
+            },
+            {
+              type: 'el-select',
+              label: '字体风格',
+              name: 'legendFontStyle',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'normal', name: '正常' },
+                { code: 'italic', name: 'italic斜体' },
+                { code: 'oblique', name: 'oblique斜体' },
+              ],
+              value: 'normal'
+            },
+            {
+              type: 'el-select',
+              label: '字体系列',
+              name: 'legendFontFamily',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'Microsoft YaHei', name: '微软雅黑' },
+                { code: 'serif', name: 'serif字体' },
+                { code: 'Arial', name: 'Arial字体' },
+                { code: 'Courier New', name: 'Courier New字体' },
+              ],
+              value: 'Microsoft YaHei'
+            },
+            {
+              type: 'el-input-number',
+              label: '图例宽度',
+              name: 'legendWidth',
+              required: false,
+              placeholder: '',
+              value: 12,
+            },
+            {
+              type: 'el-input-number',
+              label: '图例高度',
+              name: 'legendHeight',
+              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: [

+ 217 - 124
report-ui/src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-piechart.js

@@ -32,81 +32,13 @@ export const widgetPiechart = {
         value: ''
       },
       [
-        {
-          name: '饼图设置',
-          list : [
-            {
-              type: 'el-slider',
-              label: '内半径',
-              name: 'innerNumber',
-              required: false,
-              placeholder: '',
-              value: 30,
-            },
-            {
-              type: 'el-slider',
-              label: '外半径',
-              name: 'outerNumber',
-              required: false,
-              placeholder: '',
-              value: 60,
-            },
-            {
-              type: 'el-switch',
-              label: '顺时针排布',
-              name: 'clockwise',
-              required: false,
-              placeholder: '',
-              value: true,
-            },
-            {
-              type: 'el-select',
-              label: '起始角度',
-              name: 'startAngle',
-              required: false,
-              placeholder: '',
-              selectOptions: [
-                { code: 0, name: '0度' },
-                { code: 30, name: '30度' },
-                { code: 90, name: '90度' },
-                { code: 180, name: '180度' },
-                { code: 360, name: '360度' }
-              ],
-              value: 90
-            },
-            {
-              type: 'el-slider',
-              label: '最小角度',
-              name: 'minAngle',
-              require: false,
-              placeholder: '',
-              value: 0,
-            },
-            {
-              type: 'el-slider',
-              label: '不显示标签角度',
-              name: 'minShowLabelAngle',
-              require: false,
-              placeholder: '',
-              value: 0,
-            },
-/*            {
-              type: 'el-slider',
-              label: '圆角属性',
-              name: 'borderRadius',
-              required: false,
-              placeholder: '',
-              value: 10,
-            },*/
-          ]
-        },
         {
           name: '标题设置',
           list: [
             {
               type: 'el-switch',
               label: '标题显示',
-              name: 'isNoTitle',
+              name: 'isShowTitle',
               required: false,
               placeholder: '',
               value: true,
@@ -114,7 +46,7 @@ export const widgetPiechart = {
             {
               type: 'el-input-text',
               label: '标题名',
-              name: 'titleText',
+              name: 'text',
               required: false,
               placeholder: '',
               value: '',
@@ -164,21 +96,22 @@ export const widgetPiechart = {
             },
             {
               type: 'el-select',
-              label: '字体位置',
-              name: 'textAlign',
+              label: '字体系列',
+              name: 'textFontFamily',
               required: false,
               placeholder: '',
               selectOptions: [
-                { code: 'center', name: '居中' },
-                { code: 'left', name: '左对齐' },
-                { code: 'right', name: '右对齐' },
+                { code: 'Microsoft YaHei', name: '微软雅黑' },
+                { code: 'serif', name: 'serif字体' },
+                { code: 'Arial', name: 'Arial字体' },
+                { code: 'Courier New', name: 'Courier New字体' },
               ],
-              value: 'center'
+              value: 'Microsoft YaHei'
             },
             {
               type: 'el-input-text',
               label: '副标题名',
-              name: 'subText',
+              name: 'subtext',
               required: false,
               placeholder: '',
               value: ''
@@ -186,7 +119,7 @@ export const widgetPiechart = {
             {
               type: 'vue-color',
               label: '字体颜色',
-              name: 'subTextColor',
+              name: 'subtextColor',
               required: false,
               placeholder: '',
               value: 'rgba(30, 144, 255, 1)'
@@ -194,7 +127,7 @@ export const widgetPiechart = {
             {
               type: 'el-input-number',
               label: '字体字号',
-              name: 'subTextFontSize',
+              name: 'subtextFontSize',
               required: false,
               placeholder: '',
               value: 20
@@ -202,7 +135,7 @@ export const widgetPiechart = {
             {
               type: 'el-select',
               label: '字体粗细',
-              name: 'subTextFontWeight',
+              name: 'subtextFontWeight',
               required: false,
               placeholder: '',
               selectOptions: [
@@ -216,7 +149,7 @@ export const widgetPiechart = {
             {
               type: 'el-select',
               label: '字体风格',
-              name: 'subTextFontStyle',
+              name: 'subtextFontStyle',
               required: false,
               placeholder: '',
               selectOptions: [
@@ -226,81 +159,118 @@ export const widgetPiechart = {
               ],
               value: 'normal'
             },
-          ],
-        },
-        {
-          name: '图例操作',
-          list: [
             {
-              type: 'el-switch',
-              label: '图例',
-              name: 'isShowLegend',
+              type: 'el-select',
+              label: '字体系列',
+              name: 'subtextFontFamily',
               required: false,
               placeholder: '',
-              value: true,
+              selectOptions: [
+                { code: 'Microsoft YaHei', name: '微软雅黑' },
+                { code: 'serif', name: 'serif字体' },
+                { code: 'Arial', name: 'Arial字体' },
+                { code: 'Courier New', name: 'Courier New字体' },
+              ],
+              value: 'Microsoft YaHei'
             },
             {
-              type: 'vue-color',
-              label: '字体颜色',
-              name: 'legendColor',
+              type: 'el-select',
+              label: '左右位置',
+              name: 'titleLeft',
               required: false,
               placeholder: '',
-              value: '#fff',
+              selectOptions: [
+                { code: 'center', name: '居中' },
+                { code: 'left', name: '左对齐' },
+                { code: 'right', name: '右对齐' },
+              ],
+              value: 'center'
             },
             {
-              type: 'el-input-number',
-              label: '字体字号',
-              name: 'legendFontSize',
+              type: 'el-slider',
+              label: '上下间距',
+              name: 'titleTop',
               required: false,
               placeholder: '',
-              value: 12,
+              value: 5,
             },
             {
               type: 'el-input-number',
-              label: '图例宽度',
-              name: 'legendWidth',
+              label: '主副标题间距',
+              name: 'titleItemGap',
               required: false,
               placeholder: '',
-              value: 14,
+              value: 0
             },
+          ],
+        },
+        {
+          name: '饼图设置',
+          list : [
             {
-              type: 'el-select',
-              label: '横向位置',
-              name: 'lateralPosition',
+              type: 'el-slider',
+              label: '内半径',
+              name: 'innerNumber',
               required: false,
               placeholder: '',
-              selectOptions: [
-                { code: 'center', name: '居中' },
-                { code: 'left', name: '左对齐' },
-                { code: 'right', name: '右对齐' },
-              ],
-              value: 'center'
+              value: 30,
             },
             {
-              type: 'el-select',
-              label: '纵向位置',
-              name: 'longitudinalPosition',
+              type: 'el-slider',
+              label: '外半径',
+              name: 'outerNumber',
               required: false,
               placeholder: '',
-              selectOptions: [
-                { code: 'top', name: '顶部' },
-                { code: 'bottom', name: '底部' },
-              ],
-              value: 'top'
+              value: 60,
+            },
+            {
+              type: 'el-switch',
+              label: '顺时针排布',
+              name: 'clockwise',
+              required: false,
+              placeholder: '',
+              value: true,
             },
             {
               type: 'el-select',
-              label: '布局前置',
-              name: 'layoutFront',
+              label: '起始角度',
+              name: 'startAngle',
               required: false,
               placeholder: '',
               selectOptions: [
-                { code: 'vertical', name: '竖排' },
-                { code: 'horizontal', name: '横排' },
+                { code: 0, name: '0度' },
+                { code: 30, name: '30度' },
+                { code: 90, name: '90度' },
+                { code: 180, name: '180度' },
+                { code: 360, name: '360度' }
               ],
-              value: 'horizontal'
+              value: 90
             },
-          ],
+            {
+              type: 'el-slider',
+              label: '最小角度',
+              name: 'minAngle',
+              require: false,
+              placeholder: '',
+              value: 0,
+            },
+            {
+              type: 'el-slider',
+              label: '不显示标签角度',
+              name: 'minShowLabelAngle',
+              require: false,
+              placeholder: '',
+              value: 0,
+            },
+/*            {
+              type: 'el-slider',
+              label: '圆角属性',
+              name: 'borderRadius',
+              required: false,
+              placeholder: '',
+              value: 10,
+            },*/
+          ]
         },
         {
           name: '扇区设置',
@@ -417,6 +387,129 @@ export const widgetPiechart = {
             },
           ],
         },
+        {
+          name: '图例操作',
+          list: [
+            {
+              type: 'el-switch',
+              label: '图例显示',
+              name: 'isShowLegend',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'legendColor',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '字体字号',
+              name: 'legendFontSize',
+              required: false,
+              placeholder: '',
+              value: 12,
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'legendFontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'normal', name: '正常' },
+                { code: 'bold', name: '粗体' },
+                { code: 'bolder', name: '特粗体' },
+                { code: 'lighter', name: '细体' }
+              ],
+              value: 'normal'
+            },
+            {
+              type: 'el-select',
+              label: '字体风格',
+              name: 'legendFontStyle',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'normal', name: '正常' },
+                { code: 'italic', name: 'italic斜体' },
+                { code: 'oblique', name: 'oblique斜体' },
+              ],
+              value: 'normal'
+            },
+            {
+              type: 'el-select',
+              label: '字体系列',
+              name: 'legendFontFamily',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'Microsoft YaHei', name: '微软雅黑' },
+                { code: 'serif', name: 'serif字体' },
+                { code: 'Arial', name: 'Arial字体' },
+                { code: 'Courier New', name: 'Courier New字体' },
+              ],
+              value: 'Microsoft YaHei'
+            },
+            {
+              type: 'el-input-number',
+              label: '图例宽度',
+              name: 'legendWidth',
+              required: false,
+              placeholder: '',
+              value: 12,
+            },
+            {
+              type: 'el-input-number',
+              label: '图例高度',
+              name: 'legendHeight',
+              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: [

+ 49 - 8
report-ui/src/views/bigscreenDesigner/designer/tools/configure/radarCharts/widget-radar.js

@@ -294,14 +294,6 @@ export const widgetRadar = {
               placeholder: '',
               value: true,
             },
-            {
-              type: 'el-input-text',
-              label: '名称( | 分隔)',
-              name: 'legendName',
-              required: false,
-              placeholder: '多值以' | '隔开',
-              value: ''
-            },
             {
               type: 'vue-color',
               label: '字体颜色',
@@ -318,6 +310,47 @@ export const widgetRadar = {
               placeholder: '',
               value: 12,
             },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'legendFontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'normal', name: '正常' },
+                { code: 'bold', name: '粗体' },
+                { code: 'bolder', name: '特粗体' },
+                { code: 'lighter', name: '细体' }
+              ],
+              value: 'normal'
+            },
+            {
+              type: 'el-select',
+              label: '字体风格',
+              name: 'legendFontStyle',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'normal', name: '正常' },
+                { code: 'italic', name: 'italic斜体' },
+                { code: 'oblique', name: 'oblique斜体' },
+              ],
+              value: 'normal'
+            },
+            {
+              type: 'el-select',
+              label: '字体系列',
+              name: 'legendFontFamily',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'Microsoft YaHei', name: '微软雅黑' },
+                { code: 'serif', name: 'serif字体' },
+                { code: 'Arial', name: 'Arial字体' },
+                { code: 'Courier New', name: 'Courier New字体' },
+              ],
+              value: 'Microsoft YaHei'
+            },
             {
               type: 'el-input-number',
               label: '图例宽度',
@@ -326,6 +359,14 @@ export const widgetRadar = {
               placeholder: '',
               value: 12,
             },
+            {
+              type: 'el-input-number',
+              label: '图例高度',
+              name: 'legendHeight',
+              required: false,
+              placeholder: '',
+              value: 12,
+            },
             {
               type: 'el-select',
               label: '横向位置',

+ 35 - 26
report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPieNightingaleRose.vue

@@ -89,14 +89,41 @@ export default {
   methods: {
     // 修改图标options属性
     editorOptions() {
-      this.setOptionsPie();
       this.setOptionsTitle();
+      this.setOptionsPie();
       this.setOptionsValue();
       this.setOptionsTooltip();
       this.setOptionsLegend();
       this.setOptionsColor();
       this.setOptionsData();
     },
+    // 标题修改
+    setOptionsTitle() {
+      const optionsSetup = this.optionsSetup;
+      const title = {
+        text: optionsSetup.text,
+        show: optionsSetup.isShowTitle,
+        left: optionsSetup.titleLeft,
+        top: optionsSetup.titleTop + "%",
+        itemGap: optionsSetup.titleItemGap,
+        textStyle: {
+          color: optionsSetup.textColor,
+          fontSize: optionsSetup.textFontSize,
+          fontWeight: optionsSetup.textFontWeight,
+          fontStyle: optionsSetup.textFontStyle,
+          fontFamily: optionsSetup.textFontFamily,
+        },
+        subtext: optionsSetup.subtext,
+        subtextStyle: {
+          color: optionsSetup.subtextColor,
+          fontWeight: optionsSetup.subtextFontWeight,
+          fontSize: optionsSetup.subtextFontSize,
+          fontStyle: optionsSetup.subtextFontStyle,
+          fontFamily: optionsSetup.subtextFontFamily
+        },
+      };
+      this.options.title = title;
+    },
     // 饼图设置
     setOptionsPie() {
       const optionsSetup = this.optionsSetup;
@@ -145,28 +172,6 @@ export default {
       };
       this.options.series[0] = series;
     },
-    // 标题修改
-    setOptionsTitle() {
-      const optionsSetup = this.optionsSetup;
-      const title = {};
-      title.text = optionsSetup.titleText;
-      title.show = optionsSetup.isNoTitle;
-      title.left = optionsSetup.textAlign;
-      title.textStyle = {
-        color: optionsSetup.textColor,
-        fontSize: optionsSetup.textFontSize,
-        fontWeight: optionsSetup.textFontWeight,
-        fontStyle: optionsSetup.textFontStyle,
-      };
-      title.subtext = optionsSetup.subText;
-      title.subtextStyle = {
-        color: optionsSetup.subTextColor,
-        fontWeight: optionsSetup.subTextFontWeight,
-        fontSize: optionsSetup.subTextFontSize,
-        fontStyle: optionsSetup.subTextFontStyle,
-      };
-      this.options.title = title;
-    },
     // 数值设定
     setOptionsValue() {
       const optionsSetup = this.optionsSetup;
@@ -221,16 +226,20 @@ export default {
       const legend = {
         show: optionsSetup.isShowLegend,
         left: optionsSetup.lateralPosition,
-        right: optionsSetup.lateralPosition,
+        //right: optionsSetup.lateralPosition,
         top: optionsSetup.longitudinalPosition,
-        bottom: optionsSetup.longitudinalPosition,
+        //bottom: optionsSetup.longitudinalPosition,
         orient: optionsSetup.layoutFront,
         textStyle: {
           color: optionsSetup.legendColor,
           fontSize: optionsSetup.legendFontSize,
+          fontWeight: optionsSetup.legendFontWeight,
+          fontStyle: optionsSetup.legendFontStyle,
+          fontFamily: optionsSetup.legendFontFamily,
         },
+        itemHeight: optionsSetup.legendHeight,
         itemWidth: optionsSetup.legendWidth,
-      }
+      };
       this.options.legend = legend;
     },
     // 图例颜色修改

+ 35 - 26
report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPiechart.vue

@@ -95,14 +95,41 @@ export default {
   methods: {
     // 修改图标options属性
     editorOptions() {
-      this.setOptionsPie();
       this.setOptionsTitle();
+      this.setOptionsPie();
       this.setOptionsValue();
       this.setOptionsTooltip();
       this.setOptionsLegend();
       this.setOptionsColor();
       this.setOptionsData();
     },
+    // 标题设置
+    setOptionsTitle() {
+      const optionsSetup = this.optionsSetup;
+      const title = {
+        text: optionsSetup.text,
+        show: optionsSetup.isShowTitle,
+        left: optionsSetup.titleLeft,
+        top: optionsSetup.titleTop + "%",
+        itemGap: optionsSetup.titleItemGap,
+        textStyle: {
+          color: optionsSetup.textColor,
+          fontSize: optionsSetup.textFontSize,
+          fontWeight: optionsSetup.textFontWeight,
+          fontStyle: optionsSetup.textFontStyle,
+          fontFamily: optionsSetup.textFontFamily,
+        },
+        subtext: optionsSetup.subtext,
+        subtextStyle: {
+          color: optionsSetup.subtextColor,
+          fontWeight: optionsSetup.subtextFontWeight,
+          fontSize: optionsSetup.subtextFontSize,
+          fontStyle: optionsSetup.subtextFontStyle,
+          fontFamily: optionsSetup.subtextFontFamily
+        },
+      };
+      this.options.title = title;
+    },
     // 饼图设置
     setOptionsPie() {
       const optionsSetup = this.optionsSetup;
@@ -150,28 +177,6 @@ export default {
       };
       this.options.series[0] = series;
     },
-    // 标题设置
-    setOptionsTitle() {
-      const optionsSetup = this.optionsSetup;
-      const title = {};
-      title.text = optionsSetup.titleText;
-      title.show = optionsSetup.isNoTitle;
-      title.left = optionsSetup.textAlign;
-      title.textStyle = {
-        color: optionsSetup.textColor,
-        fontSize: optionsSetup.textFontSize,
-        fontWeight: optionsSetup.textFontWeight,
-        fontStyle: optionsSetup.textFontStyle,
-      };
-      title.subtext = optionsSetup.subText;
-      title.subtextStyle = {
-        color: optionsSetup.subTextColor,
-        fontWeight: optionsSetup.subTextFontWeight,
-        fontSize: optionsSetup.subTextFontSize,
-        fontStyle: optionsSetup.subTextFontStyle,
-      };
-      this.options.title = title;
-    },
     // 数值设定
     setOptionsValue() {
       const optionsSetup = this.optionsSetup;
@@ -226,16 +231,20 @@ export default {
       const legend = {
         show: optionsSetup.isShowLegend,
         left: optionsSetup.lateralPosition,
-        right: optionsSetup.lateralPosition,
+        //right: optionsSetup.lateralPosition,
         top: optionsSetup.longitudinalPosition,
-        bottom: optionsSetup.longitudinalPosition,
+        //bottom: optionsSetup.longitudinalPosition,
         orient: optionsSetup.layoutFront,
         textStyle: {
           color: optionsSetup.legendColor,
           fontSize: optionsSetup.legendFontSize,
+          fontWeight: optionsSetup.legendFontWeight,
+          fontStyle: optionsSetup.legendFontStyle,
+          fontFamily: optionsSetup.legendFontFamily,
         },
+        itemHeight: optionsSetup.legendHeight,
         itemWidth: optionsSetup.legendWidth,
-      }
+      };
       this.options.legend = legend;
     },
     // 图例颜色修改

+ 27 - 17
report-ui/src/views/bigscreenDesigner/designer/widget/radar/widgetRadar.vue

@@ -78,22 +78,27 @@ export default {
     // 标题修改
     setOptionsTitle() {
       const optionsSetup = this.optionsSetup;
-      const title = {};
-      title.text = optionsSetup.titleText;
-      title.show = optionsSetup.isNoTitle;
-      title.left = optionsSetup.textAlign;
-      title.textStyle = {
-        color: optionsSetup.textColor,
-        fontSize: optionsSetup.textFontSize,
-        fontWeight: optionsSetup.textFontWeight,
-        fontStyle: optionsSetup.textFontStyle,
-      };
-      title.subtext = optionsSetup.subText;
-      title.subtextStyle = {
-        color: optionsSetup.subTextColor,
-        fontWeight: optionsSetup.subTextFontWeight,
-        fontSize: optionsSetup.subTextFontSize,
-        fontStyle: optionsSetup.subTextFontStyle,
+      const title = {
+        text: optionsSetup.text,
+        show: optionsSetup.isShowTitle,
+        left: optionsSetup.titleLeft,
+        top: optionsSetup.titleTop + "%",
+        itemGap: optionsSetup.titleItemGap,
+        textStyle: {
+          color: optionsSetup.textColor,
+          fontSize: optionsSetup.textFontSize,
+          fontWeight: optionsSetup.textFontWeight,
+          fontStyle: optionsSetup.textFontStyle,
+          fontFamily: optionsSetup.textFontFamily,
+        },
+        subtext: optionsSetup.subtext,
+        subtextStyle: {
+          color: optionsSetup.subtextColor,
+          fontWeight: optionsSetup.subtextFontWeight,
+          fontSize: optionsSetup.subtextFontSize,
+          fontStyle: optionsSetup.subtextFontStyle,
+          fontFamily: optionsSetup.subtextFontFamily
+        },
       };
       this.options.title = title;
     },
@@ -134,13 +139,18 @@ export default {
       const legend = {
         show: optionsSetup.isShowLegend,
         left: optionsSetup.lateralPosition,
+        //right: optionsSetup.lateralPosition,
         top: optionsSetup.longitudinalPosition,
-        bottom: optionsSetup.longitudinalPosition,
+        //bottom: optionsSetup.longitudinalPosition,
         orient: optionsSetup.layoutFront,
         textStyle: {
           color: optionsSetup.legendColor,
           fontSize: optionsSetup.legendFontSize,
+          fontWeight: optionsSetup.legendFontWeight,
+          fontStyle: optionsSetup.legendFontStyle,
+          fontFamily: optionsSetup.legendFontFamily,
         },
+        itemHeight: optionsSetup.legendHeight,
         itemWidth: optionsSetup.legendWidth,
       };
       this.options.legend = legend;