vue3之echarts仪表盘

vue3之echarts仪表盘

效果如下：

版本
"echarts": "^5.5.1"

核心代码：

<template><div ref="chartRef" class="circle"></div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onBeforeMount } from 'vue';
import * as echarts from 'echarts';const chartRef = ref(null);
const percent = ref(23);
let chart: any = null;const topChartOptions = (value: number) => {return {series: [{name: 'S',z: 3,type: 'gauge', // 仪表盘center: ['50%', '82%'],radius: '135%',detail: {show: false,},title: {show: false,},data: [{value,name: 'Percent',},],startAngle: '178', // 仪表盘起始角度endAngle: '2', // 仪表盘结束角度min: 0,max: 100,axisLine: {show: true,lineStyle: {roundCap: true,width: 8,color: [[value / 100,new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: 'rgba(11, 163, 250, 1)',},{offset: 1,color: 'rgba(227, 250, 255, 1)', // 100% 处的颜色},]),],[1, 'rgba(4, 211, 251, 0)'],],},},axisTick: {show: false,},axisLabel: {show: false,},splitLine: {show: false,},pointer: {length: '22%',width: 4,icon: 'rect',offsetCenter: [0, '-87%'],itemStyle: {color: 'RGBA(191, 255, 238, 1)',},},},{name: 'T',z: 2,type: 'gauge', // 仪表盘center: ['50%', '82%'],radius: '135%',detail: {show: false,},title: {show: false,},data: [{value: 100,name: 'Percent',},],startAngle: '178', // 仪表盘起始角度endAngle: '2', // 仪表盘结束角度min: 0,max: 100,axisLine: {show: true,lineStyle: {roundCap: true,width: 10,color: [[1,new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: 'transparent',},{offset: value / 100,color: 'rgba(255, 192, 1, 1)',},{offset: 1,color: 'rgba(255, 242, 204, 1)', // 100% 处的颜色},]),],[1, 'rgba(255, 192, 1, 0)'],],},},axisTick: {show: false,},axisLabel: {show: false,},splitLine: {show: false,},pointer: {show: false,},},],};
};const initChart = () => {if (!chart) chart = echarts.init(chartRef.value);chart.setOption(topChartOptions(percent.value));
};onMounted(() => {initChart();
});const destroyChart = () => {if (!chart) {return;}chart.dispose();chart = null;
};onBeforeMount(() => {destroyChart();
});
</script>
<style lang="scss" scoped>
.circle {width: 314px;height: 191px;
}
</style>