diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-barchart.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-barchart.js
index eb7b110c..d7f401c5 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-barchart.js
+++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-barchart.js
@@ -170,6 +170,88 @@ export const widgetBarchart = {
},
],
},
+ {
+ name: '图例操作',
+ list: [
+ {
+ type: 'el-switch',
+ label: '图例显示',
+ name: 'isShowLegend',
+ required: false,
+ placeholder: '',
+ value: true,
+ },
+ {
+ type: 'el-input-text',
+ label: '图例名称',
+ name: 'legendName',
+ required: false,
+ placeholder: '',
+ value: ''
+ },
+ {
+ type: 'vue-color',
+ label: '字体颜色',
+ name: 'lengedColor',
+ required: false,
+ placeholder: '',
+ value: '#fff',
+ },
+ {
+ type: 'el-input-number',
+ label: '字体字号',
+ name: 'lengedFontSize',
+ required: false,
+ placeholder: '',
+ value: 12,
+ },
+ {
+ type: 'el-input-number',
+ label: '图例宽度',
+ name: 'lengedWidth',
+ required: false,
+ placeholder: '',
+ value: 12,
+ },
+ {
+ type: 'el-select',
+ label: '横向位置',
+ name: 'lateralPosition',
+ required: false,
+ placeholder: '',
+ selectOptions: [
+ {code: 'center', name: '居中'},
+ {code: 'left', name: '左对齐'},
+ {code: 'right', name: '右对齐'},
+ ],
+ value: 'center'
+ },
+ {
+ type: 'el-select',
+ label: '纵向位置',
+ name: 'longitudinalPosition',
+ required: false,
+ placeholder: '',
+ selectOptions: [
+ {code: 'top', name: '顶部'},
+ {code: 'bottom', name: '底部'},
+ ],
+ value: 'top'
+ },
+ {
+ type: 'el-select',
+ label: '布局前置',
+ name: 'layoutFront',
+ required: false,
+ placeholder: '',
+ selectOptions: [
+ {code: 'vertical', name: '竖排'},
+ {code: 'horizontal', name: '横排'},
+ ],
+ value: 'horizontal'
+ },
+ ],
+ },
{
name: 'X轴设置',
list: [
@@ -484,79 +566,6 @@ export const widgetBarchart = {
},
],
},
- {
- name: '图例操作',
- list: [
- {
- type: 'el-switch',
- label: '图例',
- name: 'isShowLegend',
- required: false,
- placeholder: '',
- value: true,
- },
- {
- type: 'vue-color',
- label: '字体颜色',
- name: 'lengedColor',
- required: false,
- placeholder: '',
- value: '#fff',
- },
- {
- type: 'el-input-number',
- label: '字体字号',
- name: 'lengedFontSize',
- required: false,
- placeholder: '',
- value: 16,
- },
- {
- type: 'el-input-number',
- label: '图例宽度',
- name: 'lengedWidth',
- required: false,
- placeholder: '',
- value: 15,
- },
- {
- type: 'el-select',
- label: '横向位置',
- name: 'lateralPosition',
- required: false,
- placeholder: '',
- selectOptions: [
- {code: 'left', name: '左对齐'},
- {code: 'right', name: '右对齐'},
- ],
- value: ''
- },
- {
- type: 'el-select',
- label: '纵向位置',
- name: 'longitudinalPosition',
- required: false,
- placeholder: '',
- selectOptions: [
- {code: 'top', name: '顶部'},
- {code: 'bottom', name: '底部'},
- ],
- value: ''
- },
- {
- type: 'el-select',
- label: '布局前置',
- name: 'layoutFront',
- required: false,
- placeholder: '',
- selectOptions: [
- {code: 'vertical', name: '竖排'},
- {code: 'horizontal', name: '横排'},
- ],
- value: ''
- },
- ],
- },
{
name: '自定义配色',
list: [
diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-gradient-barchart.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-gradient-barchart.js
index 7a6c7696..6b1dac1a 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-gradient-barchart.js
+++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-gradient-barchart.js
@@ -9,7 +9,7 @@
export const widgetGradientBarchart = {
code: 'widget-gradient-color-barchart',
type: 'chart',
- label: '柱形图-渐变色',
+ label: '柱状图-渐变色',
icon: 'iconzhuzhuangtu',
options: {
// 配置
@@ -162,6 +162,88 @@ export const widgetGradientBarchart = {
},
],
},
+ {
+ name: '图例操作',
+ list: [
+ {
+ type: 'el-switch',
+ label: '图例显示',
+ name: 'isShowLegend',
+ required: false,
+ placeholder: '',
+ value: true,
+ },
+ {
+ type: 'el-input-text',
+ label: '图例名称',
+ name: 'legendName',
+ required: false,
+ placeholder: '',
+ value: ''
+ },
+ {
+ type: 'vue-color',
+ label: '字体颜色',
+ name: 'lengedColor',
+ required: false,
+ placeholder: '',
+ value: '#fff',
+ },
+ {
+ type: 'el-input-number',
+ label: '字体字号',
+ name: 'lengedFontSize',
+ required: false,
+ placeholder: '',
+ value: 12,
+ },
+ {
+ type: 'el-input-number',
+ label: '图例宽度',
+ name: 'lengedWidth',
+ required: false,
+ placeholder: '',
+ value: 12,
+ },
+ {
+ type: 'el-select',
+ label: '横向位置',
+ name: 'lateralPosition',
+ required: false,
+ placeholder: '',
+ selectOptions: [
+ {code: 'center', name: '居中'},
+ {code: 'left', name: '左对齐'},
+ {code: 'right', name: '右对齐'},
+ ],
+ value: 'center'
+ },
+ {
+ type: 'el-select',
+ label: '纵向位置',
+ name: 'longitudinalPosition',
+ required: false,
+ placeholder: '',
+ selectOptions: [
+ {code: 'top', name: '顶部'},
+ {code: 'bottom', name: '底部'},
+ ],
+ value: 'top'
+ },
+ {
+ type: 'el-select',
+ label: '布局前置',
+ name: 'layoutFront',
+ required: false,
+ placeholder: '',
+ selectOptions: [
+ {code: 'vertical', name: '竖排'},
+ {code: 'horizontal', name: '横排'},
+ ],
+ value: 'horizontal'
+ },
+ ],
+ },
{
name: 'X轴设置',
list: [
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue
index ed8a08bd..74090891 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue
@@ -258,11 +258,11 @@ export default {
const optionsSetup = this.optionsSetup;
const legend = this.options.legend;
legend.show = optionsSetup.isShowLegend;
- legend.left = optionsSetup.lateralPosition == "left" ? 0 : "auto";
- legend.right = optionsSetup.lateralPosition == "right" ? 0 : "auto";
- legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";
+ legend.left = optionsSetup.lateralPosition;
+ legend.right = optionsSetup.lateralPosition;
+ legend.top = optionsSetup.longitudinalPosition;
legend.bottom =
- optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
+ optionsSetup.longitudinalPosition;
legend.orient = optionsSetup.layoutFront;
legend.textStyle = {
color: optionsSetup.lengedColor,
@@ -270,6 +270,25 @@ export default {
};
legend.itemWidth = optionsSetup.lengedWidth;
},
+ // 图例名称设置
+ setOptionsLegendName(name){
+ const optionsSetup = this.optionsSetup;
+ const series = this.options.series;
+ const legendName = optionsSetup.legendName;
+ // 图例没有手动写则显示原值，写了则显示新值
+ if (null == legendName || legendName == '') {
+ for (let i = 0; i < name.length; i++) {
+ series[i].name = name[i];
+ }
+ this.options.legend['data'] = name;
+ }else {
+ const arr = legendName.split('|');
+ for (let i = 0; i < arr.length; i++) {
+ series[i].name = arr[i];
+ }
+ this.options.legend['data'] = arr
+ }
+ },
// 图例颜色修改
setOptionsColor() {
const optionsSetup = this.optionsSetup;
@@ -331,6 +350,10 @@ export default {
if (series[0].type == "bar") {
series[0].data = data;
}
+ const legendName = [];
+ legendName.push('销售量')
+ this.options.legend['data'] = legendName;
+ this.setOptionsLegendName(legendName);
},
// 动态数据
dynamicDataFn(val, refreshTime, optionsSetup) {
@@ -365,11 +388,16 @@ export default {
}
// series
const series = this.options.series;
+ const legendName = [];
for (const i in series) {
if (series[i].type == "bar") {
+ series[i].name = val.series[i].name;
series[i].data = val.series[i].data;
}
+ legendName.push(val.series[i].name);
}
+ this.options.legend['data'] = legendName;
+ this.setOptionsLegendName(legendName);
}
}
};
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue
index 9daadfc5..b3b02b79 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetGradientColorBarchart.vue
@@ -167,6 +167,7 @@ export default {
this.setOptionsX();
this.setOptionsY();
this.setOptionsTop();
+ this.setOptionsLegend();
this.setOptionsMargin();
this.setOptionsColor();
this.setOptionsData();
@@ -323,11 +324,11 @@ export default {
const optionsSetup = this.optionsSetup;
const legend = this.options.legend;
legend.show = optionsSetup.isShowLegend;
- legend.left = optionsSetup.lateralPosition == "left" ? 0 : "auto";
- legend.right = optionsSetup.lateralPosition == "right" ? 0 : "auto";
- legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto";
+ legend.left = optionsSetup.lateralPosition;
+ legend.right = optionsSetup.lateralPosition;
+ legend.top = optionsSetup.longitudinalPosition;
legend.bottom =
- optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto";
+ optionsSetup.longitudinalPosition;
legend.orient = optionsSetup.layoutFront;
legend.textStyle = {
color: optionsSetup.lengedColor,
@@ -335,6 +336,25 @@ export default {
};
legend.itemWidth = optionsSetup.lengedWidth;
},
+ // 图例名称设置
+ setOptionsLegendName(name){
+ const optionsSetup = this.optionsSetup;
+ const series = this.options.series;
+ const legendName = optionsSetup.legendName;
+ // 图例没有手动写则显示原值，写了则显示新值
+ if (null == legendName || legendName == '') {
+ for (let i = 0; i < name.length; i++) {
+ series[i].name = name[i];
+ }
+ this.options.legend['data'] = name;
+ }else {
+ const arr = legendName.split('|');
+ for (let i = 0; i < arr.length; i++) {
+ series[i].name = arr[i];
+ }
+ this.options.legend['data'] = arr
+ }
+ },
// 渐变色
setOptionsColor() {
const optionsSetup = this.optionsSetup;
@@ -416,6 +436,10 @@ export default {
if (series[0].type == "bar") {
series[0].data = data;
}
+ const legendName = [];
+ legendName.push('销售量')
+ this.options.legend['data'] = legendName;
+ this.setOptionsLegendName(legendName);
},
// 动态数据
dynamicDataFn(val, refreshTime, optionsSetup) {
@@ -451,11 +475,16 @@ export default {
// series
const series = this.options.series;
+ const legendName = [];
for (const i in series) {
if (series[i].type == "bar") {
+ series[i].name = val.series[i].name;
series[i].data = val.series[i].data;
}
+ legendName.push(val.series[i].name);
}
+ this.options.legend['data'] = legendName;
+ this.setOptionsLegendName(legendName);
}
}
};
diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetMoreBarLineChart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetMoreBarLineChart.vue
index bd89bcb9..c2b8f485 100644
--- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetMoreBarLineChart.vue
+++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetMoreBarLineChart.vue
@@ -363,9 +363,9 @@ export default {
const legend = this.options.legend;
legend.show = optionsSetup.isShowLegend;
legend.left = optionsSetup.lateralPosition;
- legend.top = optionsSetup.longitudinalPosition == 'top' ? 0 : 'auto';
+ legend.top = optionsSetup.longitudinalPosition;
legend.bottom =
- optionsSetup.longitudinalPosition == 'bottom' ? 0 : 'auto';
+ optionsSetup.longitudinalPosition;
legend.orient = optionsSetup.layoutFront;
legend.textStyle = {
color: optionsSetup.lengedColor,
@@ -373,6 +373,7 @@ export default {
};
legend.itemWidth = optionsSetup.lengedWidth;
},
+ // 图例名称设置
setOptionsLegendName(name){
const optionsSetup = this.optionsSetup;
const series = this.options.series;
@@ -560,8 +561,8 @@ export default {
}
legendName.push(val.series[i].name);
}
- this.options.legend['data'] = legendName;
this.options.series = series;
+ this.options.legend['data'] = legendName;
this.setOptionsLegendName(legendName);
},
}