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

feat--折线图支持多折线

Browse Source
qianming 1 year ago
parent 5d2753b361
commit 8ec3e6abc3
2 changed files with 207 additions and 52 deletions
Show Stats Download Patch File Download Diff File

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

@ -225,6 +225,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: 'legendColor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'el-input-number',
label: '字体字号',
name: 'legendFontSize',
required: false,
placeholder: '',
value: 12,
},
{
type: 'el-input-number',
label: '图例宽度',
name: 'legendWidth',
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: [
@ -576,7 +658,7 @@ export const widgetLinechart = {
label: '',
name: 'customColor',
required: false,
value: [{ color: '#1E90FF' }],
value: [{ color: '#ff7f50' }, { color: '#87cefa' }, { color: '#da70d6' }, { color: '#32cd32' }, { color: '#6495ed' }],
},
],
},

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

@ -9,6 +9,7 @@ import {
originWidgetLinkageLogic,
targetWidgetLinkageLogic,
} from "@/views/bigscreenDesigner/designer/linkageLogic";
export default {
name: "WidgetLinechart",
components: {},
@ -115,11 +116,10 @@ export default {
this.setOptionsTitle();
this.setOptionsX();
this.setOptionsY();
this.setOptionsTop();
this.setOptionsLegend();
this.setOptionsTooltip();
this.setOptionsData();
this.setOptionsMargin();
this.setOptionsColor();
},
// 标题修改
setOptionsTitle() {
@ -232,40 +232,6 @@ export default {
};
this.options.yAxis = yAxis;
},
// 折线设置
setOptionsTop() {
const optionsSetup = this.optionsSetup;
const series = this.options.series;
for (const key in series) {
if (series[key].type == "line") {
series[key].symbol = optionsSetup.symbol;
series[key].showSymbol = optionsSetup.markPoint;
series[key].symbolSize = optionsSetup.pointSize;
series[key].smooth = optionsSetup.smoothCurve;
if (optionsSetup.area) {
series[key].areaStyle = {
opacity: optionsSetup.areaThickness / 100,
};
} else {
series[key].areaStyle = {
opacity: 0,
};
}
series[key].lineStyle = {
width: optionsSetup.lineWidth,
};
series[key].label = {
show: optionsSetup.isShow,
position: "top",
distance: 10,
fontSize: optionsSetup.fontSize,
color: optionsSetup.dataColor,
fontWeight: optionsSetup.fontWeight,
};
}
}
this.options.series = series;
},
// tooltip 设置
setOptionsTooltip() {
const optionsSetup = this.optionsSetup;
@ -291,17 +257,39 @@ export default {
};
this.options.grid = grid;
},
// 图例颜色修改
setOptionsColor() {
// 图例
setOptionsLegend() {
const optionsSetup = this.optionsSetup;
const customColor = optionsSetup.customColor;
if (!customColor) return;
const arrColor = [];
for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color);
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.legendColor,
fontSize: optionsSetup.legendFontSize,
};
legend.itemWidth = optionsSetup.legendWidth;
},
// 图例名称设置
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;
}
this.options.color = arrColor;
this.options = Object.assign({}, this.options);
},
// 处理数据
setOptionsData(e, paramsConfig) {
@ -330,6 +318,13 @@ export default {
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
},
staticDataFn(val) {
const optionsSetup = this.optionsSetup;
//颜色
const customColor = optionsSetup.customColor;
const arrColor = [];
for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color);
}
const series = this.options.series;
let axis = [];
let data = [];
@ -337,12 +332,46 @@ export default {
axis[i] = val[i].axis;
data[i] = val[i].data;
}
const legendName = [];
legendName.push("line");
// x轴
this.options.xAxis.data = axis;
// series
for (const i in series) {
if (series[i].type == "line") {
series[i].symbol = optionsSetup.symbol;
series[i].showSymbol = optionsSetup.markPoint;
series[i].symbolSize = optionsSetup.pointSize;
series[i].smooth = optionsSetup.smoothCurve;
if (optionsSetup.area) {
series[i].areaStyle = {
opacity: optionsSetup.areaThickness / 100,
};
} else {
series[i].areaStyle = {
opacity: 0,
};
}
series[i].itemStyle = {
normal: {
color: arrColor[i],
},
};
series[i].lineStyle = {
color: arrColor[i],
width: optionsSetup.lineWidth,
};
series[i].label = {
show: optionsSetup.isShow,
position: "top",
distance: 10,
fontSize: optionsSetup.fontSize,
color: optionsSetup.dataColor,
fontWeight: optionsSetup.fontWeight,
};
series[i].data = data;
this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName);
}
}
},
@ -364,15 +393,59 @@ export default {
});
},
renderingFn(val) {
const optionsSetup = this.optionsSetup;
//颜色
const customColor = optionsSetup.customColor;
const arrColor = [];
for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color);
}
// x轴
this.options.xAxis.data = val.xAxis;
// series
const series = this.options.series;
for (const i in series) {
if (series[i].type == "line") {
series[i].data = val.series[i].data;
const series = [];
const legendName = [];
for (const i in val.series) {
legendName.push(val.series[i].name);
const obj = {};
if (val.series[i].type == 'line') {
obj.type = 'line';
obj.symbol = optionsSetup.symbol;
obj.showSymbol = optionsSetup.markPoint;
obj.symbolSize = optionsSetup.pointSize;
obj.smooth = optionsSetup.smoothCurve;
if (optionsSetup.area) {
obj.areaStyle = {
opacity: optionsSetup.areaThickness / 100,
};
} else {
obj.areaStyle = {
opacity: 0,
};
}
obj.itemStyle = {
normal: {
color: arrColor[i],
},
};
obj.lineStyle = {
color: arrColor[i],
width: optionsSetup.lineWidth,
};
obj.label = {
show: optionsSetup.isShow,
position: "top",
distance: 10,
fontSize: optionsSetup.fontSize,
color: optionsSetup.dataColor,
fontWeight: optionsSetup.fontWeight,
};
obj.data = val.series[i].data;
series.push(obj);
}
}
this.options.series = series;
this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName);
},
},
};

Write Preview
Loading…
Cancel
Save