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

feat--柱状图增加配置项

Browse Source
qianming 11 months 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: '',
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: '',
value: true,
},
{
type: 'el-input-text',
label: '最大值',
name: 'maxXLeft',
required: false,
placeholder: '',
value: '',
},
{
type: 'el-input-number',
label: '数值间隔',
@ -395,6 +472,14 @@ export const widgetBarCompare = {
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '最大值',
name: 'maxXRight',
required: false,
placeholder: '',
value: '',
},
{
type: 'el-input-number',
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: '',
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: '',
value: true,
},
{
type: 'el-input-text',
label: '最大值',
name: 'maxYLeft',
required: false,
placeholder: '',
value: '',
},
{
type: 'el-input-text',
label: '坐标名',
@ -517,6 +594,14 @@ export const widgetBarDoubleYaxis = {
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '最大值',
name: 'maxYRight',
required: false,
placeholder: '',
value: '',
},
{
type: 'el-input-text',
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',
required: false,
placeholder: '',
value: '100',
value: '',
},
{
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'
},
{
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: '',
value: true,
},
{
type: 'el-input-text',
label: '最大值',
name: 'maxY',
required: false,
placeholder: '',
value: '',
},
{
type: 'el-input-text',
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: '',
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,
placeholder: '',
selectOptions: [
{ code: 'normal', name: '正常' },
{ code: 'bold', name: '粗体' },
{ code: 'bolder', name: '特粗体' },
{ code: 'lighter', name: '细体' }
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
@ -117,9 +186,9 @@ export const widgetGradientBarchart = {
required: false,
placeholder: '',
selectOptions: [
{ code: 'normal', name: '正常' },
{ code: 'italic', name: 'italic斜体' },
{ code: 'oblique', name: 'oblique斜体' },
{code: 'normal', name: '正常'},
{code: 'italic', name: 'italic斜体'},
{code: 'oblique', name: 'oblique斜体'},
],
value: 'normal'
},
@ -130,9 +199,9 @@ export const widgetGradientBarchart = {
required: false,
placeholder: '',
selectOptions: [
{ code: 'center', name: '居中' },
{ code: 'left', name: '左对齐' },
{ code: 'right', name: '右对齐' },
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'center'
},
@ -167,10 +236,10 @@ export const widgetGradientBarchart = {
required: false,
placeholder: '',
selectOptions: [
{ code: 'normal', name: '正常' },
{ code: 'bold', name: '粗体' },
{ code: 'bolder', name: '特粗体' },
{ code: 'lighter', name: '细体' }
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
@ -181,9 +250,9 @@ export const widgetGradientBarchart = {
required: false,
placeholder: '',
selectOptions: [
{ code: 'normal', name: '正常' },
{ code: 'italic', name: 'italic斜体' },
{ code: 'oblique', name: 'oblique斜体' },
{code: 'normal', name: '正常'},
{code: 'italic', name: 'italic斜体'},
{code: 'oblique', name: 'oblique斜体'},
],
value: 'normal'
},
@ -317,6 +386,14 @@ export const widgetGradientBarchart = {
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '最大值',
name: 'maxY',
required: false,
placeholder: '',
value: '',
},
{
type: 'el-input-text',
label: '坐标名',
@ -465,10 +542,10 @@ export const widgetGradientBarchart = {
required: false,
placeholder: '',
selectOptions: [
{ code: 'normal', name: '正常' },
{ code: 'bold', name: '粗体' },
{ code: 'bolder', name: '特粗体' },
{ code: 'lighter', name: '细体' }
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
@ -618,11 +695,11 @@ export const widgetGradientBarchart = {
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: [
{ "axis": "苹果", "data": 1000 },
{ "axis": "三星", "data": 2229 },
{ "axis": "小米", "data": 3879 },
{ "axis": "oppo", "data": 2379 },
{ "axis": "vivo", "data": 4079 },
{"axis": "苹果", "data": 1000},
{"axis": "三星", "data": 2229},
{"axis": "小米", "data": 3879},
{"axis": "oppo", "data": 2379},
{"axis": "vivo", "data": 4079},
],
},
{

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

@ -324,6 +324,7 @@ export default {
setOptionsXLeft() {
const optionsSetup = this.optionsSetup;
const xAxisLeft = {
max: optionsSetup.maxXLeft !== "" ? optionsSetup.maxXLeft : null,
splitNumber: optionsSetup.splitNumberLeft,
type: "value",
show: optionsSetup.hideXLeft,
@ -363,6 +364,7 @@ export default {
setOptionsXRight() {
const optionsSetup = this.optionsSetup;
const xAxisRight = {
max: optionsSetup.maxXRight !== "" ? optionsSetup.maxXRight : null,
gridIndex: 2,
splitNumber: optionsSetup.splitNumberRight,
show: optionsSetup.hideXRight,
@ -426,39 +428,48 @@ export default {
setOptionsTop() {
const optionsSetup = this.optionsSetup;
const series = this.options.series;
series[0].label = {
normal: {
show: optionsSetup.isShow,
position: "insideLeft",
textStyle: {
fontSize: optionsSetup.fontSize,
color: optionsSetup.dataColor,
fontWeight: optionsSetup.fontWeight,
},
},
emphasis: {
show: false,
},
};
series[1].label = {
normal: {
show: optionsSetup.isShow,
color: "red",
position: "insideRight",
textStyle: {
fontSize: optionsSetup.fontSize,
color: optionsSetup.dataColor,
fontWeight: optionsSetup.fontWeight,
},
},
emphasis: {
show: false,
},
};
for (const key in series) {
if (series[key].type == "bar") {
(series[0].label = {
normal: {
show: optionsSetup.isShow,
position: "insideLeft",
textStyle: {
fontSize: optionsSetup.fontSize,
color: optionsSetup.dataColor,
fontWeight: optionsSetup.fontWeight,
},
},
emphasis: {
show: false,
},
}),
(series[1].label = {
normal: {
show: optionsSetup.isShow,
color: "red",
position: "insideRight",
textStyle: {
fontSize: optionsSetup.fontSize,
color: optionsSetup.dataColor,
fontWeight: optionsSetup.fontWeight,
},
},
emphasis: {
show: false,
},
}),
(series[key].barWidth = optionsSetup.maxWidth);
}
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;
},

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 yAxis = [
{
max: optionsSetup.maxYLeft !== "" ? optionsSetup.maxYLeft : null,
type: "value",
// 均分
splitNumber: optionsSetup.splitNumberLeft,
@ -261,6 +262,7 @@ export default {
},
},
{
max: optionsSetup.maxYRight !== "" ? optionsSetup.maxYRight : null,
type: "value",
// 均分
splitNumber: optionsSetup.splitNumberRight,
@ -322,6 +324,17 @@ export default {
series[key].barWidth = optionsSetup.maxWidth;
series[key].barMinHeight = optionsSetup.minHeight;
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;

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

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

@ -1,6 +1,6 @@
<template>
<div :style="styleObj">
<v-chart ref="myVChart" :options="options" autoresize />
<v-chart ref="myVChart" :options="options" autoresize/>
</div>
</template>
@ -10,6 +10,7 @@ import {
targetWidgetLinkageLogic,
} from "@/views/bigscreenDesigner/designer/linkageLogic";
import echarts from "echarts";
export default {
name: "WidgetGradientColorBarchart", //渐变色，参考https://www.makeapie.com/editor.html?c=x0oZWoncE
components: {},
@ -260,6 +261,7 @@ export default {
setOptionsY() {
const optionsSetup = this.optionsSetup;
const yAxis = {
max: optionsSetup.maxY !== "" ? optionsSetup.maxY : null,
type: "value",
scale: optionsSetup.scale,
// 均分
@ -328,6 +330,17 @@ export default {
};
}
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 提示语设置

Write Preview
Loading…
Cancel
Save