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

图例功能更新

Browse Source
qianming 3 years ago
parent 179a7b5c6e
commit 10108cea55
5 changed files with 234 additions and 85 deletions
Show Stats Download Patch File Download Diff File

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

@ -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: [

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

@ -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: [

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

@ -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);
}
}
};

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

@ -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);
}
}
};

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

@ -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);
},
}

Write Preview
Loading…
Cancel
Save