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

图表图例调整

Browse Source
qianming 3 years ago
parent bb4045767c
commit 4fa13f3568
10 changed files with 627 additions and 360 deletions
Show Stats Download Patch File Download Diff File

160
report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-bar-compare.js
Unescape Escape View File

@ -116,6 +116,88 @@ export const widgetBarCompare = {
}, },
], ],
}, },
{
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: [
@ -460,80 +542,6 @@ export const widgetBarCompare = {
}, },
], ],
}, },
{
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: '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: '自定义配色', name: '自定义配色',
list: [ list: [
@ -635,7 +643,7 @@ export const widgetBarCompare = {
name: 'width', name: 'width',
required: false, required: false,
placeholder: '该容器在1920px大屏中的宽度', placeholder: '该容器在1920px大屏中的宽度',
value: 400, value: 500,
}, },
{ {
type: 'el-input-number', type: 'el-input-number',
@ -643,7 +651,7 @@ export const widgetBarCompare = {
name: 'height', name: 'height',
required: false, required: false,
placeholder: '该容器在1080px大屏中的高度', placeholder: '该容器在1080px大屏中的高度',
value: 200, value: 250,
}, },
], ],
} }

160
report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-bar-stack.js
Unescape Escape View File

@ -174,6 +174,88 @@ export const widgetBarStack = {
}, },
], ],
}, },
{
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: [
@ -465,80 +547,6 @@ export const widgetBarStack = {
}, },
], ],
}, },
{
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: '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: '自定义配色', name: '自定义配色',
list: [ list: [
@ -635,7 +643,7 @@ export const widgetBarStack = {
name: 'width', name: 'width',
required: false, required: false,
placeholder: '该容器在1920px大屏中的宽度', placeholder: '该容器在1920px大屏中的宽度',
value: 400, value: 500,
}, },
{ {
type: 'el-input-number', type: 'el-input-number',
@ -643,7 +651,7 @@ export const widgetBarStack = {
name: 'height', name: 'height',
required: false, required: false,
placeholder: '该容器在1080px大屏中的高度', placeholder: '该容器在1080px大屏中的高度',
value: 200, value: 250,
}, },
], ],
} }

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

@ -215,6 +215,88 @@ export const widgetBarlinechart = {
}, },
], ],
}, },
{
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: [
@ -692,7 +774,7 @@ export const widgetBarlinechart = {
name: 'width', name: 'width',
required: false, required: false,
placeholder: '该容器在1920px大屏中的宽度', placeholder: '该容器在1920px大屏中的宽度',
value: 400, value: 500,
}, },
{ {
type: 'el-input-number', type: 'el-input-number',
@ -700,7 +782,7 @@ export const widgetBarlinechart = {
name: 'height', name: 'height',
required: false, required: false,
placeholder: '该容器在1080px大屏中的高度', placeholder: '该容器在1080px大屏中的高度',
value: 200, value: 250,
}, },
], ],
} }

160
report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-line-stack.js
Unescape Escape View File

@ -194,6 +194,88 @@ export const widgetLineStack = {
}, },
], ],
}, },
{
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: [
@ -485,80 +567,6 @@ export const widgetLineStack = {
}, },
], ],
}, },
{
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: '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: '自定义配色', name: '自定义配色',
list: [ list: [
@ -655,7 +663,7 @@ export const widgetLineStack = {
name: 'width', name: 'width',
required: false, required: false,
placeholder: '该容器在1920px大屏中的宽度', placeholder: '该容器在1920px大屏中的宽度',
value: 400, value: 500,
}, },
{ {
type: 'el-input-number', type: 'el-input-number',
@ -663,7 +671,7 @@ export const widgetLineStack = {
name: 'height', name: 'height',
required: false, required: false,
placeholder: '该容器在1080px大屏中的高度', placeholder: '该容器在1080px大屏中的高度',
value: 200, value: 250,
}, },
], ],
} }

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

