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

柱状对比图功能更新

Browse Source
qianming 3 years ago
parent 2d69abb5a4
commit 1678f7e733
2 changed files with 75 additions and 127 deletions
Show Stats Download Patch File Download Diff File

88
report-ui/src/views/report/bigscreen/designer/tools.js
Unescape Escape View File

@ -7247,7 +7247,7 @@ const widgetTools = [
{ {
type: 'el-switch', type: 'el-switch',
label: '刻度线', label: '刻度线',
name: 'tickLineLeft', name: 'tickLineRight',
require: false, require: false,
placeholder: '', placeholder: '',
value: false, value: false,
@ -7308,66 +7308,55 @@ const widgetTools = [
{ {
type: 'el-switch', type: 'el-switch',
label: '显示', label: '显示',
name: 'isShowY', name: 'hideY',
require: false, required: false,
placeholder: '', placeholder: '',
value: true, value: true,
}, },
{
type: 'el-input-text',
label: 'Y轴别名',
name: 'textNameY',
require: false,
placeholder: '',
value: ''
},
{ {
type: 'vue-color', type: 'vue-color',
label: '别名颜色', label: '数值颜色',
name: 'NameColorY', name: 'colorY',
required: false, required: false,
placeholder: '', placeholder: '',
value: '#fff', value: '#fff',
}, },
{ {
type: 'el-input-number', type: 'el-input-number',
label: '别名字号', label: '数值字号',
name: 'NameFontSizeY', name: 'fontSizeY',
required: false, required: false,
placeholder: '', placeholder: '',
value: 14, value: 14,
}, },
{ {
type: 'el-switch', type: 'el-select',
label: '轴反转', label: '数值对齐',
name: 'reversalY', name: 'textAlign',
required: false,
placeholder: '',
value: false
},
{
type: 'el-slider',
label: '文字角度',
name: 'textAngleY',
required: false, required: false,
placeholder: '', placeholder: '',
value: 0 selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'center'
}, },
{ {
type: 'vue-color', type: 'el-switch',
label: '文字颜色', label: '刻度线',
name: 'colorY', name: 'tickLineY',
required: false, require: false,
placeholder: '', placeholder: '',
value: '#fff', value: false,
}, },
{ {
type: 'el-input-number', type: 'el-switch',
label: '文字字号', label: 'Y轴线',
name: 'fontSizeY', name: 'lineY',
required: false, require: false,
placeholder: '', placeholder: '',
value: 14, value: false,
}, },
{ {
type: 'vue-color', type: 'vue-color',
@ -7376,22 +7365,7 @@ const widgetTools = [
required: false, required: false,
placeholder: '', placeholder: '',
value: '#fff', value: '#fff',
}, { },
type: 'el-switch',
label: 'y轴线显示',
name: 'isShowSplitLineY',
require: false,
placeholder: '',
value: false,
}, {
type: 'vue-color',
label: '分割线颜色',
name: 'splitLineColorY',
required: false,
placeholder: '',
value: '#fff',
}
], ],
}, },
{ {
@ -7400,7 +7374,7 @@ const widgetTools = [
{ {
type: 'el-switch', type: 'el-switch',
label: '显示', label: '显示',
name: 'isShowY', name: 'isShow',
required: false, required: false,
placeholder: '', placeholder: '',
value: true value: true
@ -7408,7 +7382,7 @@ const widgetTools = [
{ {
type: 'el-input-number', type: 'el-input-number',
label: '字体大小', label: '字体大小',
name: 'fontSizeY', name: 'fontSize',
required: false, required: false,
placeholder: '', placeholder: '',
value: 14 value: 14
@ -7416,7 +7390,7 @@ const widgetTools = [
{ {
type: 'vue-color', type: 'vue-color',
label: '字体颜色', label: '字体颜色',
name: 'subTextColorY', name: 'subTextColor',
required: false, required: false,
placeholder: '', placeholder: '',
value: '#fff' value: '#fff'
@ -7424,7 +7398,7 @@ const widgetTools = [
{ {
type: 'el-select', type: 'el-select',
label: '字体粗细', label: '字体粗细',
name: 'fontWeightY', name: 'fontWeight',
required: false, required: false,
placeholder: '', placeholder: '',
selectOptions: [ selectOptions: [

110
report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarCompareChart.vue
Unescape Escape View File

@ -51,9 +51,6 @@ export default {
], ],
//图例 //图例
legend: { legend: {
data: ['success', 'fail'],
bottom: 10,
center: true,
textStyle: { textStyle: {
color: '#fff', color: '#fff',
textAlign: 'center' textAlign: 'center'
@ -277,6 +274,7 @@ export default {
this.setOptionsTitle(); this.setOptionsTitle();
this.setOptionsXLeft(); this.setOptionsXLeft();
this.setOptionsXRight(); this.setOptionsXRight();
this.setOptionsY();
this.setOptionsTop(); this.setOptionsTop();
this.setOptionsTooltip(); this.setOptionsTooltip();
this.setOptionsGrid(); this.setOptionsGrid();
@ -368,6 +366,30 @@ export default {
} }
this.options.xAxis[2] = xAxisRight; this.options.xAxis[2] = xAxisRight;
}, },
// Y轴设置
setOptionsY() {
const optionsSetup = this.optionsSetup;
const axisLine = {
show: optionsSetup.lineY,
lineStyle: {
color: optionsSetup.lineColorY
}
};
const axisTick = {
show: optionsSetup.tickLineY
};
const axisLabel = {
show: optionsSetup.hideY,
textStyle: {
align: optionsSetup.textAlign,
color: optionsSetup.colorY,
fontSize: optionsSetup.fontSizeY,
}
};
this.options.yAxis[1]['axisLine'] = axisLine;
this.options.yAxis[1]['axisTick'] = axisTick;
this.options.yAxis[1]['axisLabel'] = axisLabel;
},
// 数值设定、柱体设置 // 数值设定、柱体设置
setOptionsTop() { setOptionsTop() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
@ -377,7 +399,6 @@ export default {
series[0].label = { series[0].label = {
normal: { normal: {
show: optionsSetup.isShow, show: optionsSetup.isShow,
//color: 'red',
position: 'insideLeft', position: 'insideLeft',
textStyle: { textStyle: {
fontSize: optionsSetup.fontSize, fontSize: optionsSetup.fontSize,
@ -423,6 +444,16 @@ export default {
this.options.tooltip = tooltip; this.options.tooltip = tooltip;
}, },
// 边距设置 // 边距设置
getOptionsBottom(){
const optionsSetup = this.optionsSetup;
let bottom = optionsSetup.marginBottom;
if (optionsSetup.hideXLeft) {
bottom = optionsSetup.marginBottom + 15
}else if (optionsSetup.hideXRight){
bottom = optionsSetup.marginBottom + 15
}
return bottom
},
setOptionsGrid() { setOptionsGrid() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const grid = [ const grid = [
@ -438,7 +469,7 @@ export default {
show: false, show: false,
left: "51%", left: "51%",
top: optionsSetup.marginTop, top: optionsSetup.marginTop,
bottom: optionsSetup.marginBottom + 15, bottom: this.getOptionsBottom(),
width: '0%' width: '0%'
}, },
{//右 {//右
@ -516,13 +547,6 @@ export default {
}, },
//静态数据 //静态数据
staticDataFn(val) { staticDataFn(val) {
const optionsSetup = this.optionsSetup;
//颜色
const customColor = optionsSetup.customColor;
const arrColor = [];
for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color);
}
//数据 //数据
let xAxisList = []; let xAxisList = [];
let yAxisList = []; let yAxisList = [];
@ -554,17 +578,6 @@ export default {
this.options.series[1]['name'] = arrayList[1].name this.options.series[1]['name'] = arrayList[1].name
this.options.series[1]['data'] = arrayList[1].data this.options.series[1]['data'] = arrayList[1].data
this.options.yAxis[1]['data'] = xAxisList this.options.yAxis[1]['data'] = xAxisList
/*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";
}*/
}, },
// 动态数据 // 动态数据
dynamicDataFn(val, refreshTime, optionsSetup) { dynamicDataFn(val, refreshTime, optionsSetup) {
@ -585,52 +598,13 @@ export default {
}); });
}, },
renderingFn(optionsSetup, val) { renderingFn(optionsSetup, val) {
//颜色 this.options.yAxis[1]['data'] = val.xAxis
const customColor = optionsSetup.customColor; if (val.series[0].type == "bar"){
const arrColor = []; this.options.series[0]['name'] = val.series[0].name
for (let i = 0; i < customColor.length; i++) { this.options.series[0]['data'] = val.series[0].data
arrColor.push(customColor[i].color); this.options.series[1]['name'] = val.series[1].name
} this.options.series[1]['data'] = val.series[1].data
// 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 = [];
for (const i in val.series) {
if (val.series[i].type == "bar") {
series.push({
name: val.series[i].name,
type: "bar",
data: val.series[i].data,
barGap: "0%",
barWidth: optionsSetup.maxWidth,
label: {
show: optionsSetup.isShow,
position: "top",
distance: 10,
fontSize: optionsSetup.fontSize,
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.fontWeight
},
//颜色，圆角属性
itemStyle: {
normal: {
color: arrColor[i],
barBorderRadius: optionsSetup.radius,
}
}
})
}
} }
this.options.series = series
} }
} }
}; };

Write Preview
Loading…
Cancel
Save