diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-stack.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-stack.js index b17c0f31..56c364b2 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-stack.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-stack.js @@ -403,6 +403,14 @@ export const widgetBarStack = { placeholder: '', value: 14, }, + { + type: 'el-switch', + label: '数值自动换行', + name: 'textRowsBreakAuto', + required: false, + placeholder: '', + value: false, + }, { type: 'el-input-text', label: '数值行数', diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-barchart.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-barchart.js index dba16319..d72178e3 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-barchart.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-barchart.js @@ -411,6 +411,14 @@ export const widgetBarchart = { placeholder: '', value: 14, }, + { + type: 'el-switch', + label: '数值自动换行', + name: 'textRowsBreakAuto', + required: false, + placeholder: '', + value: false, + }, { type: 'el-input-text', label: '数值行数', diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-gradient-barchart.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-gradient-barchart.js index 921c66c6..c273deba 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-gradient-barchart.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-gradient-barchart.js @@ -309,6 +309,14 @@ export const widgetGradientBarchart = { placeholder: '', value: 14, }, + { + type: 'el-switch', + label: '数值自动换行', + name: 'textRowsBreakAuto', + required: false, + placeholder: '', + value: false, + }, { type: 'el-input-text', label: '数值行数', diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackChart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackChart.vue index 7407a4cf..b53de705 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackChart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackChart.vue @@ -144,6 +144,17 @@ export default { }, // 轴反转 inverse: optionsSetup.reversalX, + axisLabel: { + show: true, + interval: optionsSetup.textInterval, + // 文字角度 + rotate: optionsSetup.textAngleX, + textStyle: { + // 坐标文字颜色 + color: optionsSetup.colorX, + fontSize: optionsSetup.fontSizeX, + }, + }, axisLine: { show: true, lineStyle: { @@ -382,17 +393,6 @@ export default { 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"; - } // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字 const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisList.length) / optionsSetup.fontSizeX); const axisLabel = { @@ -416,7 +416,20 @@ export default { return str } } - this.options.xAxis.axisLabel = axisLabel; + 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"; + if (optionsSetup.textRowsBreakAuto) { + this.options.xAxis.axisLabel = axisLabel; + } + } this.options.legend["data"] = legendName; this.setOptionsLegendName(legendName); }, @@ -445,18 +458,6 @@ export default { 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) { @@ -523,7 +524,21 @@ export default { return str } } - this.options.xAxis.axisLabel = axisLabel; + // 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"; + if (optionsSetup.textRowsBreakAuto) { + this.options.xAxis.axisLabel = axisLabel; + } + } this.options.series = series; this.options.legend["data"] = legendName; this.setOptionsLegendName(legendName); diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue index 0103eadb..db09eb3b 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue @@ -151,7 +151,7 @@ export default { }, // 轴反转 inverse: optionsSetup.reversalX, - axisLabel : { + axisLabel: { show: true, interval: optionsSetup.textInterval, // 文字角度 @@ -427,7 +427,9 @@ export default { this.options.yAxis.data = []; this.options.xAxis.type = "category"; this.options.yAxis.type = "value"; - this.options.xAxis.axisLabel = axisLabel; + if (optionsSetup.textRowsBreakAuto) { + this.options.xAxis.axisLabel = axisLabel; + } } this.options.legend["data"] = legendName; this.setOptionsLegendName(legendName); @@ -548,7 +550,9 @@ export default { this.options.yAxis.data = []; this.options.xAxis.type = "category"; this.options.yAxis.type = "value"; - this.options.xAxis.axisLabel = axisLabel; + if (optionsSetup.textRowsBreakAuto) { + this.options.xAxis.axisLabel = axisLabel; + } } this.options.series = series; this.options.legend["data"] = legendName; diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue index 54eb6897..76909000 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue @@ -227,6 +227,17 @@ export default { }, // 轴反转 inverse: optionsSetup.reversalX, + axisLabel: { + show: true, + interval: optionsSetup.textInterval, + // 文字角度 + rotate: optionsSetup.textAngleX, + textStyle: { + // 坐标文字颜色 + color: optionsSetup.colorX, + fontSize: optionsSetup.fontSizeX, + }, + }, axisLine: { show: true, lineStyle: { @@ -429,21 +440,6 @@ export default { 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; - } // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字 const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / axis.length) / optionsSetup.fontSizeX); const axisLabel = { @@ -467,7 +463,24 @@ export default { return str } } - this.options.xAxis.axisLabel = axisLabel; + // 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 (optionsSetup.textRowsBreakAuto) { + this.options.xAxis.axisLabel = axisLabel; + } + } + if (series[0].type == "bar") { + series[0].data = data; + } }, // 动态数据 dynamicDataFn(refreshTime) { @@ -491,22 +504,6 @@ export default { }); }, 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"; - } - const series = this.options.series; - if (series[0].type == "bar") { - series[0].data = val.series[0].data; - } // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字 const xAxisDataLength = val.length !== 0 ? val.xAxis.length : 1; const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.fontSizeX); @@ -531,7 +528,25 @@ export default { return str } } - this.options.xAxis.axisLabel = axisLabel; + // 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"; + if (optionsSetup.textRowsBreakAuto) { + this.options.xAxis.axisLabel = axisLabel; + } + } + const series = this.options.series; + if (series[0].type == "bar") { + series[0].data = val.series[0].data; + } }, }, };