ehs_tanghHe
/
tanghe-report
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat--X轴数值显示自动换行

Browse Source
qianming 1 year ago
parent ae1ecbfb78
commit 144998c514
9 changed files with 430 additions and 109 deletions
Show Stats Download Patch File Download Diff File

70
report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarDoubleYaxisChart.vue
Unescape Escape View File

@ -1,6 +1,6 @@
<template>
<div :style="styleObj">
<v-chart ref="myVChart" :options="options" autoresize />
<v-chart ref="myVChart" :options="options" autoresize/>
</div>
</template>
@ -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);
},

64
report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackChart.vue
Unescape Escape View File

@ -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);

6
report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue
Unescape Escape View File

@ -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,

71
report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue
Unescape Escape View File

@ -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;
},
},
};

64
report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarLineStackChart.vue
Unescape Escape View File

@ -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);

67
report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarlinechart.vue
Unescape Escape View File

@ -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);
},

65
report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetMoreBarLineChart.vue
Unescape Escape View File

@ -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);

64
report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLineStackChart.vue
Unescape Escape View File

@ -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);

68
report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLinechart.vue
Unescape Escape View File

@ -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);

Write Preview
Loading…
Cancel
Save