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 44873163..2b052395 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue @@ -151,18 +151,6 @@ 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: { @@ -406,6 +394,30 @@ export default { series[i].data = data; } } + // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字 + const wordNum = parseInt((this.optionsStyle.width / axis.length) / optionsSetup.fontSizeX); + const axisLabel = { + show: true, + interval: optionsSetup.textInterval, + // 文字角度 + rotate: optionsSetup.textAngleX, + textStyle: { + // 坐标文字颜色 + color: optionsSetup.colorX, + fontSize: optionsSetup.fontSizeX, + }, + // 自动换行 + formatter: function (value, index) { + const strs = value.split(''); + let str = '' + for (let i = 0, s; s = strs[i++];) { + str += s; + if (!(i % wordNum)) str += '\n'; + } + return str + } + } + this.options.xAxis.axisLabel = axisLabel; this.options.legend["data"] = legendName; this.setOptionsLegendName(legendName); }, @@ -502,6 +514,30 @@ export default { series.push(obj); } } + // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字 + const wordNum = parseInt((this.optionsStyle.width / val.xAxis.length) / optionsSetup.fontSizeX); + const axisLabel = { + show: true, + interval: optionsSetup.textInterval, + // 文字角度 + rotate: optionsSetup.textAngleX, + textStyle: { + // 坐标文字颜色 + color: optionsSetup.colorX, + fontSize: optionsSetup.fontSizeX, + }, + // 自动换行 + formatter: function (value, index) { + const strs = value.split(''); + let str = '' + for (let i = 0, s; s = strs[i++];) { + str += s; + if (!(i % wordNum)) str += '\n'; + } + return str + } + } + this.options.xAxis.axisLabel = axisLabel; this.options.series = series; this.options.legend["data"] = legendName; this.setOptionsLegendName(legendName);