多柱线图动态数据调整

qianming 3 years ago
parent 418cd5f5fa
commit b36765fae4

@ -139,6 +139,7 @@ export default {
const seriesData = []; const seriesData = [];
const value = chartProperties[key]; const value = chartProperties[key];
obj["type"] = value; obj["type"] = value;
obj["name"] = key;
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
if (value.startsWith("xAxis")) { if (value.startsWith("xAxis")) {
// 代表为x轴 // 代表为x轴

@ -224,7 +224,7 @@ export const widgetMoreBarLine = {
name: 'legendName', name: 'legendName',
required: false, required: false,
placeholder: '多值以英文,隔开', placeholder: '多值以英文,隔开',
value: '成功,失败,终止,成功率' value: ''
}, },
{ {
type: 'vue-color', type: 'vue-color',

@ -215,8 +215,7 @@ export default {
this.setOptionsX(); this.setOptionsX();
this.setOptionsY(); this.setOptionsY();
this.setOptionsLegend(); this.setOptionsLegend();
this.setOptionsLine(); this.setOptionsLegendName();
this.setOptionsBar();
this.setOptionsTooltip(); this.setOptionsTooltip();
this.setOptionsMargin(); this.setOptionsMargin();
this.setOptionsColor(); this.setOptionsColor();
@ -338,60 +337,6 @@ export default {
]; ];
this.options.yAxis = yAxis; this.options.yAxis = yAxis;
}, },
// 线
setOptionsLine() {
const optionsSetup = this.optionsSetup;
const series = this.options.series;
for (const key in series) {
if (series[key].type == "line") {
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].itemStyle.borderRadius = optionsSetup.radius;
series[key].label = {
show: optionsSetup.isShowLine,
position: "top",
distance: optionsSetup.distanceLine,
fontSize: optionsSetup.fontSizeLine,
color: optionsSetup.subTextColorLine,
fontWeight: optionsSetup.fontWeightLine
};
}
}
this.options.series = series;
},
//
setOptionsBar() {
const optionsSetup = this.optionsSetup;
const series = this.options.series;
for (const key in series) {
if (series[key].type == "bar") {
series[key].label = {
show: optionsSetup.isShowBar,
position: "top",
distance: optionsSetup.distanceBar,
fontSize: optionsSetup.fontSizeBar,
color: optionsSetup.subTextColorBar,
fontWeight: optionsSetup.fontWeightBar
};
series[key].barWidth = optionsSetup.maxWidth;
series[key].itemStyle.normal['barBorderRadius'] = optionsSetup.radius;
}
}
this.options.series = series;
},
// tooltip // tooltip
setOptionsTooltip() { setOptionsTooltip() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
@ -419,14 +364,7 @@ export default {
}, },
setOptionsLegend() { setOptionsLegend() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const series = this.options.series;
const legend = this.options.legend; const legend = this.options.legend;
let legendName = optionsSetup.legendName;
let arr = legendName.split(",")
for (const i in series) {
series[i].name = arr[i];
}
legend.data = arr;
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 == "top" ? 0 : "auto";
@ -439,6 +377,16 @@ export default {
}; };
legend.itemWidth = optionsSetup.lengedWidth; legend.itemWidth = optionsSetup.lengedWidth;
}, },
setOptionsLegendName() {
const optionsSetup = this.optionsSetup;
const legend = this.options.legend;
const legendName = optionsSetup.legendName;
if (legendName != null) {
const arr = legendName.split("|");
console.log(arr)
legend.data = arr;
}
},
// //
setOptionsColor() { setOptionsColor() {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
@ -452,7 +400,7 @@ export default {
for (const i in series) { for (const i in series) {
if (series[i].type == "bar") { if (series[i].type == "bar") {
series[i].itemStyle.normal['color'] = arrColor[i]; series[i].itemStyle.normal['color'] = arrColor[i];
}else { } else {
series[i].lineStyle["color"] = arrColor[i]; series[i].lineStyle["color"] = arrColor[i];
} }
} }
@ -465,7 +413,9 @@ export default {
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime); : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
}, },
staticDataFn(val) { staticDataFn(val) {
const optionsSetup = this.optionsSetup;
const series = this.options.series; const series = this.options.series;
const legendName = [];
let axis = []; let axis = [];
let bar1 = []; let bar1 = [];
let bar2 = []; let bar2 = [];
@ -481,10 +431,54 @@ export default {
// x // x
this.options.xAxis.data = axis; this.options.xAxis.data = axis;
// series // series
for (const i in series) {
if (series[i].type == "bar") {
series[i].label = {
show: optionsSetup.isShowBar,
position: "top",
distance: optionsSetup.distanceBar,
fontSize: optionsSetup.fontSizeBar,
color: optionsSetup.subTextColorBar,
fontWeight: optionsSetup.fontWeightBar
};
series[i].barWidth = optionsSetup.maxWidth;
series[i].itemStyle.normal['barBorderRadius'] = optionsSetup.radius;
} else if (series[i].type == "line") {
series[i].yAxisIndex = 1;
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].lineStyle = {
width: optionsSetup.lineWidth
};
series[i].label = {
show: optionsSetup.isShowLine,
position: "top",
distance: optionsSetup.distanceLine,
fontSize: optionsSetup.fontSizeLine,
color: optionsSetup.subTextColorLine,
fontWeight: optionsSetup.fontWeightLine
};
}
}
series[0].data = bar1; series[0].data = bar1;
series[1].data = bar2; series[1].data = bar2;
series[2].data = bar3; series[2].data = bar3;
series[3].data = line; series[3].data = line;
legendName.push(series[0].name);
legendName.push(series[1].name);
legendName.push(series[2].name);
legendName.push(series[3].name);
this.options.legend["data"] = legendName;
}, },
dynamicDataFn(val, refreshTime) { dynamicDataFn(val, refreshTime) {
if (!val) return; if (!val) return;
@ -504,16 +498,61 @@ export default {
}); });
}, },
renderingFn(val) { renderingFn(val) {
const optionsSetup = this.optionsSetup;
this.options.xAxis.data = val.xAxis; this.options.xAxis.data = val.xAxis;
// series this.options.series = val.series;
const series = this.options.series; const legendName = [];
for (const i in series) { for (const i in val.series) {
for (const j in val.series) { if (val.series[i].type == "bar") {
if (series[i].type == val.series[j].type) { val.series[i].name = val.series[i].name;
series[i].data = val.series[j].data; val.series[i].type = val.series[i].type;
val.series[i].label = {
show: optionsSetup.isShowBar,
position: "top",
distance: optionsSetup.distanceBar,
fontSize: optionsSetup.fontSizeBar,
color: optionsSetup.subTextColorBar,
fontWeight: optionsSetup.fontWeightBar
};
val.series[i].barWidth = optionsSetup.maxWidth;
val.series[i].itemStyle = {
normal: {
barBorderRadius: optionsSetup.radius,
}
};
val.series[i].data = val.series[i].data;
} else if (val.series[i].type == "line") {
val.series[i].name = val.series[i].name;
val.series[i].type = val.series[i].type;
val.series[i].yAxisIndex = 1;
val.series[i].showSymbol = optionsSetup.markPoint;
val.series[i].symbolSize = optionsSetup.pointSize;
val.series[i].smooth = optionsSetup.smoothCurve;
if (optionsSetup.area) {
val.series[i].areaStyle = {
opacity: optionsSetup.areaThickness / 100
};
} else {
val.series[i].areaStyle = {
opacity: 0
};
} }
} val.series[i].lineStyle = {
} width: optionsSetup.lineWidth
};
val.series[i].label = {
show: optionsSetup.isShowLine,
position: "top",
distance: optionsSetup.distanceLine,
fontSize: optionsSetup.fontSizeLine,
color: optionsSetup.subTextColorLine,
fontWeight: optionsSetup.fontWeightLine
};
val.series[i].data = val.series[i].data;
};
legendName.push(val.series[i].name);
};
this.options.legend["data"] = legendName;
} }
} }
}; };

Loading…
Cancel
Save