From 8ec3e6abc37e530936005fd7db73c21ce630f980 Mon Sep 17 00:00:00 2001 From: qianming Date: Mon, 4 Sep 2023 14:00:31 +0800 Subject: [PATCH] =?UTF-8?q?feat--=E6=8A=98=E7=BA=BF=E5=9B=BE=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E5=A4=9A=E6=8A=98=E7=BA=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../configure/lineCharts/widget-linechart.js | 84 ++++++++- .../designer/widget/line/widgetLinechart.vue | 175 +++++++++++++----- 2 files changed, 207 insertions(+), 52 deletions(-) diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-linechart.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-linechart.js index 64e09f4b..2a2e1f04 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-linechart.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-linechart.js @@ -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' }], }, ], }, diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLinechart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLinechart.vue index 2a050d05..b66fecf5 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLinechart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLinechart.vue @@ -1,6 +1,6 @@ @@ -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); }, }, };