bugfix--柱状图竖展示异常

This commit is contained in:
qianming
2023-11-06 09:16:37 +08:00
parent b8e12d38b0
commit bb921dc49b
6 changed files with 119 additions and 61 deletions

View File

@@ -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: '数值行数',

View File

@@ -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: '数值行数',

View File

@@ -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: '数值行数',

View File

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

View File

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

View File

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