LocalLivingServicesUniapp/components/echarts_round.vue

<template>
	<view class="">
		<view>
			<u-canvas ref="canvas" style="width: 80px; height: 100px;"></u-canvas>
		</view>
	</view>
</template>

<script>
	import * as echarts from 'echarts';
	export default{
		name:'echartsRound',
		data() {
			return{
					chartInstance: null,
					score: 45, // 假设评分为75%
			}
		},
		mounted() {
			this.initChart();
		},
		methods:{
			initChart() {
				const canvas = this.$refs.canvas;
				this.chartInstance = echarts.init(canvas);
			
				const option = {
					title: {
						text: `${this.score}分`,
						// subtext: '评分',
						left: 'center',
						top: 'center',
						textStyle: {
							fontSize: 12,
							fontWeight: 'bold',
						},
						subtextStyle: {
							fontSize: 16,
							color: '#999',
						}
					},
					series: [{
						name: 'Access From',
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: true,
								fontSize: 40,
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: false
						},
						data: [{
								value: this.score,
								name: 'Search Engine'
							},
							{
								value: 100 - this.score,
								name: 'Direct'
							},
						]
					}]
				};
			
				this.chartInstance.setOption(option);
			},
		}
	}
</script>

<style>
</style>