关键:在 series-detail-formatter 中增加 formatter: ‘{value}%’
当前项目:vue3 + ECharts + TypeScript
代码:
<div>
<div ref="chart"></div>
</div>
<script>
import * as echarts from 'echarts';
export default {
mounted() {
this.createHalfCircleChart();
},
methods: {
createHalfCircleChart() {
var chart = echarts.init(this.$refs.chart);
let option = {
series: [
{
startAngle: 210,
endAngle: -30,
name: '123',
type: 'gauge',
title: {
offsetCenter: [0, '30%'],
color: '#999',
fontSize: 14,
},
detail: {
color: '#0052D9',
fontSize: 48,
fontWeight: 'normal',
offsetCenter: [0, '0%'],
formatter: '{value}%',
},
axisLine: {
show: true,
lineStyle: {
width: 20,
shadowBlur: 0,
color: [
[0.3, '#0052D9'],
[1, '#f3f3f3'],
],
},
},
axisTick: {
show: false,
splitNumber: 1,
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
pointer: {
show: false,
},
data: [
{
name: '标题标题',
value: Math.floor(30),
},
],
},
],
};
chart.setOption(option);
},
},
};
</script>