diff --git a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-decorate-pie.js b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-decorate-pie.js index bff9ed91..ab42f351 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-decorate-pie.js +++ b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-decorate-pie.js @@ -9,7 +9,7 @@ export const widgetDecoratePie = { code: 'widgetDecoratePieChart', type: 'chart', - label: '静态装饰饼图', + label: '装饰饼图', icon: 'iconicon_tubiao_bingtu', options: { // 配置 @@ -20,7 +20,7 @@ export const widgetDecoratePie = { name: 'layerName', required: false, placeholder: '', - value: '装饰饼图', + value: '静态装饰饼图', }, { type: 'vue-color', @@ -140,7 +140,7 @@ export const widgetDecoratePie = { name: 'outRingColor', required: false, placeholder: '', - value: '#28E8FA' + value: '#0dc2fe' }, { type: 'el-input-number', @@ -188,7 +188,7 @@ export const widgetDecoratePie = { name: 'outSplitColor', required: false, placeholder: '', - value: '#28E8FA' + value: '#0dc2fe' }, { type: 'el-switch', @@ -228,7 +228,7 @@ export const widgetDecoratePie = { name: 'outTickColor', required: false, placeholder: '', - value: '#28E8FA' + value: '#0dc2fe' }, ] }, @@ -249,7 +249,7 @@ export const widgetDecoratePie = { name: 'inRingColor', required: false, placeholder: '', - value: '#28E8FA' + value: '#0dc2fe' }, { type: 'el-input-number', @@ -297,7 +297,7 @@ export const widgetDecoratePie = { name: 'inSplitColor', required: false, placeholder: '', - value: '#28E8FA' + value: '#0dc2fe' }, { type: 'el-switch', @@ -337,7 +337,70 @@ export const widgetDecoratePie = { name: 'inTickColor', required: false, placeholder: '', - value: '#28E8FA' + value: '#0dc2fe' + }, + ] + }, + { + name: '环外环设置', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'isRingOnRingShow', + required: false, + placeholder: '', + value: true + }, + { + type: 'vue-color', + label: '颜色', + name: 'ringOnRingColor', + required: false, + placeholder: '', + value: '#4FADFD' + }, + ] + }, + { + name: '中饼图设置', + list: [ + { + type: 'el-input-number', + label: '半径', + name: 'pieWidth', + required: false, + placeholder: '', + value: 40 + }, + { + type: 'vue-color', + label: '颜色', + name: 'pieColor', + required: false, + placeholder: '', + value: '#0dc2fe' + }, + { + type: 'vue-color', + label: '边框颜色', + name: 'pieBorderColor', + required: false, + placeholder: '', + value: '#3D4268' + }, + { + type: 'el-select', + label: '分块', + name: 'pieBlocks', + required: false, + placeholder: '', + selectOptions: [ + {code: 'four', name: '十字星'}, + {code: 'five', name: '五角星'}, + {code: 'six', name: '六芒星'}, + ], + value: 'six' }, ] }, diff --git a/report-ui/src/views/report/bigscreen/designer/widget/decorate/widgetDecoratePieChart.vue b/report-ui/src/views/report/bigscreen/designer/widget/decorate/widgetDecoratePieChart.vue index 3699d770..92cbb97a 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/decorate/widgetDecoratePieChart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/decorate/widgetDecoratePieChart.vue @@ -104,6 +104,7 @@ export default { radius: ['80%', '78%'], color: ["#fc8d89", "#46d3f3", "rgba(203,203,203,.2)"], startAngle: 50, + avoidLabelOverlap: true, hoverAnimation: false, label: { normal: { @@ -159,7 +160,6 @@ export default { silent: true, radius: ['60%', '59%'], hoverAnimation: false, - data: [1], label: { normal: { show: false @@ -170,17 +170,11 @@ export default { show: false } }, - itemStyle: { - normal: { - color: '#28E8FA', - show: false, - }, - }, }, { name: '中间环形图', type: 'pie', - radius: ['35%', '55%'], + radius: ['40%', '55%'], avoidLabelOverlap: false, hoverAnimation: false, itemStyle: { @@ -258,6 +252,16 @@ export default { this.setOptionsThreeRing(); this.setOptionsOutRing(); this.setOptionsInRing(); + this.setOptionsRingOnRing(); + this.setOptionsPie(); + }, + // 颜色设置 + setColor(color) { + const nullColor = 'rgba(0,0,0,0)' + if (color == "") { + color = nullColor + } + return color }, // 最外外环1 setOptionsLastRing() { @@ -268,24 +272,16 @@ export default { } else { series.data = '' } - let lastRing0Color = optionsSetup.lastRing0Color; - let lastRing100Color = optionsSetup.lastRing100Color; - if (lastRing0Color == "") { - lastRing0Color = 'rgba(0,0,0,0)' - } - if (lastRing100Color == "") { - lastRing100Color = 'rgba(0,0,0,0)' - } const normal = { color: { colorStops: [ { offset: 0, - color: lastRing0Color, + color: this.setColor(optionsSetup.lastRing0Color), }, { offset: 1, - color: lastRing100Color, + color: this.setColor(optionsSetup.lastRing100Color), }, ], }, @@ -294,10 +290,6 @@ export default { }, setRingPie2() { const optionsSetup = this.optionsSetup; - let eightColor = optionsSetup.eightColor; - if (eightColor == "") { - eightColor = 'rgba(0,0,0,0)'; - } let dataArr = []; for (let i = 0; i < 8; i++) { if (i % 2 === 0) { @@ -306,7 +298,7 @@ export default { value: 25, itemStyle: { normal: { - color: eightColor, + color: this.setColor(optionsSetup.eightColor), borderWidth: 0, borderColor: 'rgba(0,0,0,0)' } @@ -334,10 +326,6 @@ export default { }, setRingPie3() { const optionsSetup = this.optionsSetup; - let dottedColor = optionsSetup.dottedColor; - if (dottedColor == "") { - dottedColor = 'rgba(0,0,0,0)'; - } let dataArr = []; for (let i = 0; i < (optionsSetup.dottedNum * 2); i++) { if (i % 2 === 0) { @@ -346,7 +334,7 @@ export default { value: 25, itemStyle: { normal: { - color: dottedColor, + color: this.setColor(optionsSetup.dottedColor), borderWidth: 0, borderColor: 'rgba(0,0,0,0)' } @@ -359,8 +347,6 @@ export default { itemStyle: { normal: { color: 'rgba(0,0,0,0)', - borderWidth: 0, - borderColor: "rgba(0,0,0,0)" } } }) @@ -376,62 +362,38 @@ export default { // 三分环 setOptionsThreeRing() { const optionsSetup = this.optionsSetup; - const series = this.options.series; - let three1Color = optionsSetup.three1Color; - let three2Color = optionsSetup.three2Color; - let three3Color = optionsSetup.three3Color; - if (three1Color == "") { - three1Color = 'rgba(0,0,0,0)' - } - if (three2Color == "") { - three2Color = 'rgba(0,0,0,0)' - } - if (three3Color == "") { - three3Color = 'rgba(0,0,0,0)' - } - series[4].color = [three1Color, three2Color, three3Color] + const series = this.options.series[4]; + series.color = [this.setColor(optionsSetup.three1Color), this.setColor(optionsSetup.three2Color), this.setColor(optionsSetup.three3Color)] }, // 外指标环 setOptionsOutRing() { const optionsSetup = this.optionsSetup; const series = this.options.series; - let outRingColor = optionsSetup.outRingColor - if (outRingColor == "") { - outRingColor = 'rgba(0,0,0,0)'; - } const axisLine = { show: optionsSetup.isOutRingShow, lineStyle: { width: optionsSetup.outRingWidth, shadowBlur: 0, color: [ - [1, outRingColor] + [1, this.setColor(optionsSetup.outRingColor)] ] } }; - let outTickColor = optionsSetup.outTickColor - if (outTickColor == "") { - outTickColor = 'rgba(0,0,0,0)'; - } const axisTick = { show: optionsSetup.isOutTickShow, lineStyle: { - color: outTickColor, + color: this.setColor(optionsSetup.outTickColor), width: optionsSetup.outTickWidth }, length: optionsSetup.outTickLength, splitNumber: optionsSetup.outTickWidth }; series[5].splitNumber = optionsSetup.outSplitNum - let outSplitColor = optionsSetup.outSplitColor - if (outSplitColor == "") { - outSplitColor = 'rgba(0,0,0,0)' - } const splitLine = { show: optionsSetup.isOutSplitShow, length: optionsSetup.outSplitLength, lineStyle: { - color: outSplitColor, + color: this.setColor(optionsSetup.outSplitColor), width: optionsSetup.outSplitWidth, } }; @@ -443,43 +405,31 @@ export default { setOptionsInRing() { const optionsSetup = this.optionsSetup; const series = this.options.series; - let inRingColor = optionsSetup.inRingColor - if (inRingColor == "") { - inRingColor = 'rgba(0,0,0,0)' - } const axisLine = { show: optionsSetup.isInRingShow, - lineStyle: { + lineStyle: { width: optionsSetup.inRingWidth, - shadowBlur: 0, - color: [ - [1, inRingColor], + shadowBlur: 0, + color: [ + [1, this.setColor(optionsSetup.inRingColor)], ], }, }; - let inTickColor = optionsSetup.inTickColor - if (inTickColor == "") { - inTickColor = 'rgba(0,0,0,0)' - } const axisTick = { show: optionsSetup.isInTickShow, - lineStyle: { - color: inTickColor, - width: optionsSetup.inTickWidth, + lineStyle: { + color: this.setColor(optionsSetup.inTickColor), + width: optionsSetup.inTickWidth, }, length: optionsSetup.inTickLength, - splitNumber: optionsSetup.inTickNum, + splitNumber: optionsSetup.inTickNum, }; series[6].splitNumber = optionsSetup.inSplitNum - let inSplitColor = optionsSetup.inSplitColor - if (inSplitColor == "") { - inSplitColor = 'rgba(0,0,0,0)' - } const splitLine = { show: optionsSetup.isInSplitShow, length: optionsSetup.inSplitLength, lineStyle: { - color: inSplitColor, + color: this.setColor(optionsSetup.inSplitColor), width: optionsSetup.inSplitWidth } }; @@ -487,6 +437,46 @@ export default { series[6].axisTick = axisTick series[6].splitLine = splitLine }, + // 环外环设置 + setOptionsRingOnRing() { + const optionsSetup = this.optionsSetup; + const series = this.options.series[7]; + if (optionsSetup.isRingOnRingShow) { + series.data = [0] + } else { + series.data = '' + } + const itemStyle = { + normal: { + color: this.setColor(optionsSetup.ringOnRingColor), + } + } + series.itemStyle = itemStyle + }, + // 中饼图设置 + setOptionsPie() { + const optionsSetup = this.optionsSetup; + const series = this.options.series[8]; + let width = optionsSetup.pieWidth + const pieWidth = width + "%" + series.radius = [pieWidth, '55%'] + + let pieBlocks = optionsSetup.pieBlocks + if (pieBlocks == "six") { + series.data = [25, 25, 25, 25, 25, 25] + } else if (pieBlocks == "five") { + series.data = [30, 30, 30, 30, 30] + } else { + series.data = [40, 40, 40, 40] + } + const itemStyle = { + normal: { + color: this.setColor(optionsSetup.pieColor), + borderColor: this.setColor(optionsSetup.pieBorderColor), + } + } + series.itemStyle = itemStyle + } } }