@ -186,6 +186,88 @@ export const widgetLinechart = {
}, },
], ],
}, },
{
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: [
@ -497,79 +579,6 @@ export const widgetLinechart = {
}, },
], ],
}, },
{
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: 'left'
},
{
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: [

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

@ -483,9 +483,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,
@ -493,6 +493,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;
@ -545,33 +564,37 @@ export default {
let xAxisList = []; let xAxisList = [];
let yAxisList = []; let yAxisList = [];
let arrayList = []; let arrayList = [];
const legendName = [];
for (const i in val) { for (const i in val) {
xAxisList[i] = val[i].axis xAxisList[i] = val[i].axis;
yAxisList[i] = val[i].name yAxisList[i] = val[i].name;
} }
xAxisList = this.setUnique(xAxisList) xAxisList = this.setUnique(xAxisList);
yAxisList = this.setUnique(yAxisList) yAxisList = this.setUnique(yAxisList);
for (const i in yAxisList) { for (const i in yAxisList) {
const data = new Array(yAxisList.length).fill(0) const data = new Array(yAxisList.length).fill(0);
for (const j in xAxisList) { for (const j in xAxisList) {
for (const k in val) { for (const k in val) {
if (val[k].name == yAxisList[i]) { if (val[k].name == yAxisList[i]) {
if (val[k].axis == xAxisList[j]) { if (val[k].axis == xAxisList[j]) {
data[j] = val[k].data data[j] = val[k].data;
} }
} }
} }
} }
arrayList.push({ arrayList.push({
name: yAxisList[i], name: yAxisList[i],
data: data data: data,
}) })
legendName.push(yAxisList[i]);
} }
this.options.series[0]['name'] = arrayList[0].name this.options.series[0]['name'] = arrayList[0].name;
this.options.series[0]['data'] = arrayList[0].data this.options.series[0]['data'] = arrayList[0].data;
this.options.series[1]['name'] = arrayList[1].name this.options.series[1]['name'] = arrayList[1].name;
this.options.series[1]['data'] = arrayList[1].data this.options.series[1]['data'] = arrayList[1].data;
this.options.yAxis[1]['data'] = xAxisList this.options.yAxis[1]['data'] = xAxisList;
this.options.legend['data'] = legendName;
this.setOptionsLegendName(legendName);
}, },
// 动态数据 // 动态数据
dynamicDataFn(val, refreshTime, optionsSetup) { dynamicDataFn(val, refreshTime, optionsSetup) {
@ -592,13 +615,18 @@ export default {
}); });
}, },
renderingFn(optionsSetup, val) { renderingFn(optionsSetup, val) {
this.options.yAxis[1]['data'] = val.xAxis const legendName = [];
this.options.yAxis[1]['data'] = val.xAxis;
if (val.series[0].type == "bar"){ if (val.series[0].type == "bar"){
this.options.series[0]['name'] = val.series[0].name this.options.series[0]['name'] = val.series[0].name;
this.options.series[0]['data'] = val.series[0].data this.options.series[0]['data'] = val.series[0].data;
this.options.series[1]['name'] = val.series[1].name this.options.series[1]['name'] = val.series[1].name;
this.options.series[1]['data'] = val.series[1].data this.options.series[1]['data'] = val.series[1].data;
} legendName.push(val.series[0].name);
legendName.push(val.series[1].name);
}
this.options.legend['data'] = legendName;
this.setOptionsLegendName(legendName);
} }
} }
}; };

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

