lxm_front/AJ-Report
1
0
Fork 0
mirror of https://gitee.com/anji-plus/report.git synced 2026-05-20 08:47:18 +08:00
Code Issues Projects Releases Wiki Activity

feat--柱线图增加配置项

Browse Source
This commit is contained in:
qianming
2023-11-30 14:48:33 +08:00
parent b44eb08cb2
commit cdb1f0959f
6 changed files with 495 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
report-ui/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-bar-line-stack.js
View File

@@ -37,7 +37,7 @@ export const widgetBarLineStack = {
name: 'maxWidth',
required: false,
placeholder: '',
value: 20,
value: 15,
},
{
type: 'el-slider',
@@ -47,6 +47,14 @@ export const widgetBarLineStack = {
placeholder: '',
value: 5,
},
{
type: 'el-slider',
label: '间距',
name: 'barGap',
required: false,
placeholder: '',
value: 10,
},
{
type: 'el-select',
label: '堆叠样式',
@@ -59,6 +67,75 @@ export const widgetBarLineStack = {
],
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,
},
],
},
{
@@ -721,13 +798,31 @@ export const widgetBarLineStack = {
placeholder: '',
value: false
},
{
type: 'el-select',
label: '位置',
name: 'fontPositionBar',
required: false,
placeholder: '',
selectOptions: [
{ code: 'top', name: '上' },
{ code: 'left', name: '左' },
{ code: 'right', name: '右' },
{ code: 'inside', name: '里' },
{ code: 'insideTop', name: '里顶' },
{ code: 'insideLeft', name: '里左' },
{ code: 'insideRight', name: '里右' },
{ code: 'insideBottom', name: '里底' },
],
value: 'top'
},
{
type: 'el-input-number',
label: '距离',
name: 'distanceBar',
required: false,
placeholder: '',
value: 10
value: 0
},
{
type: 'el-input-number',
@@ -780,13 +875,31 @@ export const widgetBarLineStack = {
placeholder: '',
value: false
},
{
type: 'el-select',
label: '位置',
name: 'fontPositionLine',
required: false,
placeholder: '',
selectOptions: [
{ code: 'top', name: '上' },
{ code: 'left', name: '左' },
{ code: 'right', name: '右' },
{ code: 'inside', name: '里' },
{ code: 'insideTop', name: '里顶' },
{ code: 'insideLeft', name: '里左' },
{ code: 'insideRight', name: '里右' },
{ code: 'insideBottom', name: '里底' },
],
value: 'top'
},
{
type: 'el-input-number',
label: '距离',
name: 'distanceLine',
required: false,
placeholder: '',
value: 10
value: 0
},
{
type: 'el-input-number',

145
report-ui/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-barlinechart.js
View File

@@ -41,7 +41,7 @@ export const widgetBarlinechart = {
name: 'maxWidth',
required: false,
placeholder: '',
value: 10,
value: 15,
},
{
type: 'el-slider',
@@ -59,6 +59,75 @@ export const widgetBarlinechart = {
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,
},
],
},
{
@@ -737,13 +806,31 @@ export const widgetBarlinechart = {
placeholder: '',
value: false
},
{
type: 'el-select',
label: '位置',
name: 'fontPositionBar',
required: false,
placeholder: '',
selectOptions: [
{ code: 'top', name: '上' },
{ code: 'left', name: '左' },
{ code: 'right', name: '右' },
{ code: 'inside', name: '里' },
{ code: 'insideTop', name: '里顶' },
{ code: 'insideLeft', name: '里左' },
{ code: 'insideRight', name: '里右' },
{ code: 'insideBottom', name: '里底' },
],
value: 'top'
},
{
type: 'el-input-number',
label: '距离',
name: 'distanceBar',
required: false,
placeholder: '',
value: 5
value: 0
},
{
type: 'el-input-number',
@@ -796,13 +883,31 @@ export const widgetBarlinechart = {
placeholder: '',
value: false
},
{
type: 'el-select',
label: '位置',
name: 'fontPositionLine',
required: false,
placeholder: '',
selectOptions: [
{ code: 'top', name: '上' },
{ code: 'left', name: '左' },
{ code: 'right', name: '右' },
{ code: 'inside', name: '里' },
{ code: 'insideTop', name: '里顶' },
{ code: 'insideLeft', name: '里左' },
{ code: 'insideRight', name: '里右' },
{ code: 'insideBottom', name: '里底' },
],
value: 'top'
},
{
type: 'el-input-number',
label: '距离',
name: 'distanceLine',
required: false,
placeholder: '',
value: 5
value: 0
},
{
type: 'el-input-number',
@@ -839,6 +944,40 @@ export const widgetBarlinechart = {
{
name: '提示语设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShowTooltip',
required: false,
placeholder: '',
value: true
},
{
type: 'el-select',
label: '触发类型',
name: 'tooltipTrigger',
required: false,
placeholder: '',
selectOptions: [
{ code: 'item', name: '数据项' },
{ code: 'axis', name: '坐标轴' },
],
value: 'axis'
},
{
type: 'el-select',
label: '指示器类型',
name: 'tooltipAxisPointerType',
required: false,
placeholder: '',
selectOptions: [
{ code: 'none', name: '无' },
{ code: 'line', name: '直线' },
{ code: 'shadow', name: '阴影' },
{ code: 'cross', name: '十字准星' },
],
value: 'shadow'
},
{
type: 'el-input-number',
label: '字体字号',

153
report-ui/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-more-bar-line.js
View File

@@ -41,7 +41,7 @@ export const widgetMoreBarLine = {
name: 'maxWidth',
required: false,
placeholder: '',
value: 10,
value: 15,
},
{
type: 'el-slider',
@@ -51,6 +51,14 @@ export const widgetMoreBarLine = {
placeholder: '',
value: 5,
},
{
type: 'el-slider',
label: '间距',
name: 'barGap',
required: false,
placeholder: '',
value: 10,
},
{
type: 'el-select',
label: '堆叠样式',
@@ -63,6 +71,75 @@ export const widgetMoreBarLine = {
],
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,
},
],
},
{
@@ -741,13 +818,31 @@ export const widgetMoreBarLine = {
placeholder: '',
value: false
},
{
type: 'el-select',
label: '位置',
name: 'fontPositionBar',
required: false,
placeholder: '',
selectOptions: [
{ code: 'top', name: '上' },
{ code: 'left', name: '左' },
{ code: 'right', name: '右' },
{ code: 'inside', name: '里' },
{ code: 'insideTop', name: '里顶' },
{ code: 'insideLeft', name: '里左' },
{ code: 'insideRight', name: '里右' },
{ code: 'insideBottom', name: '里底' },
],
value: 'top'
},
{
type: 'el-input-number',
label: '距离',
name: 'distanceBar',
required: false,
placeholder: '',
value: 5
value: 0
},
{
type: 'el-input-number',
@@ -800,13 +895,31 @@ export const widgetMoreBarLine = {
placeholder: '',
value: false
},
{
type: 'el-select',
label: '位置',
name: 'fontPositionLine',
required: false,
placeholder: '',
selectOptions: [
{ code: 'top', name: '上' },
{ code: 'left', name: '左' },
{ code: 'right', name: '右' },
{ code: 'inside', name: '里' },
{ code: 'insideTop', name: '里顶' },
{ code: 'insideLeft', name: '里左' },
{ code: 'insideRight', name: '里右' },
{ code: 'insideBottom', name: '里底' },
],
value: 'top'
},
{
type: 'el-input-number',
label: '距离',
name: 'distanceLine',
required: false,
placeholder: '',
value: 5
value: 0
},
{
type: 'el-input-number',
@@ -843,6 +956,40 @@ export const widgetMoreBarLine = {
{
name: '提示语设置',
list: [
{
type: 'el-switch',
label: '显示',
name: 'isShowTooltip',
required: false,
placeholder: '',
value: true
},
{
type: 'el-select',
label: '触发类型',
name: 'tooltipTrigger',
required: false,
placeholder: '',
selectOptions: [
{ code: 'item', name: '数据项' },
{ code: 'axis', name: '坐标轴' },
],
value: 'axis'
},
{
type: 'el-select',
label: '指示器类型',
name: 'tooltipAxisPointerType',
required: false,
placeholder: '',
selectOptions: [
{ code: 'none', name: '无' },
{ code: 'line', name: '直线' },
{ code: 'shadow', name: '阴影' },
{ code: 'cross', name: '十字准星' },
],
value: 'shadow'
},
{
type: 'el-input-number',
label: '字体字号',

50
report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarLineStackChart.vue
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>
@@ -304,7 +304,7 @@ export default {
const tooltip = {
show: optionsSetup.isShowTooltip,
trigger: optionsSetup.tooltipTrigger,
axisPointer:{
axisPointer: {
type: optionsSetup.tooltipAxisPointerType,
},
textStyle: {
@@ -394,10 +394,10 @@ export default {
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData, optionsSetup)
: this.dynamicDataFn(
optionsData.dynamicData,
optionsData.refreshTime,
optionsSetup
);
optionsData.dynamicData,
optionsData.refreshTime,
optionsSetup
);
},
//去重
setUnique(arr) {
@@ -449,12 +449,12 @@ export default {
name: yAxisList[i],
type: "bar",
data: bar,
barGap: "0%",
stack : this.getStackStyle(),
barGap: optionsSetup.barGap + "%",
stack: this.getStackStyle(),
barWidth: optionsSetup.maxWidth,
label: {
show: optionsSetup.isShowBar,
position: "top",
position: optionsSetup.fontPositionBar,
distance: optionsSetup.distanceBar,
fontSize: optionsSetup.fontSizeBar,
color: optionsSetup.subTextColorBar,
@@ -468,6 +468,17 @@ export default {
barBorderRadius: optionsSetup.radius,
},
},
//柱体背景属性
showBackground: optionsSetup.isShowBackground,
backgroundStyle: {
color: optionsSetup.backgroundStyleColor,
borderColor: optionsSetup.backgroundStyleBorderColor,
borderWidth: optionsSetup.backgroundStyleBorderWidth,
borderType: optionsSetup.backgroundStyleBorderType,
shadowBlur: optionsSetup.backgroundStyleShadowBlur,
shadowColor: optionsSetup.backgroundStyleShadowColor,
opacity: optionsSetup.backgroundStyleOpacity / 100,
}
});
}
for (let i = 0; i < yAxisList.length; i++) {
@@ -498,7 +509,7 @@ export default {
},
label: {
show: optionsSetup.isShowLine,
position: "top",
position: optionsSetup.fontPositionLine,
distance: optionsSetup.distanceLine,
fontSize: optionsSetup.fontSizeLine,
color: optionsSetup.subTextColorLine,
@@ -582,12 +593,12 @@ export default {
name: legendName[i],
type: "bar",
data: bar,
barGap: "0%",
stack : this.getStackStyle(),
barGap: optionsSetup.barGap + "%",
stack: this.getStackStyle(),
barWidth: optionsSetup.maxWidth,
label: {
show: optionsSetup.isShowBar,
position: "top",
position: optionsSetup.fontPositionBar,
distance: optionsSetup.distanceBar,
fontSize: optionsSetup.fontSizeBar,
color: optionsSetup.subTextColorBar,
@@ -601,6 +612,17 @@ export default {
barBorderRadius: optionsSetup.radius,
},
},
//柱体背景属性
showBackground: optionsSetup.isShowBackground,
backgroundStyle: {
color: optionsSetup.backgroundStyleColor,
borderColor: optionsSetup.backgroundStyleBorderColor,
borderWidth: optionsSetup.backgroundStyleBorderWidth,
borderType: optionsSetup.backgroundStyleBorderType,
shadowBlur: optionsSetup.backgroundStyleShadowBlur,
shadowColor: optionsSetup.backgroundStyleShadowColor,
opacity: optionsSetup.backgroundStyleOpacity / 100,
}
});
}
for (let i = 0; i < legendName.length; i++) {
@@ -630,7 +652,7 @@ export default {
},
label: {
show: optionsSetup.isShowLine,
position: "top",
position: optionsSetup.fontPositionLine,
distance: optionsSetup.distanceLine,
fontSize: optionsSetup.fontSizeLine,
color: optionsSetup.subTextColorLine,

22
report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarlinechart.vue
View File

@@ -330,7 +330,7 @@ export default {
series[key].itemStyle.borderRadius = optionsSetup.radius;
series[key].label = {
show: optionsSetup.isShowLine,
position: "top",
position: optionsSetup.fontPositionLine,
distance: optionsSetup.distanceLine,
fontSize: optionsSetup.fontSizeLine,
color: optionsSetup.subTextColorLine,
@@ -349,13 +349,24 @@ export default {
if (series[key].type == "bar") {
series[key].label = {
show: optionsSetup.isShowBar,
position: "top",
position: optionsSetup.fontPositionBar,
distance: optionsSetup.distanceBar,
fontSize: optionsSetup.fontSizeBar,
color: optionsSetup.subTextColorBar,
fontWeight: optionsSetup.fontWeightBar,
formatter: !!optionsSetup.percentSignBar ? '{c}%' : '{c}'
};
//柱体背景属性
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,
};
series[key].barWidth = optionsSetup.maxWidth;
series[key].barMinHeight = optionsSetup.minHeight;
series[key].itemStyle.barBorderRadius = optionsSetup.radius;
@@ -367,8 +378,11 @@ export default {
setOptionsTooltip() {
const optionsSetup = this.optionsSetup;
const tooltip = {
trigger: "item",
show: true,
show: optionsSetup.isShowTooltip,
trigger: optionsSetup.tooltipTrigger,
axisPointer: {
type: optionsSetup.tooltipAxisPointerType,
},
textStyle: {
color: optionsSetup.tipsColor,
fontSize: optionsSetup.tipsFontSize,

39
report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetMoreBarLineChart.vue
View File

@@ -369,8 +369,11 @@ export default {
setOptionsTooltip() {
const optionsSetup = this.optionsSetup;
const tooltip = {
trigger: "item",
show: true,
show: optionsSetup.isShowTooltip,
trigger: optionsSetup.tooltipTrigger,
axisPointer: {
type: optionsSetup.tooltipAxisPointerType,
},
textStyle: {
color: optionsSetup.tipsColor,
fontSize: optionsSetup.tipsFontSize,
@@ -486,16 +489,28 @@ export default {
if (series[i].type == "bar") {
series[i].name = legendName[i];
series[i].type = "bar";
series[i].barGap = optionsSetup.barGap + "%";
series[i].stack = this.getStackStyle();
series[i].label = {
show: optionsSetup.isShowBar,
position: "top",
position: optionsSetup.fontPositionBar,
distance: optionsSetup.distanceBar,
fontSize: optionsSetup.fontSizeBar,
color: optionsSetup.subTextColorBar,
fontWeight: optionsSetup.fontWeightBar,
formatter: !!optionsSetup.percentSignBar ? '{c}%' : '{c}'
};
//柱体背景属性
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].barWidth = optionsSetup.maxWidth;
series[i].itemStyle.normal["barBorderRadius"] = optionsSetup.radius;
series[i].itemStyle.normal["color"] = arrColor[i];
@@ -527,7 +542,7 @@ export default {
};
series[i].label = {
show: optionsSetup.isShowLine,
position: "top",
position: optionsSetup.fontPositionLine,
distance: optionsSetup.distanceLine,
fontSize: optionsSetup.fontSizeLine,
color: optionsSetup.subTextColorLine,
@@ -602,10 +617,11 @@ export default {
if (val.series[i].type == "bar") {
obj.name = val.series[i].name;
obj.type = val.series[i].type;
obj.barGap = optionsSetup.barGap + "%";
obj.stack = this.getStackStyle();
obj.label = {
show: optionsSetup.isShowBar,
position: "top",
position: optionsSetup.fontPositionBar,
distance: optionsSetup.distanceBar,
fontSize: optionsSetup.fontSizeBar,
color: optionsSetup.subTextColorBar,
@@ -619,6 +635,17 @@ export default {
barBorderRadius: optionsSetup.radius,
},
};
//柱体背景属性
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);
} else if (val.series[i].type == "line") {
@@ -649,7 +676,7 @@ export default {
};
obj.label = {
show: optionsSetup.isShowLine,
position: "top",
position: optionsSetup.fontPositionLine,
distance: optionsSetup.distanceLine,
fontSize: optionsSetup.fontSizeLine,
color: optionsSetup.subTextColorLine,