feat--雷达图优化

2026-02-02 09:27:47 +08:00 · 2023-12-05 14:22:03 +08:00
parent 9082f48457
commit d47f8dd8b1
7 changed files with 170 additions and 34 deletions
--- a/report-ui/src/views/bigscreenDesigner/designer/components/dynamicAddRadar.vue
+++ b/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
--- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-pie-nightingale.js
+++ b/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: '字体字号',
--- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-piechart.js
+++ b/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: [
--- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/radarCharts/widget-radar.js
+++ b/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'
+            },
          ],
        },
        {
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPieNightingaleRose.vue
+++ b/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;
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPiechart.vue
+++ b/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;
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/radar/widgetRadar.vue
+++ b/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: {