@ -234,9 +234,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,
@ -244,6 +244,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
}
},
// 数据解析 // 数据解析
setOptionsData() { setOptionsData() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
@ -285,21 +304,22 @@ export default {
} }
//数据 //数据
const series = []; const series = [];
let xAxisList = [] let xAxisList = [];
let yAxisList = [] let yAxisList = [];
const legendName = [];
for (const i in val) { for (const i in val) {
xAxisList[i] = val[i].axis xAxisList[i] = val[i].axis;
yAxisList[i] = val[i].name yAxisList[i] = val[i].name;
} }
xAxisList = this.setUnique(xAxisList) xAxisList = this.setUnique(xAxisList);
yAxisList = this.setUnique(yAxisList) yAxisList = this.setUnique(yAxisList);
for (const i in yAxisList) { for (const i in yAxisList) {
const data = new Array(yAxisList.length).fill(0) const data = new Array(yAxisList.length).fill(0);
for (const j in xAxisList) { for (const j in xAxisList) {
for (const k in val) { for (const k in val) {
if (val[k].name == yAxisList[i]) { // a = a if (val[k].name == yAxisList[i]) {
if (val[k].axis == xAxisList[j]) { // 0725 if (val[k].axis == xAxisList[j]) {
data[j] = val[k].data data[j] = val[k].data;
} }
} }
} }
@ -317,7 +337,7 @@ export default {
distance: 10, distance: 10,
fontSize: optionsSetup.fontSize, fontSize: optionsSetup.fontSize,
color: optionsSetup.subTextColor, color: optionsSetup.subTextColor,
fontWeight: optionsSetup.fontWeight fontWeight: optionsSetup.fontWeight,
}, },
//颜色，圆角属性 //颜色，圆角属性
itemStyle: { itemStyle: {
@ -327,8 +347,9 @@ export default {
} }
} }
}) })
legendName.push(yAxisList[i]);
} }
this.options.series = series this.options.series = series;
if (optionsSetup.verticalShow) { if (optionsSetup.verticalShow) {
this.options.xAxis.data = []; this.options.xAxis.data = [];
this.options.yAxis.data = xAxisList; this.options.yAxis.data = xAxisList;
@ -340,6 +361,8 @@ export default {
this.options.xAxis.type = "category"; this.options.xAxis.type = "category";
this.options.yAxis.type = "value"; this.options.yAxis.type = "value";
} }
this.options.legend['data'] = legendName;
this.setOptionsLegendName(legendName);
}, },
// 动态数据 // 动态数据
dynamicDataFn(val, refreshTime, optionsSetup) { dynamicDataFn(val, refreshTime, optionsSetup) {
@ -379,6 +402,7 @@ export default {
this.options.yAxis.type = "value"; this.options.yAxis.type = "value";
} }
const series = []; const series = [];
const legendName = [];
for (const i in val.series) { for (const i in val.series) {
if (val.series[i].type == "bar") { if (val.series[i].type == "bar") {
series.push({ series.push({
@ -394,7 +418,7 @@ export default {
distance: 10, distance: 10,
fontSize: optionsSetup.fontSize, fontSize: optionsSetup.fontSize,
color: optionsSetup.subTextColor, color: optionsSetup.subTextColor,
fontWeight: optionsSetup.fontWeight fontWeight: optionsSetup.fontWeight,
}, },
//颜色，圆角属性 //颜色，圆角属性
itemStyle: { itemStyle: {
@ -405,8 +429,11 @@ export default {
} }
}) })
} }
legendName.push(val.series[i].name);
} }
this.options.series = series this.options.series = series;
this.options.legend['data'] = legendName;
this.setOptionsLegendName(legendName);
} }
} }
}; };

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

@ -139,7 +139,7 @@ export default {
this.setOptionsTooltip(); this.setOptionsTooltip();
this.setOptionsData(); this.setOptionsData();
this.setOptionsMargin(); this.setOptionsMargin();
//this.setOptionsLegend(); this.setOptionsLegend();
this.setOptionsColor(); this.setOptionsColor();
}, },
// 标题修改 // 标题修改
@ -341,6 +341,40 @@ export default {
}; };
this.options.grid = grid; this.options.grid = grid;
}, },
setOptionsLegend() {
const optionsSetup = this.optionsSetup;
const legend = this.options.legend;
legend.show = optionsSetup.isShowLegend;
legend.left = optionsSetup.lateralPosition;
legend.top = optionsSetup.longitudinalPosition;
legend.bottom =
optionsSetup.longitudinalPosition;
legend.orient = optionsSetup.layoutFront;
legend.textStyle = {
color: optionsSetup.lengedColor,
fontSize: optionsSetup.lengedFontSize
};
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;
@ -380,6 +414,11 @@ export default {
series[i].data = line; series[i].data = line;
} }
} }
const legendName = [];
legendName.push('bar');
legendName.push('line');
this.options.legend['data'] = legendName;
this.setOptionsLegendName(legendName);
}, },
dynamicDataFn(val, refreshTime) { dynamicDataFn(val, refreshTime) {
if (!val) return; if (!val) return;
@ -402,13 +441,17 @@ export default {
this.options.xAxis.data = val.xAxis; this.options.xAxis.data = val.xAxis;
// series // series
const series = this.options.series; const series = this.options.series;
const legendName = [];
for (const i in series) { for (const i in series) {
for (const j in val.series) { for (const j in val.series) {
if (series[i].type == val.series[j].type) { if (series[i].type == val.series[j].type) {
series[i].data = val.series[j].data; series[i].data = val.series[j].data;
} }
} }
legendName.push(val.series[i].name);
} }
this.options.legend['data'] = legendName;
this.setOptionsLegendName(legendName);
} }
} }
}; };

59
report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLineStackChart.vue
Unescape Escape View File

