diff --git a/report-ui/src/mixins/queryform.js b/report-ui/src/mixins/queryform.js index 62d8273d..4454041d 100644 --- a/report-ui/src/mixins/queryform.js +++ b/report-ui/src/mixins/queryform.js @@ -139,6 +139,7 @@ export default { const seriesData = []; const value = chartProperties[key]; obj["type"] = value; + obj["name"] = key; for (let i = 0; i < data.length; i++) { if (value.startsWith("xAxis")) { // 代表为x轴 diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-more-bar-line.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-more-bar-line.js index 81bae9cb..246dc047 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-more-bar-line.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-more-bar-line.js @@ -224,7 +224,7 @@ export const widgetMoreBarLine = { name: 'legendName', required: false, placeholder: '多值以英文,隔开', - value: '成功,失败,终止,成功率' + value: '' }, { type: 'vue-color', diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetMoreBarLineChart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetMoreBarLineChart.vue index f25397f6..675d6f5c 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetMoreBarLineChart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetMoreBarLineChart.vue @@ -215,8 +215,7 @@ export default { this.setOptionsX(); this.setOptionsY(); this.setOptionsLegend(); - this.setOptionsLine(); - this.setOptionsBar(); + this.setOptionsLegendName(); this.setOptionsTooltip(); this.setOptionsMargin(); this.setOptionsColor(); @@ -338,60 +337,6 @@ export default { ]; 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 设置 setOptionsTooltip() { const optionsSetup = this.optionsSetup; @@ -419,14 +364,7 @@ export default { }, setOptionsLegend() { const optionsSetup = this.optionsSetup; - const series = this.options.series; 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.left = optionsSetup.lateralPosition; legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto"; @@ -439,6 +377,16 @@ export default { }; 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() { const optionsSetup = this.optionsSetup; @@ -452,7 +400,7 @@ export default { for (const i in series) { if (series[i].type == "bar") { series[i].itemStyle.normal['color'] = arrColor[i]; - }else { + } else { series[i].lineStyle["color"] = arrColor[i]; } } @@ -465,7 +413,9 @@ export default { : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime); }, staticDataFn(val) { + const optionsSetup = this.optionsSetup; const series = this.options.series; + const legendName = []; let axis = []; let bar1 = []; let bar2 = []; @@ -481,10 +431,54 @@ export default { // x轴 this.options.xAxis.data = axis; // 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[1].data = bar2; series[2].data = bar3; 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) { if (!val) return; @@ -504,16 +498,61 @@ export default { }); }, renderingFn(val) { + const optionsSetup = this.optionsSetup; this.options.xAxis.data = val.xAxis; - // series - const series = this.options.series; - 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; + this.options.series = val.series; + const legendName = []; + for (const i in val.series) { + if (val.series[i].type == "bar") { + val.series[i].name = val.series[i].name; + 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; } } };