feat--柱状图提示语/数值设定优化

report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-compare.js

@@ -702,6 +702,40 @@ export const widgetBarCompare = {
         {
           name: '提示语设置',
           list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShowTooltip',
+              required: false,
+              placeholder: '',
+              value: true
+            },
+            {
+              type: 'el-select',
+              label: '触发类型',
+              name: 'tooltipTrigger',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'item', name: '数据项' },
+                { code: 'axis', name: '坐标轴' },
+              ],
+              value: 'axis'
+            },
+            {
+              type: 'el-select',
+              label: '指示器类型',
+              name: 'tooltipAxisPointerType',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'none', name: '无' },
+                { code: 'line', name: '直线' },
+                { code: 'shadow', name: '阴影' },
+                { code: 'cross', name: '十字准星' },
+              ],
+              value: 'shadow'
+            },
             {
               type: 'el-input-number',
               label: '字体字号',

report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-double-yaxis-chart.js

@@ -742,13 +742,31 @@ export const widgetBarDoubleYaxis = {
               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: 'distance',
+              name: 'fontDistance',
               required: false,
               placeholder: '',
-              value: 5
+              value: 0
             },
             {
               type: 'el-input-number',
@@ -785,6 +803,40 @@ export const widgetBarDoubleYaxis = {
         {
           name: '提示语设置',
           list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShowTooltip',
+              required: false,
+              placeholder: '',
+              value: true
+            },
+            {
+              type: 'el-select',
+              label: '触发类型',
+              name: 'tooltipTrigger',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'item', name: '数据项' },
+                { code: 'axis', name: '坐标轴' },
+              ],
+              value: 'axis'
+            },
+            {
+              type: 'el-select',
+              label: '指示器类型',
+              name: 'tooltipAxisPointerType',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'none', name: '无' },
+                { code: 'line', name: '直线' },
+                { code: 'shadow', name: '阴影' },
+                { code: 'cross', name: '十字准星' },
+              ],
+              value: 'shadow'
+            },
             {
               type: 'el-input-number',
               label: '字体字号',

report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-stack-more-show.js

@@ -671,6 +671,40 @@ export const widgetBarStackMoreShow = {
         {
           name: '提示语设置',
           list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShowTooltip',
+              required: false,
+              placeholder: '',
+              value: true
+            },
+            {
+              type: 'el-select',
+              label: '触发类型',
+              name: 'tooltipTrigger',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'item', name: '数据项' },
+                { code: 'axis', name: '坐标轴' },
+              ],
+              value: 'axis'
+            },
+            {
+              type: 'el-select',
+              label: '指示器类型',
+              name: 'tooltipAxisPointerType',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'none', name: '无' },
+                { code: 'line', name: '直线' },
+                { code: 'shadow', name: '阴影' },
+                { code: 'cross', name: '十字准星' },
+              ],
+              value: 'shadow'
+            },
             {
               type: 'el-input-number',
               label: '字体字号',

report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-stack.js

@@ -71,6 +71,14 @@ export const widgetBarStack = {
               placeholder: '',
               value: 5,
             },
+            {
+              type: 'el-slider',
+              label: '间距',
+              name: 'barGap',
+              required: false,
+              placeholder: '',
+              value: 0,
+            },
             {
               type: 'el-switch',
               label: '背景显示',
@@ -637,6 +645,32 @@ export const widgetBarStack = {
               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: '字体字号',
@@ -672,6 +706,40 @@ export const widgetBarStack = {
         {
           name: '提示语设置',
           list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShowTooltip',
+              required: false,
+              placeholder: '',
+              value: true
+            },
+            {
+              type: 'el-select',
+              label: '触发类型',
+              name: 'tooltipTrigger',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'item', name: '数据项' },
+                { code: 'axis', name: '坐标轴' },
+              ],
+              value: 'axis'
+            },
+            {
+              type: 'el-select',
+              label: '指示器类型',
+              name: 'tooltipAxisPointerType',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'none', name: '无' },
+                { code: 'line', name: '直线' },
+                { code: 'shadow', name: '阴影' },
+                { code: 'cross', name: '十字准星' },
+              ],
+              value: 'shadow'
+            },
             {
               type: 'el-input-number',
               label: '字体字号',

report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-barchart.js

@@ -645,13 +645,31 @@ export const widgetBarchart = {
               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: 'distance',
+              name: 'fontDistance',
               required: false,
               placeholder: '',
-              value: 5
+              value: 0
             },
             {
               type: 'el-input-number',
@@ -688,6 +706,40 @@ export const widgetBarchart = {
         {
           name: '提示语设置',
           list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShowTooltip',
+              required: false,
+              placeholder: '',
+              value: true
+            },
+            {
+              type: 'el-select',
+              label: '触发类型',
+              name: 'tooltipTrigger',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'item', name: '数据项' },
+                { code: 'axis', name: '坐标轴' },
+              ],
+              value: 'axis'
+            },
+            {
+              type: 'el-select',
+              label: '指示器类型',
+              name: 'tooltipAxisPointerType',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'none', name: '无' },
+                { code: 'line', name: '直线' },
+                { code: 'shadow', name: '阴影' },
+                { code: 'cross', name: '十字准星' },
+              ],
+              value: 'shadow'
+            },
             {
               type: 'el-input-number',
               label: '字体字号',

report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-gradient-barchart.js

@@ -527,13 +527,31 @@ export const widgetGradientBarchart = {
               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: 'distance',
+              name: 'fontDistance',
               required: false,
               placeholder: '',
-              value: 5
+              value: 0
             },
             {
               type: 'el-input-number',
@@ -570,6 +588,40 @@ export const widgetGradientBarchart = {
         {
           name: '提示语设置',
           list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShowTooltip',
+              required: false,
+              placeholder: '',
+              value: true
+            },
+            {
+              type: 'el-select',
+              label: '触发类型',
+              name: 'tooltipTrigger',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'item', name: '数据项' },
+                { code: 'axis', name: '坐标轴' },
+              ],
+              value: 'axis'
+            },
+            {
+              type: 'el-select',
+              label: '指示器类型',
+              name: 'tooltipAxisPointerType',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'none', name: '无' },
+                { code: 'line', name: '直线' },
+                { code: 'shadow', name: '阴影' },
+                { code: 'cross', name: '十字准星' },
+              ],
+              value: 'shadow'
+            },
             {
               type: 'el-input-number',
               label: '字体字号',

report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarCompareChart.vue

@@ -477,8 +477,11 @@ export default {
     setOptionsTooltip() {
       const optionsSetup = this.optionsSetup;
       const tooltip = {
-        trigger: "item",
-        show: true,
+        show: optionsSetup.isShowTooltip,
+        trigger: optionsSetup.tooltipTrigger,
+        axisPointer: {
+          type: optionsSetup.tooltipAxisPointerType,
+        },
         textStyle: {
           color: optionsSetup.tipsColor,
           fontSize: optionsSetup.tipsFontSize,

report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarDoubleYaxisChart.vue

@@ -314,8 +314,8 @@ export default {
         if (series[key].type == "bar") {
           series[key].label = {
             show: optionsSetup.isShow,
-            position: "top",
-            distance: optionsSetup.distance,
+            position: optionsSetup.fontPosition,
+            distance: optionsSetup.fontDistance,
             fontSize: optionsSetup.fontSize,
             color: optionsSetup.dataColor,
             fontWeight: optionsSetup.fontWeight,
@@ -342,8 +342,11 @@ export default {
     setOptionsTooltip() {
       const optionsSetup = this.optionsSetup;
       const tooltip = {
-        trigger: "item",
-        show: true,
+        show: optionsSetup.isShowTooltip,
+        trigger: optionsSetup.tooltipTrigger,
+        axisPointer: {
+          type: optionsSetup.tooltipAxisPointerType,
+        },
         textStyle: {
           color: optionsSetup.tipsColor,
           fontSize: optionsSetup.tipsFontSize,

report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackChart.vue

@@ -222,8 +222,11 @@ export default {
     setOptionsTooltip() {
       const optionsSetup = this.optionsSetup;
       const tooltip = {
-        trigger: "item",
-        show: true,
+        show: optionsSetup.isShowTooltip,
+        trigger: optionsSetup.tooltipTrigger,
+        axisPointer: {
+          type: optionsSetup.tooltipAxisPointerType,
+        },
         textStyle: {
           color: optionsSetup.tipsColor,
           fontSize: optionsSetup.tipsFontSize,
@@ -359,13 +362,13 @@ export default {
           name: yAxisList[i],
           type: "bar",
           data: data,
-          barGap: "0%",
+          barGap: optionsSetup.barGap + "%",
           stack: this.getStackStyle(),
           barWidth: optionsSetup.maxWidth,
           label: {
             show: optionsSetup.isShow,
-            position: "top",
-            distance: 10,
+            position: optionsSetup.fontPosition,
+            distance: optionsSetup.fontDistance,
             fontSize: optionsSetup.fontSize,
             color: optionsSetup.dataColor,
             fontWeight: optionsSetup.fontWeight,
@@ -466,13 +469,13 @@ export default {
             name: val.series[i].name,
             type: "bar",
             data: val.series[i].data,
-            barGap: "0%",
+            barGap: optionsSetup.barGap + "%",
             stack: this.getStackStyle(),
             barWidth: optionsSetup.maxWidth,
             label: {
               show: optionsSetup.isShow,
-              position: "top",
-              distance: 10,
+              position: optionsSetup.fontPosition,
+              distance: optionsSetup.fontDistance,
               fontSize: optionsSetup.fontSize,
               color: optionsSetup.dataColor,
               fontWeight: optionsSetup.fontWeight,

report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackMoreShowChart.vue

@@ -222,8 +222,11 @@ export default {
     setOptionsTooltip() {
       const optionsSetup = this.optionsSetup;
       const tooltip = {
-        trigger: "item",
-        show: true,
+        show: optionsSetup.isShowTooltip,
+        trigger: optionsSetup.tooltipTrigger,
+        axisPointer:{
+          type: optionsSetup.tooltipAxisPointerType,
+        },
         textStyle: {
           color: optionsSetup.tipsColor,
           fontSize: optionsSetup.tipsFontSize,

report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue

@@ -229,8 +229,11 @@ export default {
     setOptionsTooltip() {
       const optionsSetup = this.optionsSetup;
       const tooltip = {
-        trigger: "item",
-        show: true,
+        show: optionsSetup.isShowTooltip,
+        trigger: optionsSetup.tooltipTrigger,
+        axisPointer:{
+          type: optionsSetup.tooltipAxisPointerType,
+        },
         textStyle: {
           color: optionsSetup.tipsColor,
           fontSize: optionsSetup.tipsFontSize,
@@ -293,17 +296,6 @@ export default {
       }
       return style;
     },
-    // 获得位置
-    getOptionsPosition() {
-      const optionsSetup = this.optionsSetup;
-      let position = "";
-      if (optionsSetup.verticalShow) {
-        position = "right";
-      } else {
-        position = "top";
-      }
-      return position;
-    },
     // 数据解析
     setOptionsData(e, paramsConfig) {
       const optionsData = this.optionsData; // 数据类型 静态 or 动态
@@ -354,8 +346,8 @@ export default {
           series[i].barMinHeight = optionsSetup.minHeight;
           series[i].label = {
             show: optionsSetup.isShow,
-            position: this.getOptionsPosition(),
-            distance: optionsSetup.distance,
+            position: optionsSetup.fontPosition,
+            distance: optionsSetup.fontDistance,
             fontSize: optionsSetup.fontSize,
             color: optionsSetup.dataColor,
             fontWeight: optionsSetup.fontWeight,
@@ -475,8 +467,8 @@ export default {
           obj.barMinHeight = optionsSetup.minHeight;
           obj.label = {
             show: optionsSetup.isShow,
-            position: this.getOptionsPosition(),
-            distance: optionsSetup.distance,
+            position: optionsSetup.fontPosition,
+            distance: optionsSetup.fontDistance,
             fontSize: optionsSetup.fontSize,
             color: optionsSetup.dataColor,
             fontWeight: optionsSetup.fontWeight,

report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue

@@ -306,27 +306,15 @@ export default {
       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.dataColor,
-            fontWeight: optionsSetup.fontWeight,
-            formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}'
-          };
-        } else {
-          series[0].label = {
-            show: optionsSetup.isShow,
-            position: "top",
-            distance: optionsSetup.distance,
-            fontSize: optionsSetup.fontSize,
-            color: optionsSetup.dataColor,
-            fontWeight: optionsSetup.fontWeight,
-            formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}'
-          };
-        }
+        series[0].label = {
+          show: optionsSetup.isShow,
+          position: optionsSetup.fontPosition,
+          distance: optionsSetup.fontDistance,
+          fontSize: optionsSetup.fontSize,
+          color: optionsSetup.dataColor,
+          fontWeight: optionsSetup.fontWeight,
+          formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}'
+        };
         series[0].barWidth = optionsSetup.maxWidth;
         //柱体背景属性
         series[0].showBackground = optionsSetup.isShowBackground;
@@ -345,8 +333,11 @@ export default {
     setOptionsTooltip() {
       const optionsSetup = this.optionsSetup;
       const tooltip = {
-        trigger: "item",
-        show: true,
+        show: optionsSetup.isShowTooltip,
+        trigger: optionsSetup.tooltipTrigger,
+        axisPointer: {
+          type: optionsSetup.tooltipAxisPointerType,
+        },
         textStyle: {
           color: optionsSetup.tipsColor,
           fontSize: optionsSetup.tipsFontSize,