@ -249,9 +249,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,
@ -259,6 +259,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 optionsCollapse = this.optionsSetup; const optionsCollapse = this.optionsSetup;
@ -303,21 +322,22 @@ export default {
} }
//数据 //数据
const series = []; const series = [];
let xAxisList = [] let xAxisList = [];
let yAxisList = [] let yAxisList = [];
const legendName = [];
for (const i in val) { for (const i in val) {
xAxisList[i] = val[i].axis xAxisList[i] = val[i].axis;
yAxisList[i] = val[i].name yAxisList[i] = val[i].name;
} }
xAxisList = this.setUnique(xAxisList) xAxisList = this.setUnique(xAxisList);
yAxisList = this.setUnique(yAxisList) yAxisList = this.setUnique(yAxisList);
for (const i in yAxisList) { for (const i in yAxisList) {
const data = new Array(yAxisList.length).fill(0) const data = new Array(yAxisList.length).fill(0);
for (const j in xAxisList) { for (const j in xAxisList) {
for (const k in val) { for (const k in val) {
if (val[k].name == yAxisList[i]) { if (val[k].name == yAxisList[i]) {
if (val[k].axis == xAxisList[j]) { if (val[k].axis == xAxisList[j]) {
data[j] = val[k].data data[j] = val[k].data;
} }
} }
} }
@ -334,7 +354,7 @@ export default {
// 线条 // 线条
lineStyle: { lineStyle: {
color: arrColor[i], color: arrColor[i],
width: optionsSetup.lineWidth width: optionsSetup.lineWidth,
}, },
//点 //点
itemStyle: { itemStyle: {
@ -348,11 +368,12 @@ export default {
distance: 10, distance: 10,
fontSize: optionsSetup.fontSize, fontSize: optionsSetup.fontSize,
color: optionsSetup.subTextColor, color: optionsSetup.subTextColor,
fontWeight: optionsSetup.fontWeight fontWeight: optionsSetup.fontWeight,
}, },
}) })
legendName.push(yAxisList[i]);
} }
this.options.series = series this.options.series = series;
if (optionsSetup.verticalShow) { if (optionsSetup.verticalShow) {
this.options.xAxis.data = []; this.options.xAxis.data = [];
this.options.yAxis.data = xAxisList; this.options.yAxis.data = xAxisList;
@ -364,6 +385,8 @@ export default {
this.options.xAxis.type = "category"; this.options.xAxis.type = "category";
this.options.yAxis.type = "value"; this.options.yAxis.type = "value";
} }
this.options.legend['data'] = legendName;
this.setOptionsLegendName(legendName);
}, },
// 动态数据 // 动态数据
dynamicDataFn(val, refreshTime, optionsSetup) { dynamicDataFn(val, refreshTime, optionsSetup) {
@ -403,6 +426,7 @@ export default {
this.options.yAxis.type = "value"; this.options.yAxis.type = "value";
} }
const series = []; const series = [];
const legendName = [];
for (const i in val.series) { for (const i in val.series) {
if (val.series[i].type == "line") { if (val.series[i].type == "line") {
series.push({ series.push({
@ -418,7 +442,7 @@ export default {
// 线条 // 线条
lineStyle: { lineStyle: {
color: arrColor[i], color: arrColor[i],
width: optionsSetup.lineWidth width: optionsSetup.lineWidth,
}, },
//点 //点
itemStyle: { itemStyle: {
@ -432,12 +456,15 @@ export default {
distance: 10, distance: 10,
fontSize: optionsSetup.fontSize, fontSize: optionsSetup.fontSize,
color: optionsSetup.subTextColor, color: optionsSetup.subTextColor,
fontWeight: optionsSetup.fontWeight fontWeight: optionsSetup.fontWeight,
}, },
}) })
} }
legendName.push(val.series[i].name);
} }
this.options.series = series this.options.series = series;
this.options.legend['data'] = legendName;
this.setOptionsLegendName(legendName);
} }
} }
}; };

35
report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLinechart.vue
Unescape Escape View File

@ -266,11 +266,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,
@ -278,6 +278,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;
@ -313,6 +332,10 @@ export default {
series[i].data = data; series[i].data = data;
} }
} }
const legendName = [];
legendName.push('销售量')
this.options.legend['data'] = legendName;
this.setOptionsLegendName(legendName);
}, },
dynamicDataFn(val, refreshTime) { dynamicDataFn(val, refreshTime) {
if (!val) return; if (!val) return;
@ -336,11 +359,15 @@ export default {
this.options.xAxis.data = val.xAxis; this.options.xAxis.data = val.xAxis;
// 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 == "line") { if (series[i].type == "line") {
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);
} }
} }
}; };

Write Preview
Loading…
Cancel
Save