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

bugfix--柱状图竖展示异常

Browse Source
qianming 1 year ago
parent b8e12d38b0
commit bb921dc49b
6 changed files with 119 additions and 61 deletions
Show Stats Download Patch File Download Diff File

8
report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-stack.js
Unescape Escape View File

@ -403,6 +403,14 @@ export const widgetBarStack = {
placeholder: '', placeholder: '',
value: 14, value: 14,
}, },
{
type: 'el-switch',
label: '数值自动换行',
name: 'textRowsBreakAuto',
required: false,
placeholder: '',
value: false,
},
{ {
type: 'el-input-text', type: 'el-input-text',
label: '数值行数', label: '数值行数',

8
report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-barchart.js
Unescape Escape View File

@ -411,6 +411,14 @@ export const widgetBarchart = {
placeholder: '', placeholder: '',
value: 14, value: 14,
}, },
{
type: 'el-switch',
label: '数值自动换行',
name: 'textRowsBreakAuto',
required: false,
placeholder: '',
value: false,
},
{ {
type: 'el-input-text', type: 'el-input-text',
label: '数值行数', label: '数值行数',

8
report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-gradient-barchart.js
Unescape Escape View File

@ -309,6 +309,14 @@ export const widgetGradientBarchart = {
placeholder: '', placeholder: '',
value: 14, value: 14,
}, },
{
type: 'el-switch',
label: '数值自动换行',
name: 'textRowsBreakAuto',
required: false,
placeholder: '',
value: false,
},
{ {
type: 'el-input-text', type: 'el-input-text',
label: '数值行数', label: '数值行数',

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

@ -144,6 +144,17 @@ export default {
}, },
// 轴反转 // 轴反转
inverse: optionsSetup.reversalX, inverse: optionsSetup.reversalX,
axisLabel: {
show: true,
interval: optionsSetup.textInterval,
// 文字角度
rotate: optionsSetup.textAngleX,
textStyle: {
// 坐标文字颜色
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
},
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
@ -382,17 +393,6 @@ export default {
legendName.push(yAxisList[i]); legendName.push(yAxisList[i]);
} }
this.options.series = series; 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能展示多少个字 // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisList.length) / optionsSetup.fontSizeX); const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisList.length) / optionsSetup.fontSizeX);
const axisLabel = { const axisLabel = {
@ -416,7 +416,20 @@ export default {
return str return str
} }
} }
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.xAxis.axisLabel = axisLabel;
}
}
this.options.legend["data"] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);
}, },
@ -445,18 +458,6 @@ export default {
for (let i = 0; i < customColor.length; i++) { for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color); 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 series = [];
const legendName = []; const legendName = [];
for (const i in val.series) { for (const i in val.series) {
@ -523,7 +524,21 @@ export default {
return str return str
} }
} }
// 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.xAxis.axisLabel = axisLabel;
}
}
this.options.series = series; this.options.series = series;
this.options.legend["data"] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);

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

@ -427,8 +427,10 @@ export default {
this.options.yAxis.data = []; this.options.yAxis.data = [];
this.options.xAxis.type = "category"; this.options.xAxis.type = "category";
this.options.yAxis.type = "value"; this.options.yAxis.type = "value";
if (optionsSetup.textRowsBreakAuto) {
this.options.xAxis.axisLabel = axisLabel; this.options.xAxis.axisLabel = axisLabel;
} }
}
this.options.legend["data"] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);
}, },
@ -548,8 +550,10 @@ export default {
this.options.yAxis.data = []; this.options.yAxis.data = [];
this.options.xAxis.type = "category"; this.options.xAxis.type = "category";
this.options.yAxis.type = "value"; this.options.yAxis.type = "value";
if (optionsSetup.textRowsBreakAuto) {
this.options.xAxis.axisLabel = axisLabel; this.options.xAxis.axisLabel = axisLabel;
} }
}
this.options.series = series; this.options.series = series;
this.options.legend["data"] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);

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

@ -227,6 +227,17 @@ export default {
}, },
// 轴反转 // 轴反转
inverse: optionsSetup.reversalX, inverse: optionsSetup.reversalX,
axisLabel: {
show: true,
interval: optionsSetup.textInterval,
// 文字角度
rotate: optionsSetup.textAngleX,
textStyle: {
// 坐标文字颜色
color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX,
},
},
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
@ -429,21 +440,6 @@ export default {
axis[i] = val[i].axis; axis[i] = val[i].axis;
data[i] = val[i].data; 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能展示多少个字 // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / axis.length) / optionsSetup.fontSizeX); const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / axis.length) / optionsSetup.fontSizeX);
const axisLabel = { const axisLabel = {
@ -467,7 +463,24 @@ export default {
return str return str
} }
} }
// 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; this.options.xAxis.axisLabel = axisLabel;
}
}
if (series[0].type == "bar") {
series[0].data = data;
}
}, },
// 动态数据 // 动态数据
dynamicDataFn(refreshTime) { dynamicDataFn(refreshTime) {
@ -491,22 +504,6 @@ export default {
}); });
}, },
renderingFn(optionsSetup, val) { 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能展示多少个字 // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
const xAxisDataLength = val.length !== 0 ? val.xAxis.length : 1; const xAxisDataLength = val.length !== 0 ? val.xAxis.length : 1;
const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.fontSizeX); const rowsNum = optionsSetup.textRowsNum !== "" ? optionsSetup.textRowsNum : parseInt((this.optionsStyle.width / xAxisDataLength) / optionsSetup.fontSizeX);
@ -531,7 +528,25 @@ export default {
return str return str
} }
} }
// 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.xAxis.axisLabel = axisLabel;
}
}
const series = this.options.series;
if (series[0].type == "bar") {
series[0].data = val.series[0].data;
}
}, },
}, },
}; };

Write Preview
Loading…
Cancel
Save