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轴设置', name: 'X轴设置',
list: [ 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: '自定义配色', name: '自定义配色',
list: [ 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 = { export const widgetGradientBarchart = {
code: 'widget-gradient-color-barchart', code: 'widget-gradient-color-barchart',
type: 'chart', type: 'chart',
label: '柱形图-渐变色', label: '柱状图-渐变色',
icon: 'iconzhuzhuangtu', icon: 'iconzhuzhuangtu',
options: { 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轴设置', name: 'X轴设置',
list: [ 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 optionsSetup = this.optionsSetup;
const legend = this.options.legend; const legend = this.options.legend;
legend.show = optionsSetup.isShowLegend; legend.show = optionsSetup.isShowLegend;
legend.left = optionsSetup.lateralPosition == "left" ? 0 : "auto"; legend.left = optionsSetup.lateralPosition;
legend.right = optionsSetup.lateralPosition == "right" ? 0 : "auto"; legend.right = optionsSetup.lateralPosition;
legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto"; legend.top = optionsSetup.longitudinalPosition;
legend.bottom = legend.bottom =
optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto"; optionsSetup.longitudinalPosition;
legend.orient = optionsSetup.layoutFront; legend.orient = optionsSetup.layoutFront;
legend.textStyle = { legend.textStyle = {
color: optionsSetup.lengedColor, color: optionsSetup.lengedColor,
@ -270,6 +270,25 @@ export default {
}; };
legend.itemWidth = optionsSetup.lengedWidth; 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() { setOptionsColor() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
@ -331,6 +350,10 @@ export default {
if (series[0].type == "bar") { if (series[0].type == "bar") {
series[0].data = data; series[0].data = data;
} }
const legendName = [];
legendName.push('销售量')
this.options.legend['data'] = legendName;
this.setOptionsLegendName(legendName);
}, },
// 动态数据 // 动态数据
dynamicDataFn(val, refreshTime, optionsSetup) { dynamicDataFn(val, refreshTime, optionsSetup) {
@ -365,11 +388,16 @@ export default {
} }
// series // series
const series = this.options.series; const series = this.options.series;
const legendName = [];
for (const i in series) { for (const i in series) {
if (series[i].type == "bar") { if (series[i].type == "bar") {
series[i].name = val.series[i].name;
series[i].data = val.series[i].data; 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.setOptionsX();
this.setOptionsY(); this.setOptionsY();
this.setOptionsTop(); this.setOptionsTop();
this.setOptionsLegend();
this.setOptionsMargin(); this.setOptionsMargin();
this.setOptionsColor(); this.setOptionsColor();
this.setOptionsData(); this.setOptionsData();
@ -323,11 +324,11 @@ export default {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const legend = this.options.legend; const legend = this.options.legend;
legend.show = optionsSetup.isShowLegend; legend.show = optionsSetup.isShowLegend;
legend.left = optionsSetup.lateralPosition == "left" ? 0 : "auto"; legend.left = optionsSetup.lateralPosition;
legend.right = optionsSetup.lateralPosition == "right" ? 0 : "auto"; legend.right = optionsSetup.lateralPosition;
legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto"; legend.top = optionsSetup.longitudinalPosition;
legend.bottom = legend.bottom =
optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto"; optionsSetup.longitudinalPosition;
legend.orient = optionsSetup.layoutFront; legend.orient = optionsSetup.layoutFront;
legend.textStyle = { legend.textStyle = {
color: optionsSetup.lengedColor, color: optionsSetup.lengedColor,
@ -335,6 +336,25 @@ export default {
}; };
legend.itemWidth = optionsSetup.lengedWidth; 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() { setOptionsColor() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
@ -416,6 +436,10 @@ export default {
if (series[0].type == "bar") { if (series[0].type == "bar") {
series[0].data = data; series[0].data = data;
} }
const legendName = [];
legendName.push('销售量')
this.options.legend['data'] = legendName;
this.setOptionsLegendName(legendName);
}, },
// 动态数据 // 动态数据
dynamicDataFn(val, refreshTime, optionsSetup) { dynamicDataFn(val, refreshTime, optionsSetup) {
@ -451,11 +475,16 @@ export default {
// series // series
const series = this.options.series; const series = this.options.series;
const legendName = [];
for (const i in series) { for (const i in series) {
if (series[i].type == "bar") { if (series[i].type == "bar") {
series[i].name = val.series[i].name;
series[i].data = val.series[i].data; 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; const legend = this.options.legend;
legend.show = optionsSetup.isShowLegend; legend.show = optionsSetup.isShowLegend;
legend.left = optionsSetup.lateralPosition; legend.left = optionsSetup.lateralPosition;
legend.top = optionsSetup.longitudinalPosition == 'top' ? 0 : 'auto'; legend.top = optionsSetup.longitudinalPosition;
legend.bottom = legend.bottom =
optionsSetup.longitudinalPosition == 'bottom' ? 0 : 'auto'; optionsSetup.longitudinalPosition;
legend.orient = optionsSetup.layoutFront; legend.orient = optionsSetup.layoutFront;
legend.textStyle = { legend.textStyle = {
color: optionsSetup.lengedColor, color: optionsSetup.lengedColor,
@ -373,6 +373,7 @@ export default {
}; };
legend.itemWidth = optionsSetup.lengedWidth; legend.itemWidth = optionsSetup.lengedWidth;
}, },
// 图例名称设置
setOptionsLegendName(name){ setOptionsLegendName(name){
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const series = this.options.series; const series = this.options.series;
@ -560,8 +561,8 @@ export default {
} }
legendName.push(val.series[i].name); legendName.push(val.series[i].name);
} }
this.options.legend['data'] = legendName;
this.options.series = series; this.options.series = series;
this.options.legend['data'] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);
}, },
} }

Write Preview
Loading…
Cancel
Save