diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarDoubleYaxisChart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarDoubleYaxisChart.vue index 7689a572..5e27475a 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarDoubleYaxisChart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarDoubleYaxisChart.vue @@ -1,6 +1,6 @@ @@ -185,18 +185,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: { @@ -434,6 +422,7 @@ export default { : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime); }, staticDataFn(val) { + const optionsSetup = this.optionsSetup; const series = this.options.series; let axis = []; let bar1 = []; @@ -452,6 +441,30 @@ export default { const legendName = []; legendName.push("bar1"); legendName.push("bar2"); + // 根据图表的宽度 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); }, @@ -473,18 +486,47 @@ export default { }); }, renderingFn(val) { + const optionsSetup = this.optionsSetup; this.options.xAxis.data = val.xAxis; // series const series = this.options.series; const legendName = []; let k = 0; - for (const i in val.series){ + for (const i in val.series) { if (val.series[i].type == "bar") { series[k]['data'] = val.series[i].data; k++ legendName.push(val.series[i].name); } } + // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字 + let xAxisDataLength = 1; + if (val.length !== 0){ + xAxisDataLength = val.xAxis.length; + } + const wordNum = parseInt((this.optionsStyle.width / xAxisDataLength) / 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); }, 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 e824346d..21830d9e 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackChart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackChart.vue @@ -144,18 +144,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: { @@ -405,6 +393,30 @@ export default { this.options.xAxis.type = "category"; this.options.yAxis.type = "value"; } + // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字 + const wordNum = parseInt((this.optionsStyle.width / xAxisList.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); }, @@ -487,6 +499,34 @@ export default { } legendName.push(val.series[i].name); } + // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字 + let xAxisDataLength = 1; + if (val.length !== 0){ + xAxisDataLength = val.xAxis.length; + } + const wordNum = parseInt((this.optionsStyle.width / xAxisDataLength) / 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); 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 2b052395..144c54b1 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue @@ -515,7 +515,11 @@ export default { } } // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字 - const wordNum = parseInt((this.optionsStyle.width / val.xAxis.length) / optionsSetup.fontSizeX); + let xAxisDataLength = 1; + if (val.length !== 0){ + xAxisDataLength = val.xAxis.length; + } + const wordNum = parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.fontSizeX); const axisLabel = { show: true, interval: optionsSetup.textInterval, 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 b48c5875..15e891b5 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue @@ -17,7 +17,6 @@ export default { props: { value: Object, ispreview: Boolean, - flagInter: null, widgetIndex: { type: Number, default: 0, @@ -228,18 +227,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: { @@ -457,6 +444,30 @@ export default { if (series[0].type == "bar") { series[0].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; }, // 动态数据 dynamicDataFn(refreshTime) { @@ -492,14 +503,38 @@ export default { this.options.xAxis.type = "category"; this.options.yAxis.type = "value"; } - - // series const series = this.options.series; - for (const i in series) { - if (series[i].type == "bar") { - series[i].data = val.series[i].data; + if (series[0].type == "bar") { + series[0].data = val.series[0].data; + } + // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字 + let xAxisDataLength = 1; + if (val.length !== 0){ + xAxisDataLength = val.xAxis.length; + } + const wordNum = parseInt((this.optionsStyle.width / xAxisDataLength) / 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; }, }, }; diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarLineStackChart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarLineStackChart.vue index 5ae6d9b8..2c39c30d 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarLineStackChart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarLineStackChart.vue @@ -179,18 +179,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: { @@ -505,6 +493,30 @@ export default { }, }); } + // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字 + const wordNum = parseInt((this.optionsStyle.width / xAxisList.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.xAxis.data = xAxisList; this.options.yAxis.data = []; @@ -611,6 +623,34 @@ export default { }, }); } + // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字 + let xAxisDataLength = 1; + if (val.length !== 0){ + xAxisDataLength = val.xAxis.length; + } + const wordNum = parseInt((this.optionsStyle.width / xAxisDataLength) / 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); diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarlinechart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarlinechart.vue index 12859cf3..e90b4500 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarlinechart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarlinechart.vue @@ -13,7 +13,6 @@ export default { props: { value: Object, ispreview: Boolean, - flagInter: null, }, data() { return { @@ -187,18 +186,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: { @@ -482,6 +469,31 @@ export default { const legendName = []; legendName.push("bar"); legendName.push("line"); + const optionsSetup = this.optionsSetup; + // 根据图表的宽度 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); }, @@ -515,6 +527,35 @@ export default { } } } + const optionsSetup = this.optionsSetup; + // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字 + let xAxisDataLength = 1; + if (val.length !== 0){ + xAxisDataLength = val.xAxis.length; + } + const wordNum = parseInt((this.optionsStyle.width / xAxisDataLength) / 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); }, diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetMoreBarLineChart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetMoreBarLineChart.vue index 83af5f38..68f5084c 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetMoreBarLineChart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetMoreBarLineChart.vue @@ -14,7 +14,6 @@ export default { props: { value: Object, ispreview: Boolean, - flagInter: null, }, data() { return { @@ -246,18 +245,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: { @@ -540,6 +527,30 @@ export default { series[0].data = bar1; series[1].data = bar2; series[2].data = line; + // 根据图表的宽度 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); }, @@ -635,6 +646,34 @@ export default { series.push(obj); } } + // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字 + let xAxisDataLength = 1; + if (val.length !== 0){ + xAxisDataLength = val.xAxis.length; + } + const wordNum = parseInt((this.optionsStyle.width / xAxisDataLength) / 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); diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLineStackChart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLineStackChart.vue index 53ec48c3..8fc5a132 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLineStackChart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLineStackChart.vue @@ -144,18 +144,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: { @@ -417,6 +405,30 @@ export default { this.options.xAxis.type = "category"; this.options.yAxis.type = "value"; } + // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字 + const wordNum = parseInt((this.optionsStyle.width / xAxisList.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); }, @@ -495,6 +507,34 @@ export default { } legendName.push(val.series[i].name); } + // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字 + let xAxisDataLength = 1; + if (val.length !== 0){ + xAxisDataLength = val.xAxis.length; + } + const wordNum = parseInt((this.optionsStyle.width / xAxisDataLength) / 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); diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLinechart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLinechart.vue index e9aee650..e9accb03 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLinechart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLinechart.vue @@ -158,18 +158,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: { @@ -367,10 +355,34 @@ export default { formatter: !!optionsSetup.percentSign ? '{c}%' : '{c}' }; series[i].data = data; - this.options.legend["data"] = legendName; - this.setOptionsLegendName(legendName); } } + // 根据图表的宽度 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); }, dynamicDataFn(val, refreshTime) { if (!val) return; @@ -441,6 +453,34 @@ export default { series.push(obj); } } + // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字 + let xAxisDataLength = 1; + if (val.length !== 0){ + xAxisDataLength = val.xAxis.length; + } + const wordNum = parseInt((this.optionsStyle.width / xAxisDataLength) / 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);