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 9b53f57c..6ae1677d 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 @@ -37,18 +37,26 @@ export const widgetDecoratePie = { { type: 'el-switch', label: '显示', - name: 'isShow', + name: 'isLastRingShow', required: false, placeholder: '', value: true }, { type: 'vue-color', - label: '最外环颜色', - name: 'ring1Color', + label: '0%颜色', + name: 'lastRing0Color', required: false, placeholder: '', - value: '#46d3f3' + value: '#4FADFD' + }, + { + type: 'vue-color', + label: '100%颜色', + name: 'lastRing100Color', + required: false, + placeholder: '', + value: 'rgba(235, 10, 10, 1)' }, ] }, diff --git a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-pie-percentage.js b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-pie-percentage.js index 32dcdf33..34c22e40 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-pie-percentage.js +++ b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/widget-pie-percentage.js @@ -1,6 +1,6 @@ /* * @Descripttion: 百分比图 json - * @version: + * @version: * @Author: qianlishi * @Date: 2021-08-29 07:34:01 * @LastEditors: qianlishi @@ -113,7 +113,7 @@ export const widgetPiePercentage = { name: 'lineLength', required: false, placeholder: '', - value: 15 + value: 19 }, { type: 'el-input-number', @@ -121,7 +121,7 @@ export const widgetPiePercentage = { name: 'lineWidth', required: false, placeholder: '', - value: 5 + value: 2 }, { type: 'vue-color', @@ -248,7 +248,7 @@ export const widgetPiePercentage = { name: 'height', required: false, placeholder: '该容器在1080px大屏中的高度', - value: 200, + value: 300, }, ], } 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 cc416303..b6ab9e14 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 @@ -18,15 +18,10 @@ export default { title: {}, series: [ { - name: '外环1', + name: '最外环', type: 'pie', - zlevel: 1, silent: true, radius: ['98%', '97%'], - hoverAnimation: false, - color: "#46d3f3", - //color: "rgba(88,142,197,0.5)", - // animation:false, //charts3 no label: { normal: { show: false @@ -37,7 +32,23 @@ export default { show: false } }, - data: [1] + itemStyle: { + normal: { + color: { + colorStops: [ + { + offset: 0, + color: '#4FADFD', // 0% 处的颜色 + }, + { + offset: 1, + color: 'rgba(235, 10, 10, 1)', // 100% 处的颜色 + }, + ], + }, + }, + }, + data: [0] }, { type: 'pie', @@ -303,7 +314,7 @@ export default { methods: { pie2() { let dataArr = []; - for (var i = 0; i < 8; i++) { + for (let i = 0; i < 8; i++) { if (i % 2 === 0) { dataArr.push({ name: (i + 1).toString(), @@ -329,13 +340,12 @@ export default { } }) } - } return dataArr }, pie3() { let dataArr = []; - for (var i = 0; i < 100; i++) { + for (let i = 0; i < 100; i++) { if (i % 2 === 0) { dataArr.push({ name: (i + 1).toString(), @@ -361,34 +371,59 @@ export default { } }) } - } return dataArr }, editorOptions() { + this.setOptionsLastRing(); //this.setOptionsTitle(); }, - // 标题修改 - setOptionsTitle() { - const optionsCollapse = this.optionsSetup; - const title = {}; - title.text = optionsCollapse.titleText; - title.show = optionsCollapse.isNoTitle; - title.left = optionsCollapse.textAlign; - title.textStyle = { - color: optionsCollapse.textColor, - fontSize: optionsCollapse.textFontSize, - fontWeight: optionsCollapse.textFontWeight - }; - title.subtext = optionsCollapse.subText; - title.subtextStyle = { - color: optionsCollapse.subTextColor, - fontWeight: optionsCollapse.subTextFontWeight, - fontSize: optionsCollapse.subTextFontSize + // 最外外环1 + setOptionsLastRing() { + const optionsSetup = this.optionsSetup; + const series = this.options.series[0]; + if (optionsSetup.isLastRingShow) { + series.data = [0] + }else { + series.data = '' + } + const normal = { + color: { + colorStops: [ + { + offset: 0, + color: optionsSetup.lastRing0Color, + }, + { + offset: 1, + color: optionsSetup.lastRing100Color, + }, + ], + }, }; - this.options.title = title; - }, - } + series.itemStyle['normal'] = normal; + }, + // 标题修改 + setOptionsTitle() { + const optionsCollapse = this.optionsSetup; + const title = {}; + title.text = optionsCollapse.titleText; + title.show = optionsCollapse.isNoTitle; + title.left = optionsCollapse.textAlign; + title.textStyle = { + color: optionsCollapse.textColor, + fontSize: optionsCollapse.textFontSize, + fontWeight: optionsCollapse.textFontWeight + }; + title.subtext = optionsCollapse.subText; + title.subtextStyle = { + color: optionsCollapse.subTextColor, + fontWeight: optionsCollapse.subTextFontWeight, + fontSize: optionsCollapse.subTextFontSize + }; + this.options.title = title; + }, +} } diff --git a/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPiePercentageChart.vue b/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPiePercentageChart.vue index fe819189..51df152c 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPiePercentageChart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPiePercentageChart.vue @@ -361,20 +361,20 @@ export default { this.setOptionSurplusColor(); }, setOptionsTitle() { - const optionsCollapse = this.optionsSetup; + const optionsSetup = this.optionsSetup; const title = this.options.title; title.x = "center"; title.y = "center"; const rich = { nums: { - fontSize: optionsCollapse.textNumFontSize, - color: optionsCollapse.textNumColor, - fontWeight: optionsCollapse.textNumFontWeight + fontSize: optionsSetup.textNumFontSize, + color: optionsSetup.textNumColor, + fontWeight: optionsSetup.textNumFontWeight }, percent: { - fontSize: optionsCollapse.textPerFontSize, - color: optionsCollapse.textPerColor, - fontWeight: optionsCollapse.textPerFontWeight + fontSize: optionsSetup.textPerFontSize, + color: optionsSetup.textPerColor, + fontWeight: optionsSetup.textPerFontWeight } }; title.textStyle['rich'] = rich;