From 31a9b860a81c0e18a985b3ef8e95cb04586b721d Mon Sep 17 00:00:00 2001 From: qianming Date: Mon, 14 Nov 2022 16:57:40 +0800 Subject: [PATCH] =?UTF-8?q?bugfix-=E5=A4=9A=E6=9F=B1=E7=BA=BF=E5=9B=BE?= =?UTF-8?q?=E5=9B=BE=E4=BE=8B=E5=92=8C=E9=A2=9C=E8=89=B2=E5=AF=B9=E5=BA=94?= =?UTF-8?q?=E4=B8=8D=E4=B8=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../barlineCharts/widget-barlinechart.js | 14 ++- .../barlineCharts/widget-more-bar-line.js | 18 ++- .../widget/barline/widgetBarlinechart.vue | 1 + .../widget/barline/widgetMoreBarLineChart.vue | 103 ++++++++---------- 4 files changed, 71 insertions(+), 65 deletions(-) diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-barlinechart.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-barlinechart.js index 8ea9696d..eb43fa25 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-barlinechart.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-barlinechart.js @@ -80,6 +80,18 @@ export const widgetBarlinechart = { placeholder: '', value: 5, }, + { + type: 'el-select', + label: '点样式', + name: 'symbol', + required: false, + placeholder: '', + selectOptions: [ + {code: 'circle', name: '实心点'}, + {code: 'emptyCircle', name: '空心点'}, + ], + value: 'circle' + }, { type: 'el-switch', label: '平滑曲线', @@ -855,7 +867,7 @@ export const widgetBarlinechart = { label: '', name: 'customColor', required: false, - value: [{color: '#00F4FFFF'}, {color: '#e68b55'}], + value: [{color: '#ff7f50'}, {color: '#87cefa'}, {color: '#da70d6'}, {color: '#32cd32'}, {color: '#6495ed'}], }, ], }, diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-more-bar-line.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-more-bar-line.js index 7b9302c1..e291ece6 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-more-bar-line.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-more-bar-line.js @@ -72,6 +72,18 @@ export const widgetMoreBarLine = { placeholder: '', value: 3, }, + { + type: 'el-select', + label: '点样式', + name: 'symbol', + required: false, + placeholder: '', + selectOptions: [ + {code: 'circle', name: '实心点'}, + {code: 'emptyCircle', name: '空心点'}, + ], + value: 'circle' + }, { type: 'el-switch', label: '平滑曲线', @@ -847,11 +859,7 @@ export const widgetMoreBarLine = { label: '', name: 'customColor', required: false, - value: [ - {color: '#4bdfff'}, - {color: '#55f49c'}, - {color: '#ffa43a'}, - ], + value: [{color: '#ff7f50'}, {color: '#87cefa'}, {color: '#da70d6'}, {color: '#32cd32'}, {color: '#6495ed'}], }, ], }, diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarlinechart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarlinechart.vue index cded0c9f..542381da 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarlinechart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarlinechart.vue @@ -303,6 +303,7 @@ export default { 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; diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetMoreBarLineChart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetMoreBarLineChart.vue index 059bb2a4..0123755f 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetMoreBarLineChart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetMoreBarLineChart.vue @@ -31,17 +31,7 @@ export default { top: '16%', containLabel: true }, - legend: { - data: ['调解成功', '调解失败', '调解终止', '调解成功率'], - left: '7%', - top: '5%', - textStyle: { - color: '#666666' - }, - itemWidth: 15, - itemHeight: 10, - itemGap: 25 - }, + legend: {}, xAxis: { type: 'category', data: ['2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019'], @@ -132,23 +122,6 @@ export default { }, data: [] }, - { - name: '调解终止', - type: 'bar', - itemStyle: { - normal: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ - offset: 0, - color: '#01c871' - }, { - offset: 1, - color: '#55f49c' - }]), - barBorderRadius: 6, - } - }, - data: [] - }, { name: '调解成功率', type: 'line', @@ -156,14 +129,13 @@ export default { smooth: false, //平滑曲线显示 symbol: 'circle', //标记的图形为实心圆 symbolSize: 8, //标记的大小 - itemStyle: { + /*itemStyle: { normal: { color: '#ffa43a', borderColor: 'rgba(255, 234, 0, 0.5)', //圆点透明 边框 borderWidth: 5 }, - - }, + },*/ lineStyle: { color: '#ffa43a' }, @@ -213,7 +185,6 @@ export default { this.setOptionsLegend(); this.setOptionsTooltip(); this.setOptionsMargin(); - this.setOptionsColor(); this.setOptionsData(); }, // 标题修改 @@ -412,7 +383,7 @@ export default { legend.itemWidth = optionsSetup.legendWidth; }, // 图例名称设置 - setOptionsLegendName(name){ + setOptionsLegendName(name) { const optionsSetup = this.optionsSetup; const series = this.options.series; const legendName = optionsSetup.legendName; @@ -422,7 +393,7 @@ export default { series[i].name = name[i]; } this.options.legend['data'] = name; - }else { + } else { const arr = legendName.split('|'); for (let i = 0; i < arr.length; i++) { series[i].name = arr[i]; @@ -430,24 +401,6 @@ export default { this.options.legend['data'] = arr } }, - // 颜色修改 - setOptionsColor() { - const optionsSetup = this.optionsSetup; - const customColor = optionsSetup.customColor; - const series = this.options.series; - if (!customColor) return; - const arrColor = []; - for (let i = 0; i < customColor.length; i++) { - arrColor.push(customColor[i].color); - } - for (const i in series) { - if (series[i].type == 'bar') { - series[i].itemStyle.normal['color'] = arrColor[i]; - } else { - series[i].lineStyle['color'] = arrColor[i]; - } - } - }, // 数据处理 setOptionsData() { const optionsData = this.optionsData; // 数据类型 静态 or 动态 @@ -457,6 +410,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 bar1 = []; @@ -468,11 +427,17 @@ export default { bar2[i] = val[i].manus; line[i] = val[i].sales; } + const legendName = []; + legendName.push('调解成功'); + legendName.push('调解失败'); + legendName.push('调解成功率'); // x轴 this.options.xAxis.data = axis; // series for (const i in series) { if (series[i].type == 'bar') { + series[i].name = legendName[i]; + series[i].type = 'bar'; series[i].label = { show: optionsSetup.isShowBar, position: 'top', @@ -483,8 +448,12 @@ export default { }; series[i].barWidth = optionsSetup.maxWidth; series[i].itemStyle.normal['barBorderRadius'] = optionsSetup.radius; + series[i].itemStyle.normal['color'] = arrColor[i]; } else if (series[i].type == 'line') { + series[i].name = legendName[i]; + series[i].type = 'line'; series[i].yAxisIndex = 1; + series[i].symbol = optionsSetup.symbol; series[i].showSymbol = optionsSetup.markPoint; series[i].symbolSize = optionsSetup.pointSize; series[i].smooth = optionsSetup.smoothCurve; @@ -497,7 +466,13 @@ export default { opacity: 0 }; } + series[i].itemStyle = { + normal: { + color: arrColor[i], + } + }; series[i].lineStyle = { + color: arrColor[i], width: optionsSetup.lineWidth }; series[i].label = { @@ -512,11 +487,7 @@ export default { } series[0].data = bar1; series[1].data = bar2; - series[3].data = line; - const legendName = []; - legendName.push('调解成功'); - legendName.push('调解失败'); - legendName.push('调解成功率'); + series[2].data = line; this.options.legend['data'] = legendName; this.setOptionsLegendName(legendName); }, @@ -539,10 +510,17 @@ 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); + } this.options.xAxis.data = val.xAxis; const series = []; const legendName = []; for (const i in val.series) { + legendName.push(val.series[i].name); const obj = {}; if (val.series[i].type == 'bar') { obj.name = val.series[i].name; @@ -558,6 +536,7 @@ export default { obj.barWidth = optionsSetup.maxWidth; obj.itemStyle = { normal: { + color: arrColor[i], barBorderRadius: optionsSetup.radius, } }; @@ -567,6 +546,7 @@ export default { obj.name = val.series[i].name; obj.type = val.series[i].type; obj.yAxisIndex = 1; + obj.symbol = optionsSetup.symbol; obj.showSymbol = optionsSetup.markPoint; obj.symbolSize = optionsSetup.pointSize; obj.smooth = optionsSetup.smoothCurve; @@ -577,9 +557,15 @@ export default { } else { obj.areaStyle = { opacity: 0 - }; + } } + obj.itemStyle = { + normal: { + color: arrColor[i], + } + }; obj.lineStyle = { + color: arrColor[i], width: optionsSetup.lineWidth }; obj.label = { @@ -593,7 +579,6 @@ export default { obj.data = val.series[i].data; series.push(obj); } - legendName.push(val.series[i].name); } this.options.series = series; this.options.legend['data'] = legendName;