当前位置：首页 > news >正文

vue3之仪表盘

news 2025/11/29 13:28:46

vue3之仪表盘

效果：

在这里插入图片描述

版本
“echarts”: “^5.5.1”

核心代码：

<!--* @Description: 圆环组件封装* @Version: 1.0* @Autor: qh
--><template><div ref="chartRef" class="circle"></div>
</template><script lang="ts" setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';const props = defineProps({percent: {type: Number,default: 0,},
});const chartRef = ref(null);
let chart: any = null;const rich = {bule: {fontSize: 22,fontFamily: 'DINPro',color: '#fff',padding: [6, 0, 0, 0],},white: {fontSize: 12,color: '#fff',padding: [10, 0, 0, 0],},
};const topChartOptions = (value: number) => {return {tooltip: {show: false,formatter: '{a} <br/>{b} : {c} ({d}%)',},series: [{name: 'S',z: 3,type: 'gauge', // 仪表盘center: ['49.5%', '58%'],radius: '95%',detail: {formatter: (value: any) => {return '{bule|' + value + '}{white|%}';},rich,offsetCenter: ['0%', '0%'],},title: {show: false,},data: [{value,name: 'Percent',},],axisLine: {show: true,lineStyle: {roundCap: true,width: 7,color: [[value / 100,new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: 'rgba(0, 255, 231, 0.5)',},{offset: 0.5,color: 'rgba(0, 255, 231, 0.8)', // 100% 处的颜色},{offset: 1,color: 'rgba(0, 255, 231, 0.5)', // 100% 处的颜色},]),],[1, 'rgba(4, 211, 251, 0)'],],},},axisTick: {show: false,},axisLabel: {show: false,},splitLine: {show: false,},pointer: {length: '14%',width: 2,icon: 'rect',offsetCenter: [0, '-87%'],itemStyle: {color: 'rgba(0, 255, 231, 1)',},},},{name: 'T',z: 2,type: 'gauge', // 仪表盘center: ['49.5%', '58%'],radius: '96%',detail: {show: false,},title: {show: false,},data: [{value: 100,name: 'Percent',},],axisLine: {show: true,lineStyle: {roundCap: true,width: 8,color: [[1,new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: 'rgba(150, 179, 180, 1)',},{offset: value / 100,color: 'rgba(150, 179, 180, 0.5)',},{offset: 1,color: 'rgba(150, 179, 180, 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(props.percent));
};onMounted(() => {initChart();
});onBeforeUnmount(() => {if (chart) {chart.clear();chart.dispose();chart = null;}
});
</script><style scoped lang="scss">
.circle {width: 132px;height: 113px;// 根据实际情况加背景图background: url('@/assets/img/inspection/overview-bg.png') no-repeat;
}
</style>