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

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

@ -51,9 +51,6 @@ export default {
],
//图例
legend: {
data: ['success', 'fail'],
bottom: 10,
center: true,
textStyle: {
color: '#fff',
textAlign: 'center'
@ -277,6 +274,7 @@ export default {
this.setOptionsTitle();
this.setOptionsXLeft();
this.setOptionsXRight();
this.setOptionsY();
this.setOptionsTop();
this.setOptionsTooltip();
this.setOptionsGrid();
@ -318,7 +316,7 @@ export default {
axisLabel: { // x轴
show: optionsSetup.hideXLeft,
textStyle: {
color : optionsSetup.XcolorLeft,
color: optionsSetup.XcolorLeft,
fontSize: optionsSetup.fontSizeXLeft
}
},
@ -353,7 +351,7 @@ export default {
axisLabel: { // x轴
show: optionsSetup.hideXRight,
textStyle: {
color : optionsSetup.XcolorRight,
color: optionsSetup.XcolorRight,
fontSize: optionsSetup.fontSizeXRight
}
},
@ -368,6 +366,30 @@ export default {
}
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() {
const optionsSetup = this.optionsSetup;
@ -377,7 +399,6 @@ export default {
series[0].label = {
normal: {
show: optionsSetup.isShow,
//color: 'red',
position: 'insideLeft',
textStyle: {
fontSize: optionsSetup.fontSize,
@ -423,6 +444,16 @@ export default {
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() {
const optionsSetup = this.optionsSetup;
const grid = [
@ -438,7 +469,7 @@ export default {
show: false,
left: "51%",
top: optionsSetup.marginTop,
bottom: optionsSetup.marginBottom + 15,
bottom: this.getOptionsBottom(),
width: '0%'
},
{//右
@ -516,13 +547,6 @@ export default {
},
//静态数据
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 yAxisList = [];
@ -554,17 +578,6 @@ export default {
this.options.series[1]['name'] = arrayList[1].name
this.options.series[1]['data'] = arrayList[1].data
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) {
@ -585,52 +598,13 @@ export default {
});
},
renderingFn(optionsSetup, val) {
//颜色
const customColor = optionsSetup.customColor;
const arrColor = [];
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 = [];
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.yAxis[1]['data'] = val.xAxis
if (val.series[0].type == "bar"){
this.options.series[0]['name'] = val.series[0].name
this.options.series[0]['data'] = val.series[0].data
this.options.series[1]['name'] = val.series[1].name
this.options.series[1]['data'] = val.series[1].data
}
this.options.series = series
}
}
};

Write Preview
Loading…
Cancel
Save