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

feat--柱状图增加配置项

Browse Source
qianming 1 year ago
parent 0237f76f3c
commit 27fc7f58b2
10 changed files with 445 additions and 71 deletions
Show Stats Download Patch File Download Diff File

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

@ -51,6 +51,75 @@ export const widgetBarCompare = {
placeholder: '', placeholder: '',
value: 5, value: 5,
}, },
{
type: 'el-switch',
label: '背景显示',
name: 'isShowBackground',
require: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '背景颜色',
name: 'backgroundStyleColor',
required: false,
placeholder: '',
value: 'rgba(180, 180, 180, 0.2)',
},
{
type: 'vue-color',
label: '描边颜色',
name: 'backgroundStyleBorderColor',
required: false,
placeholder: '',
value: '#000',
},
{
type: 'el-input-number',
label: '描边宽度',
name: 'backgroundStyleBorderWidth',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-select',
label: '描边类型',
name: 'backgroundStyleBorderType',
required: false,
placeholder: '',
selectOptions: [
{ code: 'solid', name: '实线' },
{ code: 'dashed', name: '虚线' },
{ code: 'dotted', name: '斑点' },
],
value: 'dashed'
},
{
type: 'el-input-number',
label: '阴影模糊',
name: 'backgroundStyleShadowBlur',
required: false,
placeholder: '',
value: 10,
},
{
type: 'vue-color',
label: '阴影颜色',
name: 'backgroundStyleShadowColor',
required: false,
placeholder: '',
value: 'rgba(0, 0, 0, 0.5)',
},
{
type: 'el-slider',
label: '透明度',
name: 'backgroundStyleOpacity',
require: false,
placeholder: '',
value: 100,
},
], ],
}, },
{ {
@ -274,6 +343,14 @@ export const widgetBarCompare = {
placeholder: '', placeholder: '',
value: true, value: true,
}, },
{
type: 'el-input-text',
label: '最大值',
name: 'maxXLeft',
required: false,
placeholder: '',
value: '',
},
{ {
type: 'el-input-number', type: 'el-input-number',
label: '数值间隔', label: '数值间隔',
@ -395,6 +472,14 @@ export const widgetBarCompare = {
placeholder: '', placeholder: '',
value: true, value: true,
}, },
{
type: 'el-input-text',
label: '最大值',
name: 'maxXRight',
required: false,
placeholder: '',
value: '',
},
{ {
type: 'el-input-number', type: 'el-input-number',
label: '数值间隔', label: '数值间隔',

85
report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-double-yaxis-chart.js
Unescape Escape View File

@ -52,6 +52,75 @@ export const widgetBarDoubleYaxis = {
placeholder: '', placeholder: '',
value: 0, value: 0,
}, },
{
type: 'el-switch',
label: '背景显示',
name: 'isShowBackground',
require: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '背景颜色',
name: 'backgroundStyleColor',
required: false,
placeholder: '',
value: 'rgba(180, 180, 180, 0.2)',
},
{
type: 'vue-color',
label: '描边颜色',
name: 'backgroundStyleBorderColor',
required: false,
placeholder: '',
value: '#000',
},
{
type: 'el-input-number',
label: '描边宽度',
name: 'backgroundStyleBorderWidth',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-select',
label: '描边类型',
name: 'backgroundStyleBorderType',
required: false,
placeholder: '',
selectOptions: [
{ code: 'solid', name: '实线' },
{ code: 'dashed', name: '虚线' },
{ code: 'dotted', name: '斑点' },
],
value: 'dashed'
},
{
type: 'el-input-number',
label: '阴影模糊',
name: 'backgroundStyleShadowBlur',
required: false,
placeholder: '',
value: 10,
},
{
type: 'vue-color',
label: '阴影颜色',
name: 'backgroundStyleShadowColor',
required: false,
placeholder: '',
value: 'rgba(0, 0, 0, 0.5)',
},
{
type: 'el-slider',
label: '透明度',
name: 'backgroundStyleOpacity',
require: false,
placeholder: '',
value: 100,
},
], ],
}, },
{ {
@ -392,6 +461,14 @@ export const widgetBarDoubleYaxis = {
placeholder: '', placeholder: '',
value: true, value: true,
}, },
{
type: 'el-input-text',
label: '最大值',
name: 'maxYLeft',
required: false,
placeholder: '',
value: '',
},
{ {
type: 'el-input-text', type: 'el-input-text',
label: '坐标名', label: '坐标名',
@ -517,6 +594,14 @@ export const widgetBarDoubleYaxis = {
placeholder: '', placeholder: '',
value: true, value: true,
}, },
{
type: 'el-input-text',
label: '最大值',
name: 'maxYRight',
required: false,
placeholder: '',
value: '',
},
{ {
type: 'el-input-text', type: 'el-input-text',
label: '坐标名', label: '坐标名',

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

@ -486,7 +486,7 @@ export const widgetBarStack = {
name: 'maxY', name: 'maxY',
required: false, required: false,
placeholder: '', placeholder: '',
value: '100', value: '',
}, },
{ {
type: 'el-input-text', type: 'el-input-text',

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

@ -79,6 +79,75 @@ export const widgetBarchart = {
], ],
value: 'leftRight' value: 'leftRight'
}, },
{
type: 'el-switch',
label: '背景显示',
name: 'isShowBackground',
require: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '背景颜色',
name: 'backgroundStyleColor',
required: false,
placeholder: '',
value: 'rgba(180, 180, 180, 0.2)',
},
{
type: 'vue-color',
label: '描边颜色',
name: 'backgroundStyleBorderColor',
required: false,
placeholder: '',
value: '#000',
},
{
type: 'el-input-number',
label: '描边宽度',
name: 'backgroundStyleBorderWidth',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-select',
label: '描边类型',
name: 'backgroundStyleBorderType',
required: false,
placeholder: '',
selectOptions: [
{ code: 'solid', name: '实线' },
{ code: 'dashed', name: '虚线' },
{ code: 'dotted', name: '斑点' },
],
value: 'dashed'
},
{
type: 'el-input-number',
label: '阴影模糊',
name: 'backgroundStyleShadowBlur',
required: false,
placeholder: '',
value: 10,
},
{
type: 'vue-color',
label: '阴影颜色',
name: 'backgroundStyleShadowColor',
required: false,
placeholder: '',
value: 'rgba(0, 0, 0, 0.5)',
},
{
type: 'el-slider',
label: '透明度',
name: 'backgroundStyleOpacity',
require: false,
placeholder: '',
value: 100,
},
], ],
}, },
{ {
@ -419,6 +488,14 @@ export const widgetBarchart = {
placeholder: '', placeholder: '',
value: true, value: true,
}, },
{
type: 'el-input-text',
label: '最大值',
name: 'maxY',
required: false,
placeholder: '',
value: '',
},
{ {
type: 'el-input-text', type: 'el-input-text',
label: '坐标名', label: '坐标名',

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

@ -59,6 +59,75 @@ export const widgetGradientBarchart = {
placeholder: '', placeholder: '',
value: 5, value: 5,
}, },
{
type: 'el-switch',
label: '背景显示',
name: 'isShowBackground',
require: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '背景颜色',
name: 'backgroundStyleColor',
required: false,
placeholder: '',
value: 'rgba(180, 180, 180, 0.2)',
},
{
type: 'vue-color',
label: '描边颜色',
name: 'backgroundStyleBorderColor',
required: false,
placeholder: '',
value: '#000',
},
{
type: 'el-input-number',
label: '描边宽度',
name: 'backgroundStyleBorderWidth',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-select',
label: '描边类型',
name: 'backgroundStyleBorderType',
required: false,
placeholder: '',
selectOptions: [
{code: 'solid', name: '实线'},
{code: 'dashed', name: '虚线'},
{code: 'dotted', name: '斑点'},
],
value: 'dashed'
},
{
type: 'el-input-number',
label: '阴影模糊',
name: 'backgroundStyleShadowBlur',
required: false,
placeholder: '',
value: 10,
},
{
type: 'vue-color',
label: '阴影颜色',
name: 'backgroundStyleShadowColor',
required: false,
placeholder: '',
value: 'rgba(0, 0, 0, 0.5)',
},
{
type: 'el-slider',
label: '透明度',
name: 'backgroundStyleOpacity',
require: false,
placeholder: '',
value: 100,
},
], ],
}, },
{ {
@ -103,10 +172,10 @@ export const widgetGradientBarchart = {
required: false, required: false,
placeholder: '', placeholder: '',
selectOptions: [ selectOptions: [
{ code: 'normal', name: '正常' }, {code: 'normal', name: '正常'},
{ code: 'bold', name: '粗体' }, {code: 'bold', name: '粗体'},
{ code: 'bolder', name: '特粗体' }, {code: 'bolder', name: '特粗体'},
{ code: 'lighter', name: '细体' } {code: 'lighter', name: '细体'}
], ],
value: 'normal' value: 'normal'
}, },
@ -117,9 +186,9 @@ export const widgetGradientBarchart = {
required: false, required: false,
placeholder: '', placeholder: '',
selectOptions: [ selectOptions: [
{ code: 'normal', name: '正常' }, {code: 'normal', name: '正常'},
{ code: 'italic', name: 'italic斜体' }, {code: 'italic', name: 'italic斜体'},
{ code: 'oblique', name: 'oblique斜体' }, {code: 'oblique', name: 'oblique斜体'},
], ],
value: 'normal' value: 'normal'
}, },
@ -130,9 +199,9 @@ export const widgetGradientBarchart = {
required: false, required: false,
placeholder: '', placeholder: '',
selectOptions: [ selectOptions: [
{ code: 'center', name: '居中' }, {code: 'center', name: '居中'},
{ code: 'left', name: '左对齐' }, {code: 'left', name: '左对齐'},
{ code: 'right', name: '右对齐' }, {code: 'right', name: '右对齐'},
], ],
value: 'center' value: 'center'
}, },
@ -167,10 +236,10 @@ export const widgetGradientBarchart = {
required: false, required: false,
placeholder: '', placeholder: '',
selectOptions: [ selectOptions: [
{ code: 'normal', name: '正常' }, {code: 'normal', name: '正常'},
{ code: 'bold', name: '粗体' }, {code: 'bold', name: '粗体'},
{ code: 'bolder', name: '特粗体' }, {code: 'bolder', name: '特粗体'},
{ code: 'lighter', name: '细体' } {code: 'lighter', name: '细体'}
], ],
value: 'normal' value: 'normal'
}, },
@ -181,9 +250,9 @@ export const widgetGradientBarchart = {
required: false, required: false,
placeholder: '', placeholder: '',
selectOptions: [ selectOptions: [
{ code: 'normal', name: '正常' }, {code: 'normal', name: '正常'},
{ code: 'italic', name: 'italic斜体' }, {code: 'italic', name: 'italic斜体'},
{ code: 'oblique', name: 'oblique斜体' }, {code: 'oblique', name: 'oblique斜体'},
], ],
value: 'normal' value: 'normal'
}, },
@ -317,6 +386,14 @@ export const widgetGradientBarchart = {
placeholder: '', placeholder: '',
value: true, value: true,
}, },
{
type: 'el-input-text',
label: '最大值',
name: 'maxY',
required: false,
placeholder: '',
value: '',
},
{ {
type: 'el-input-text', type: 'el-input-text',
label: '坐标名', label: '坐标名',
@ -465,10 +542,10 @@ export const widgetGradientBarchart = {
required: false, required: false,
placeholder: '', placeholder: '',
selectOptions: [ selectOptions: [
{ code: 'normal', name: '正常' }, {code: 'normal', name: '正常'},
{ code: 'bold', name: '粗体' }, {code: 'bold', name: '粗体'},
{ code: 'bolder', name: '特粗体' }, {code: 'bolder', name: '特粗体'},
{ code: 'lighter', name: '细体' } {code: 'lighter', name: '细体'}
], ],
value: 'normal' value: 'normal'
}, },
@ -618,11 +695,11 @@ export const widgetGradientBarchart = {
relactiveDom: 'dataType', relactiveDom: 'dataType',
relactiveDomValue: 'staticData', relactiveDomValue: 'staticData',
value: [ value: [
{ "axis": "苹果", "data": 1000 }, {"axis": "苹果", "data": 1000},
{ "axis": "三星", "data": 2229 }, {"axis": "三星", "data": 2229},
{ "axis": "小米", "data": 3879 }, {"axis": "小米", "data": 3879},
{ "axis": "oppo", "data": 2379 }, {"axis": "oppo", "data": 2379},
{ "axis": "vivo", "data": 4079 }, {"axis": "vivo", "data": 4079},
], ],
}, },
{ {

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

@ -324,6 +324,7 @@ export default {
setOptionsXLeft() { setOptionsXLeft() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const xAxisLeft = { const xAxisLeft = {
max: optionsSetup.maxXLeft !== "" ? optionsSetup.maxXLeft : null,
splitNumber: optionsSetup.splitNumberLeft, splitNumber: optionsSetup.splitNumberLeft,
type: "value", type: "value",
show: optionsSetup.hideXLeft, show: optionsSetup.hideXLeft,
@ -363,6 +364,7 @@ export default {
setOptionsXRight() { setOptionsXRight() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const xAxisRight = { const xAxisRight = {
max: optionsSetup.maxXRight !== "" ? optionsSetup.maxXRight : null,
gridIndex: 2, gridIndex: 2,
splitNumber: optionsSetup.splitNumberRight, splitNumber: optionsSetup.splitNumberRight,
show: optionsSetup.hideXRight, show: optionsSetup.hideXRight,
@ -426,9 +428,7 @@ export default {
setOptionsTop() { setOptionsTop() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const series = this.options.series; const series = this.options.series;
for (const key in series) { series[0].label = {
if (series[key].type == "bar") {
(series[0].label = {
normal: { normal: {
show: optionsSetup.isShow, show: optionsSetup.isShow,
position: "insideLeft", position: "insideLeft",
@ -441,8 +441,8 @@ export default {
emphasis: { emphasis: {
show: false, show: false,
}, },
}), };
(series[1].label = { series[1].label = {
normal: { normal: {
show: optionsSetup.isShow, show: optionsSetup.isShow,
color: "red", color: "red",
@ -456,9 +456,20 @@ export default {
emphasis: { emphasis: {
show: false, show: false,
}, },
}), };
(series[key].barWidth = optionsSetup.maxWidth); for (const key in series) {
} series[key].barWidth = optionsSetup.maxWidth;
//柱体背景属性
series[key].showBackground = optionsSetup.isShowBackground;
series[key].backgroundStyle = {
color: optionsSetup.backgroundStyleColor,
borderColor: optionsSetup.backgroundStyleBorderColor,
borderWidth: optionsSetup.backgroundStyleBorderWidth,
borderType: optionsSetup.backgroundStyleBorderType,
shadowBlur: optionsSetup.backgroundStyleShadowBlur,
shadowColor: optionsSetup.backgroundStyleShadowColor,
opacity: optionsSetup.backgroundStyleOpacity / 100,
};
} }
this.options.series = series; this.options.series = series;
}, },

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

@ -219,6 +219,7 @@ export default {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const yAxis = [ const yAxis = [
{ {
max: optionsSetup.maxYLeft !== "" ? optionsSetup.maxYLeft : null,
type: "value", type: "value",
// 均分 // 均分
splitNumber: optionsSetup.splitNumberLeft, splitNumber: optionsSetup.splitNumberLeft,
@ -261,6 +262,7 @@ export default {
}, },
}, },
{ {
max: optionsSetup.maxYRight !== "" ? optionsSetup.maxYRight : null,
type: "value", type: "value",
// 均分 // 均分
splitNumber: optionsSetup.splitNumberRight, splitNumber: optionsSetup.splitNumberRight,
@ -322,6 +324,17 @@ export default {
series[key].barWidth = optionsSetup.maxWidth; series[key].barWidth = optionsSetup.maxWidth;
series[key].barMinHeight = optionsSetup.minHeight; series[key].barMinHeight = optionsSetup.minHeight;
series[key].itemStyle.barBorderRadius = optionsSetup.radius; series[key].itemStyle.barBorderRadius = optionsSetup.radius;
//柱体背景属性
series[key].showBackground = optionsSetup.isShowBackground;
series[key].backgroundStyle = {
color: optionsSetup.backgroundStyleColor,
borderColor: optionsSetup.backgroundStyleBorderColor,
borderWidth: optionsSetup.backgroundStyleBorderWidth,
borderType: optionsSetup.backgroundStyleBorderType,
shadowBlur: optionsSetup.backgroundStyleShadowBlur,
shadowColor: optionsSetup.backgroundStyleShadowColor,
opacity: optionsSetup.backgroundStyleOpacity / 100,
};
} }
} }
this.options.series = series; this.options.series = series;

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

@ -173,20 +173,11 @@ export default {
}; };
this.options.xAxis = xAxis; this.options.xAxis = xAxis;
}, },
//判断有无yAxis max，无返回null
getOptionsYMax() {
const optionsSetup = this.optionsSetup;
let max = null;
if (optionsSetup.maxY !== "") {
max = optionsSetup.maxY
}
return max
},
// Y轴设置 // Y轴设置
setOptionsY() { setOptionsY() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const yAxis = { const yAxis = {
max: this.getOptionsYMax(), max: optionsSetup.maxY !== "" ? optionsSetup.maxY : null,
type: "value", type: "value",
scale: optionsSetup.scale, scale: optionsSetup.scale,
// 均分 // 均分
@ -402,7 +393,6 @@ export default {
}); });
legendName.push(yAxisList[i]); legendName.push(yAxisList[i]);
} }
console.log(series)
this.options.series = series; this.options.series = series;
if (optionsSetup.verticalShow) { if (optionsSetup.verticalShow) {
this.options.xAxis.data = []; this.options.xAxis.data = [];

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

@ -184,6 +184,7 @@ export default {
setOptionsY() { setOptionsY() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const yAxis = { const yAxis = {
max: optionsSetup.maxY !== "" ? optionsSetup.maxY : null,
type: "value", type: "value",
scale: optionsSetup.scale, scale: optionsSetup.scale,
// 均分 // 均分
@ -391,6 +392,17 @@ export default {
}, },
}; };
} }
//柱体背景属性
series[i].showBackground = optionsSetup.isShowBackground;
series[i].backgroundStyle = {
color: optionsSetup.backgroundStyleColor,
borderColor: optionsSetup.backgroundStyleBorderColor,
borderWidth: optionsSetup.backgroundStyleBorderWidth,
borderType: optionsSetup.backgroundStyleBorderType,
shadowBlur: optionsSetup.backgroundStyleShadowBlur,
shadowColor: optionsSetup.backgroundStyleShadowColor,
opacity: optionsSetup.backgroundStyleOpacity / 100,
};
series[i].data = data; series[i].data = data;
} }
} }
@ -475,6 +487,17 @@ export default {
}, },
}; };
} }
//柱体背景属性
obj.showBackground = optionsSetup.isShowBackground;
obj.backgroundStyle = {
color: optionsSetup.backgroundStyleColor,
borderColor: optionsSetup.backgroundStyleBorderColor,
borderWidth: optionsSetup.backgroundStyleBorderWidth,
borderType: optionsSetup.backgroundStyleBorderType,
shadowBlur: optionsSetup.backgroundStyleShadowBlur,
shadowColor: optionsSetup.backgroundStyleShadowColor,
opacity: optionsSetup.backgroundStyleOpacity / 100,
}
obj.data = val.series[i].data; obj.data = val.series[i].data;
series.push(obj); series.push(obj);
} }

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

@ -1,6 +1,6 @@
<template> <template>
<div :style="styleObj"> <div :style="styleObj">
<v-chart ref="myVChart" :options="options" autoresize /> <v-chart ref="myVChart" :options="options" autoresize/>
</div> </div>
</template> </template>
@ -10,6 +10,7 @@ import {
targetWidgetLinkageLogic, targetWidgetLinkageLogic,
} from "@/views/bigscreenDesigner/designer/linkageLogic"; } from "@/views/bigscreenDesigner/designer/linkageLogic";
import echarts from "echarts"; import echarts from "echarts";
export default { export default {
name: "WidgetGradientColorBarchart", //渐变色，参考https://www.makeapie.com/editor.html?c=x0oZWoncE name: "WidgetGradientColorBarchart", //渐变色，参考https://www.makeapie.com/editor.html?c=x0oZWoncE
components: {}, components: {},
@ -260,6 +261,7 @@ export default {
setOptionsY() { setOptionsY() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const yAxis = { const yAxis = {
max: optionsSetup.maxY !== "" ? optionsSetup.maxY : null,
type: "value", type: "value",
scale: optionsSetup.scale, scale: optionsSetup.scale,
// 均分 // 均分
@ -328,6 +330,17 @@ export default {
}; };
} }
series[0].barWidth = optionsSetup.maxWidth; series[0].barWidth = optionsSetup.maxWidth;
//柱体背景属性
series[0].showBackground = optionsSetup.isShowBackground;
series[0].backgroundStyle = {
color: optionsSetup.backgroundStyleColor,
borderColor: optionsSetup.backgroundStyleBorderColor,
borderWidth: optionsSetup.backgroundStyleBorderWidth,
borderType: optionsSetup.backgroundStyleBorderType,
shadowBlur: optionsSetup.backgroundStyleShadowBlur,
shadowColor: optionsSetup.backgroundStyleShadowColor,
opacity: optionsSetup.backgroundStyleOpacity / 100,
};
} }
}, },
// tooltip 提示语设置 // tooltip 提示语设置

Write Preview
Loading…
Cancel
Save