diff --git a/report-ui/src/mixins/queryform.js b/report-ui/src/mixins/queryform.js index 5e48fde5..4927502a 100644 --- a/report-ui/src/mixins/queryform.js +++ b/report-ui/src/mixins/queryform.js @@ -122,9 +122,7 @@ export default { chartType == "widget-funnel" ) { return this.piechartFn(params.chartProperties, data); - } else if (chartType == "widget-gauge") { - return this.gaugeFn(params.chartProperties, data); - } else if (chartType == "widget-text") { + } else if (chartType == "widget-text") { return this.widgettext(params.chartProperties, data) } else if (chartType == "widget-stackchart") { return this.stackChartFn(params.chartProperties, data) @@ -210,7 +208,7 @@ export default { } return ananysicData; }, - gaugeFn(chartProperties, data) { + /*gaugeFn(chartProperties, data) { const ananysicData = []; for (let i = 0; i < data.length; i++) { const obj = {}; @@ -228,7 +226,7 @@ export default { ananysicData.push(obj); } return ananysicData[0]; - }, + },*/ widgettext(chartProperties, data) { const ananysicData = []; for (let i = 0; i < data.length; i++) { diff --git a/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-gauge.js b/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-gauge.js index ac56cf19..55778dbb 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-gauge.js +++ b/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-gauge.js @@ -201,7 +201,7 @@ export const widgetGauge = { name: 'splitLength', require: false, placeholder: '', - value: 20, + value: 14, }, { type: 'el-input-number', @@ -267,7 +267,7 @@ export const widgetGauge = { name: 'labelFontSize', require: false, placeholder: '', - value: 10, + value: 14, }, { type: 'el-select', @@ -333,7 +333,7 @@ export const widgetGauge = { required: false, placeholder: 'px', relactiveDom: 'dataType', - chartType: 'widget-piechart', + chartType: 'widget-text', dictKey: 'TEXT_PROPERTIES', relactiveDomValue: 'dynamicData', value: '', diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widgetGauge.vue b/report-ui/src/views/report/bigscreen/designer/widget/widgetGauge.vue index 6bfa284b..6c26c7d8 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/widgetGauge.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/widgetGauge.vue @@ -161,20 +161,93 @@ export default { }, methods: { editorOptions() { - // this.setOptions() - // this.setOptionsData() + this.setOptions() + this.setOptionsData() }, setOptions() { const optionsSetup = this.optionsSetup; const series = this.options.series; - for (const key in series) { - if (series[key].type == "gauge") { - series[key].axisLine.lineStyle.width = optionsSetup.tickMarkWeight; - series[key].axisLabel.show = optionsSetup.showScaleValue; - series[key].axisLabel.fontSize = optionsSetup.scaleFontSize; - series[key].axisTick.show = optionsSetup.showTickMarks; - series[key].detail.textStyle.fontSize = optionsSetup.targetFontSize; + if (series[0].type == 'gauge') { + const axisLine = { + show: optionsSetup.ringShow, + lineStyle: { + width: optionsSetup.pieWeight, + color: [ + [ + 0.3, + new echarts.graphic.LinearGradient(0, 1, 1, 0, [ + { + offset: 0, + color: optionsSetup.color30p0, + }, + { + offset: 0.5, + color: optionsSetup.color30p5, + }, + { + offset: 1, + color: optionsSetup.color30p10, + }, + ]), + ], + [ + 0.7, + new echarts.graphic.LinearGradient(0, 1, 1, 0, [ + { + offset: 0, + color: optionsSetup.color70p0, + }, + { + offset: 0.5, + color: optionsSetup.color70p5, + }, + { + offset: 1, + color: optionsSetup.color70p10, + }, + ]), + ], + [ + 1, + new echarts.graphic.LinearGradient(0, 1, 1, 0, [ + { + offset: 0, + color: optionsSetup.color100p0, + }, + { + offset: 0.5, + color: optionsSetup.color100p5, + }, + { + offset: 1, + color: optionsSetup.color100p10, + }, + ]), + ], + ], + }, + } + const axisTick = { + show: optionsSetup.tickShow, + distance: optionsSetup.tickDistance, + length: optionsSetup.tickLength, + lineStyle: { + color: 'auto', + width: optionsSetup.tickWidth, + }, + } + const splitLine = { + show: optionsSetup.splitShow, + distance: optionsSetup.splitDistance, + length: optionsSetup.splitLength, + lineStyle: { + color: 'auto', + width: optionsSetup.splitWidth, + }, } + series[0].axisLine = axisLine + series[0].axisTick = axisTick + series[0].splitLine = splitLine } }, setOptionsData() { @@ -184,12 +257,22 @@ export default { : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime); }, staticDataFn(val) { - //const staticData = typeof val == "string" ? JSON.parse(val) : val; + const optionsSetup = this.optionsSetup; const series = this.options.series; - for (const key in series) { - //series[key].detail.formatter = `{value}${val.unit}`; - series[key].data = val + const data = [ + { + value: val + } + ] + const detail = { + valueAnimation: true, + formatter: '{value} %', + color: optionsSetup.labelColor, + fontSize: optionsSetup.labelFontSize, + fontWeight: optionsSetup.labelFontWeight, } + series[0].data = data + series[0].detail = detail }, dynamicDataFn(val, refreshTime) { if (!val) return; @@ -209,14 +292,22 @@ export default { }); }, renderingFn(val) { + const optionsSetup = this.optionsSetup; const series = this.options.series; - for (const key in series) { - series[key].detail.formatter = `{value}${val.unit}`; - series[key].data[0] = { - value: val.value, - name: val.name || "" - }; + const data = [ + { + value: val[0].value + } + ] + const detail = { + valueAnimation: true, + formatter: '{value} %', + color: optionsSetup.labelColor, + fontSize: optionsSetup.labelFontSize, + fontWeight: optionsSetup.labelFontWeight, } + series[0].data = data + series[0].detail = detail } } };