浏览代码

feat--雷达图优化

qianming 1 年之前
父节点
当前提交
d47f8dd8b1

+ 4 - 4
report-ui/src/views/bigscreenDesigner/designer/components/dynamicAddRadar.vue

@@ -9,10 +9,10 @@
     >新增</el-button
     >
     <el-table :data="formData" style="width: 100%">
-      <el-table-column prop="name" label="名称" width="100" />
-      <el-table-column prop="key" label="key值" width="100" />
-      <el-table-column prop="max" label="最大值" width="100" />
-      <el-table-column label="操作" width="100">
+      <el-table-column prop="name" label="名称" width="90" />
+      <el-table-column prop="key" label="key值" width="90" />
+      <el-table-column prop="max" label="最大值" width="70" />
+      <el-table-column label="操作" width="90">
         <template slot-scope="scope">
           <div class="button-group">
             <el-button

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

@@ -616,6 +616,14 @@ export const widgetPieNightingale = {
         {
           name: '提示语设置',
           list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShowTooltip',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
             {
               type: 'el-input-number',
               label: '字体字号',

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

@@ -604,10 +604,18 @@ export const widgetPiechart = {
         {
           name: '提示语设置',
           list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShowTooltip',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
             {
               type: 'el-input-number',
               label: '字体字号',
-              name: 'tipsFontSize',
+              name: 'tooltipFontSize',
               required: false,
               placeholder: '',
               value: 16
@@ -615,7 +623,7 @@ export const widgetPiechart = {
             {
               type: 'vue-color',
               label: '字体颜色',
-              name: 'tipsColor',
+              name: 'tooltipColor',
               required: false,
               placeholder: '',
               value: '#00FEFF'
@@ -623,7 +631,7 @@ export const widgetPiechart = {
             {
               type: 'el-select',
               label: '字体粗细',
-              name: 'tipsFontWeight',
+              name: 'tooltipFontWeight',
               required: false,
               placeholder: '',
               selectOptions: [
@@ -637,7 +645,7 @@ export const widgetPiechart = {
             {
               type: 'el-select',
               label: '字体风格',
-              name: 'tipsFontStyle',
+              name: 'tooltipFontStyle',
               required: false,
               placeholder: '',
               selectOptions: [
@@ -650,7 +658,7 @@ export const widgetPiechart = {
             {
               type: 'el-select',
               label: '字体系列',
-              name: 'tipsFontFamily',
+              name: 'tooltipFontFamily',
               required: false,
               placeholder: '',
               selectOptions: [

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

@@ -376,6 +376,32 @@ export const widgetRadar = {
               placeholder: '',
               value: false
             },
+            {
+              type: 'el-select',
+              label: '位置',
+              name: 'fontPosition',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'top', name: '上' },
+                { code: 'left', name: '左' },
+                { code: 'right', name: '右' },
+                { code: 'inside', name: '里' },
+                { code: 'insideTop', name: '里顶' },
+                { code: 'insideLeft', name: '里左' },
+                { code: 'insideRight', name: '里右' },
+                { code: 'insideBottom', name: '里底' },
+              ],
+              value: 'insideTop'
+            },
+            {
+              type: 'el-input-number',
+              label: '距离',
+              name: 'fontDistance',
+              required: false,
+              placeholder: '',
+              value: 0
+            },
             {
               type: 'el-input-number',
               label: '字体字号',
@@ -387,10 +413,10 @@ export const widgetRadar = {
             {
               type: 'vue-color',
               label: '字体颜色',
-              name: 'dataColor',
+              name: 'fontColor',
               required: false,
               placeholder: '',
-              value: '#fff'
+              value: ''
             },
             {
               type: 'el-select',
@@ -406,6 +432,33 @@ export const widgetRadar = {
               ],
               value: 'normal'
             },
+            {
+              type: 'el-select',
+              label: '字体风格',
+              name: 'fontStyle',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'normal', name: '正常' },
+                { code: 'italic', name: 'italic斜体' },
+                { code: 'oblique', name: 'oblique斜体' },
+              ],
+              value: 'normal'
+            },
+            {
+              type: 'el-select',
+              label: '字体系列',
+              name: 'fontFamily',
+              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: '点大小',
@@ -414,6 +467,14 @@ export const widgetRadar = {
               placeholder: '',
               value: 5
             },
+            {
+              type: 'el-input-number',
+              label: '线条宽度',
+              name: 'lineWidth',
+              required: false,
+              placeholder: '',
+              value: 1,
+            },
             {
               type: 'el-select',
               label: '线型效果',
@@ -422,8 +483,8 @@ export const widgetRadar = {
               placeholder: '',
               selectOptions: [
                 { code: 'solid', name: '实线' },
-                { code: 'dashed', name: '线型虚线' },
-                { code: 'dotted', name: '点型虚线' },
+                { code: 'dashed', name: '虚线' },
+                { code: 'dotted', name: '点' },
               ],
               value: 'solid'
             },
@@ -440,10 +501,18 @@ export const widgetRadar = {
         {
           name: '提示语设置',
           list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShowTooltip',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
             {
               type: 'el-input-number',
               label: '字体字号',
-              name: 'tipsFontSize',
+              name: 'tooltipFontSize',
               required: false,
               placeholder: '',
               value: 16
@@ -451,11 +520,52 @@ export const widgetRadar = {
             {
               type: 'vue-color',
               label: '字体颜色',
-              name: 'tipsColor',
+              name: 'tooltipColor',
               required: false,
               placeholder: '',
               value: '#00FEFF'
             },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'tooltipFontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'normal', name: '正常' },
+                { code: 'bold', name: '粗体' },
+                { code: 'bolder', name: '特粗体' },
+                { code: 'lighter', name: '细体' }
+              ],
+              value: 'normal'
+            },
+            {
+              type: 'el-select',
+              label: '字体风格',
+              name: 'tooltipFontStyle',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'normal', name: '正常' },
+                { code: 'italic', name: 'italic斜体' },
+                { code: 'oblique', name: 'oblique斜体' },
+              ],
+              value: 'normal'
+            },
+            {
+              type: 'el-select',
+              label: '字体系列',
+              name: 'tooltipFontFamily',
+              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'
+            },
           ],
         },
         {

+ 6 - 5
report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPieNightingaleRose.vue

@@ -204,12 +204,13 @@ export default {
       const optionsSetup = this.optionsSetup;
       const tooltip = {
         trigger: "item",
+        show: optionsSetup.isShowTooltip,
         textStyle: {
-          color: optionsSetup.tipsColor,
-          fontSize: optionsSetup.tipsFontSize,
-          fontWeight: optionsSetup.tipsFontWeight,
-          fontStyle: optionsSetup.tipsFontStyle,
-          fontFamily: optionsSetup.tipsFontFamily,
+          color: optionsSetup.tooltipColor,
+          fontSize: optionsSetup.tooltipFontSize,
+          fontWeight: optionsSetup.tooltipFontWeight,
+          fontStyle: optionsSetup.tooltipFontStyle,
+          fontFamily: optionsSetup.tooltipFontFamily,
         },
       };
       this.options.tooltip = tooltip;

+ 6 - 5
report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPiechart.vue

@@ -209,12 +209,13 @@ export default {
       const optionsSetup = this.optionsSetup;
       const tooltip = {
         trigger: "item",
+        show: optionsSetup.isShowTooltip,
         textStyle: {
-          color: optionsSetup.tipsColor,
-          fontSize: optionsSetup.tipsFontSize,
-          fontWeight: optionsSetup.tipsFontWeight,
-          fontStyle: optionsSetup.tipsFontStyle,
-          fontFamily: optionsSetup.tipsFontFamily,
+          color: optionsSetup.tooltipColor,
+          fontSize: optionsSetup.tooltipFontSize,
+          fontWeight: optionsSetup.tooltipFontWeight,
+          fontStyle: optionsSetup.tooltipFontStyle,
+          fontFamily: optionsSetup.tooltipFontFamily,
         },
       };
       this.options.tooltip = tooltip;

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

@@ -169,10 +169,13 @@ export default {
       const optionsSetup = this.optionsSetup;
       const tooltip = {
         trigger: "item",
-        show: true,
+        show: optionsSetup.isShowTooltip,
         textStyle: {
-          color: optionsSetup.tipsColor,
-          fontSize: optionsSetup.tipsFontSize,
+          color: optionsSetup.tooltipColor,
+          fontSize: optionsSetup.tooltipFontSize,
+          fontWeight: optionsSetup.tooltipFontWeight,
+          fontStyle: optionsSetup.tooltipFontStyle,
+          fontFamily: optionsSetup.tooltipFontFamily,
         },
       };
       this.options.tooltip = tooltip;
@@ -249,14 +252,17 @@ export default {
           value: values,
           label: {
             show: optionsSetup.isShow,
-            position: "top",
-            distance: 10,
+            position: optionsSetup.fontPosition,
+            distance: optionsSetup.fontDistance,
             fontSize: optionsSetup.fontSize,
-            color: optionsSetup.dataColor,
+            color: optionsSetup.fontColor == '' ? null : optionsSetup.fontColor,
             fontWeight: optionsSetup.fontWeight,
+            fontStyle: optionsSetup.fontStyle,
+            fontFamily: optionsSetup.fontFamily,
           },
           lineStyle: {
             normal: {
+              width: optionsSetup.lineWidth,
               type: optionsSetup.lineType,
               color: arrColor[i],
             },
@@ -331,11 +337,13 @@ export default {
           value: values,
           label: {
             show: optionsSetup.isShow,
-            position: "top",
-            distance: 10,
+            position: optionsSetup.fontPosition,
+            distance: optionsSetup.fontDistance,
             fontSize: optionsSetup.fontSize,
-            color: optionsSetup.dataColor,
+            color: optionsSetup.fontColor == '' ? null : optionsSetup.fontColor,
             fontWeight: optionsSetup.fontWeight,
+            fontStyle: optionsSetup.fontStyle,
+            fontFamily: optionsSetup.fontFamily,
           },
           lineStyle: {
             normal: {