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

图表图例调整

Browse Source
This commit is contained in:
qianming
2022-01-21 12:50:24 +08:00
parent bb4045767c
commit 4fa13f3568
10 changed files with 627 additions and 360 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,6 @@
/*
* @Descripttion: 柱状对比图 json
* @version:
* @version:
* @Author: qianlishi
* @Date: 2021-08-29 07:39:35
* @LastEditors: qianlishi
@@ -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轴设置',
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: '自定义配色',
list: [
@@ -635,7 +643,7 @@ export const widgetBarCompare = {
name: 'width',
required: false,
placeholder: '该容器在1920px大屏中的宽度',
value: 400,
value: 500,
},
{
type: 'el-input-number',
@@ -643,7 +651,7 @@ export const widgetBarCompare = {
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 200,
value: 250,
},
],
}

160
report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-bar-stack.js
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轴设置',
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: '自定义配色',
list: [
@@ -635,7 +643,7 @@ export const widgetBarStack = {
name: 'width',
required: false,
placeholder: '该容器在1920px大屏中的宽度',
value: 400,
value: 500,
},
{
type: 'el-input-number',
@@ -643,7 +651,7 @@ export const widgetBarStack = {
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 200,
value: 250,
},
],
}

86
report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-barlinechart.js
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轴设置',
list: [
@@ -692,7 +774,7 @@ export const widgetBarlinechart = {
name: 'width',
required: false,
placeholder: '该容器在1920px大屏中的宽度',
value: 400,
value: 500,
},
{
type: 'el-input-number',
@@ -700,7 +782,7 @@ export const widgetBarlinechart = {
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 200,
value: 250,
},
],
}

160
report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-line-stack.js
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轴设置',
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: '自定义配色',
list: [
@@ -655,7 +663,7 @@ export const widgetLineStack = {
name: 'width',
required: false,
placeholder: '该容器在1920px大屏中的宽度',
value: 400,
value: 500,
},
{
type: 'el-input-number',
@@ -663,7 +671,7 @@ export const widgetLineStack = {
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 200,
value: 250,
},
],
}

155
report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-linechart.js
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轴设置',
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: '自定义配色',
list: [

66
report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarCompareChart.vue
View File

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

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

@@ -139,7 +139,7 @@ export default {
this.setOptionsTooltip();
this.setOptionsData();
this.setOptionsMargin();
//this.setOptionsLegend();
this.setOptionsLegend();
this.setOptionsColor();
},
// 标题修改
@@ -341,6 +341,40 @@ export default {
};
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() {
const optionsSetup = this.optionsSetup;
@@ -380,6 +414,11 @@ export default {
series[i].data = line;
}
}
const legendName = [];
legendName.push('bar');
legendName.push('line');
this.options.legend['data'] = legendName;
this.setOptionsLegendName(legendName);
},
dynamicDataFn(val, refreshTime) {
if (!val) return;
@@ -402,13 +441,17 @@ export default {
this.options.xAxis.data = val.xAxis;
// series
const series = this.options.series;
const legendName = [];
for (const i in series) {
for (const j in val.series) {
if (series[i].type == val.series[j].type) {
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
View File

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

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