From 22c5b17484f69243ef4120da9a93bfc8380627ff Mon Sep 17 00:00:00 2001 From: qianming Date: Fri, 22 Sep 2023 16:59:08 +0800 Subject: [PATCH] =?UTF-8?q?feat--=E6=9F=B1=E7=8A=B6=E5=9B=BE=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E5=A4=9A=E6=9F=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../configure/barCharts/widget-barchart.js | 106 +++++++++ .../designer/widget/bar/widgetBarchart.vue | 204 ++++++++++++------ .../designer/widget/line/widgetLinechart.vue | 4 - 3 files changed, 250 insertions(+), 64 deletions(-) diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-barchart.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-barchart.js index 5a966400..f8f0b9fd 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-barchart.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-barchart.js @@ -67,6 +67,18 @@ export const widgetBarchart = { placeholder: '', value: 0, }, + { + type: 'el-select', + label: '堆叠样式', + name: 'stackStyle', + required: false, + placeholder: '', + selectOptions: [ + { code: 'leftRight', name: '左右堆叠' }, + { code: 'upDown', name: '上下堆叠' }, + ], + value: 'leftRight' + }, ], }, { @@ -197,6 +209,88 @@ export const widgetBarchart = { }, ], }, + { + 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: [ @@ -548,6 +642,18 @@ export const widgetBarchart = { { name: '自定义配色', list: [ + { + type: 'el-select', + label: '配色样式', + name: 'colorStyle', + required: false, + placeholder: '', + selectOptions: [ + { code: 'same', name: '同色' }, + { code: 'unsame', name: '异色' }, + ], + value: 'same' + }, { type: 'customColor', label: '', diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue index 29af2862..4501758a 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue @@ -1,6 +1,6 @@ @@ -9,6 +9,7 @@ import { originWidgetLinkageLogic, targetWidgetLinkageLogic, } from "@/views/bigscreenDesigner/designer/linkageLogic"; + export default { name: "WidgetBarchart", components: {}, @@ -108,10 +109,9 @@ export default { this.setOptionsTitle(); this.setOptionsX(); this.setOptionsY(); - this.setOptionsTop(); + this.setOptionsLegend(); this.setOptionsTooltip(); this.setOptionsMargin(); - this.setOptionsColor(); this.setOptionsData(); }, // 标题修改 @@ -225,36 +225,6 @@ export default { }; this.options.yAxis = yAxis; }, - // 数值设定 or 柱体设置 - setOptionsTop() { - const optionsSetup = this.optionsSetup; - const series = this.options.series; - if (series[0].type == "bar") { - if (optionsSetup.verticalShow) { - series[0].label = { - show: optionsSetup.isShow, - position: "right", - distance: optionsSetup.distance, - textStyle: { - fontSize: optionsSetup.fontSize, - color: optionsSetup.dataColor, - fontWeight: optionsSetup.fontWeight, - }, - }; - } else { - series[0].label = { - show: optionsSetup.isShow, - position: "top", - distance: optionsSetup.distance, - fontSize: optionsSetup.fontSize, - color: optionsSetup.dataColor, - fontWeight: optionsSetup.fontWeight, - }; - } - } - series[0].barWidth = optionsSetup.maxWidth; - series[0].barMinHeight = optionsSetup.minHeight; - }, // tooltip 设置 setOptionsTooltip() { const optionsSetup = this.optionsSetup; @@ -280,33 +250,62 @@ 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 itemStyle = { - normal: { - color: (params) => { - return arrColor[params.dataIndex]; - }, - barBorderRadius: optionsSetup.radius, - }, + 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, }; - for (const key in this.options.series) { - if (this.options.series[key].type == "bar") { - this.options.series[key].itemStyle = itemStyle; + 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; + } + }, + //获取堆叠样式 + getStackStyle() { + const optionsSetup = this.optionsSetup; + let style = ""; + if (optionsSetup.stackStyle == "upDown") { + style = "total"; + } + return style; + }, + // 获得位置 + getOptionsPosition() { + const optionsSetup = this.optionsSetup; + let position = ""; + if (optionsSetup.verticalShow) { + position = "right"; + } else { + position = "top"; } - this.options = Object.assign({}, this.options); + return position; }, // 数据解析 setOptionsData(e, paramsConfig) { - const optionsSetup = this.optionsSetup; const optionsData = this.optionsData; // 数据类型 静态 or 动态 // 联动接收者逻辑开始 optionsData.dynamicData = optionsData.dynamicData || {}; // 兼容 dynamicData undefined @@ -332,6 +331,12 @@ export default { // 静态数据 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 = []; @@ -339,6 +344,8 @@ export default { axis[i] = val[i].axis; data[i] = val[i].data; } + const legendName = []; + legendName.push("bar"); // x轴 if (optionsSetup.verticalShow) { this.options.xAxis.data = []; @@ -351,8 +358,42 @@ export default { this.options.xAxis.type = "category"; this.options.yAxis.type = "value"; } - if (series[0].type == "bar") { - series[0].data = data; + for (const i in series) { + if (series[i].type == "bar") { + series[i].type = "bar"; + series[i].barGap = "0%"; + series[i].barWidth = optionsSetup.maxWidth; + series[i].barMinHeight = optionsSetup.minHeight; + series[i].label = { + show: optionsSetup.isShow, + position: this.getOptionsPosition(), + distance: optionsSetup.distance, + fontSize: optionsSetup.fontSize, + color: optionsSetup.dataColor, + fontWeight: optionsSetup.fontWeight, + }; + // 获取颜色样式 + if (optionsSetup.colorStyle == 'same') { + series[i].itemStyle = { + normal: { + color: arrColor[i], + barBorderRadius: optionsSetup.radius, + }, + }; + } else { + series[i].itemStyle = { + normal: { + color: (params) => { + return arrColor[params.dataIndex]; + }, + barBorderRadius: optionsSetup.radius, + }, + }; + } + series[i].data = data; + this.options.legend["data"] = legendName; + this.setOptionsLegendName(legendName); + } } }, // 动态数据 @@ -377,6 +418,14 @@ export default { }); }, renderingFn(optionsSetup, val) { + //颜色 + const customColor = optionsSetup.customColor; + const arrColor = []; + for (let i = 0; i < customColor.length; i++) { + arrColor.push(customColor[i].color); + } + const series = []; + const legendName = []; // x轴 if (optionsSetup.verticalShow) { this.options.xAxis.data = []; @@ -389,13 +438,48 @@ export default { this.options.xAxis.type = "category"; this.options.yAxis.type = "value"; } - // series - const series = this.options.series; - for (const i in series) { - if (series[i].type == "bar") { - series[i].data = val.series[i].data; + for (const i in val.series) { + legendName.push(val.series[i].name); + const obj = {}; + if (val.series[i].type == "bar") { + obj.type = "bar"; + obj.barGap = "0%"; + obj.stack = this.getStackStyle(); + obj.barWidth = optionsSetup.maxWidth; + obj.barMinHeight = optionsSetup.minHeight; + obj.label = { + show: optionsSetup.isShow, + position: this.getOptionsPosition(), + distance: optionsSetup.distance, + fontSize: optionsSetup.fontSize, + color: optionsSetup.dataColor, + fontWeight: optionsSetup.fontWeight, + }; + // 获取颜色样式 + if (optionsSetup.colorStyle == 'same') { + obj.itemStyle = { + normal: { + color: arrColor[i], + barBorderRadius: optionsSetup.radius, + }, + }; + } else { + obj.itemStyle = { + normal: { + color: (params) => { + return arrColor[params.dataIndex]; + }, + barBorderRadius: optionsSetup.radius, + }, + }; + } + obj.data = val.series[i].data; + series.push(obj); } } + this.options.series = series; + this.options.legend["data"] = legendName; + this.setOptionsLegendName(legendName); }, }, }; 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 b66fecf5..8e206cd9 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLinechart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/line/widgetLinechart.vue @@ -293,9 +293,6 @@ export default { }, // 处理数据 setOptionsData(e, paramsConfig) { - console.log("ces", e); - console.log("ces", paramsConfig); - const optionsData = this.optionsData; // 数据类型 静态 or 动态 optionsData.dynamicData = optionsData.dynamicData || {}; // 兼容 dynamicData undefined const myDynamicData = optionsData.dynamicData; @@ -312,7 +309,6 @@ export default { } }); } - console.log(myDynamicData); optionsData.dataType == "staticData" ? this.staticDataFn(optionsData.staticData) : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);