diff --git a/nezha-fronted/src/assets/css/components/chart/chart.scss b/nezha-fronted/src/assets/css/components/chart/chart.scss index 4a4578d8f..99a264c60 100644 --- a/nezha-fronted/src/assets/css/components/chart/chart.scss +++ b/nezha-fronted/src/assets/css/components/chart/chart.scss @@ -626,8 +626,8 @@ text-overflow: ellipsis; white-space: nowrap; text-align: center; - position: relative; - bottom: 25%; + position: absolute; + bottom: 12%; } } .chart-svg { diff --git a/nezha-fronted/src/components/chart/chart/chartGauge.vue b/nezha-fronted/src/components/chart/chart/chartGauge.vue index 8c451e867..727db325e 100644 --- a/nezha-fronted/src/components/chart/chart/chartGauge.vue +++ b/nezha-fronted/src/components/chart/chart/chartGauge.vue @@ -210,7 +210,7 @@ export default { return Math.min(optimalSize, maxSize || optimalSize) }, calcGaugeSize (data) { - const dimension = Math.min(data.width, data.height) * 0.80 // radius + const dimension = Math.min(data.width, data.height) * 0.90 // radius const titleFontSize = Math.min((dimension * 0.15) / 1.2, 20) if (this.chartInfo.param.text === 'legend' || this.chartInfo.param.text === 'all') { @@ -248,7 +248,7 @@ export default { option.series[0].max = this.chartInfo.param.max || this.maxValue option.series[0].min = this.chartInfo.param.min || 0 - option.series[0].radius = '80%' + option.series[0].radius = '90%' const gaugeSize = this.calcGaugeSize(item) option.series[0].progress.width = gaugeSize.gaugeWidth option.series[0].axisLine.lineStyle.width = gaugeSize.gaugeWidth diff --git a/nezha-fronted/src/components/chart/chart/options/chartGauge.js b/nezha-fronted/src/components/chart/chart/options/chartGauge.js index 710c1e141..fabf463fb 100644 --- a/nezha-fronted/src/components/chart/chart/options/chartGauge.js +++ b/nezha-fronted/src/components/chart/chart/options/chartGauge.js @@ -35,7 +35,8 @@ const chartGaugeOption = { }, axisLine: { lineStyle: { - width: 30 + width: 30, + color: [[1, '#F4F5F5']] } }, axisTick: { @@ -53,7 +54,8 @@ const chartGaugeOption = { title: { show: false }, - data: [] + data: [], + center: ['50%', '60%'] } ] }