110 lines
2.3 KiB
Vue
110 lines
2.3 KiB
Vue
<template>
|
||
<div class="gauge" :id="id" />
|
||
</template>
|
||
|
||
<script setup>
|
||
import * as echarts from 'echarts'
|
||
import { fitChartSize } from '@/utils/dataUtil'
|
||
|
||
const props = defineProps({
|
||
id: {
|
||
type: String,
|
||
default: () => ''
|
||
}
|
||
})
|
||
|
||
let gaugeChart = null
|
||
|
||
onMounted(() => {
|
||
init()
|
||
})
|
||
const init = () => {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
gaugeChart = echarts.init(document.getElementById(props.id))
|
||
gaugeChart.setOption({
|
||
series: [
|
||
{
|
||
type: 'gauge',
|
||
startAngle: 180,
|
||
endAngle: 0,
|
||
min: 0,
|
||
max: 100,
|
||
radius: '100%',
|
||
splitNumber: 10,
|
||
center: ['50%', '60%'],
|
||
itemStyle: {
|
||
color: '#58D9F9',
|
||
shadowColor: 'rgba(0,138,255,0.45)',
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 2,
|
||
shadowOffsetY: 2
|
||
},
|
||
progress: {
|
||
show: true,
|
||
roundCap: true,
|
||
width: fitChartSize(6)
|
||
},
|
||
axisLine: {
|
||
roundCap: true,
|
||
lineStyle: {
|
||
width: fitChartSize(6)
|
||
}
|
||
},
|
||
pointer: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
show: false
|
||
},
|
||
detail: {
|
||
width: '100%',
|
||
lineHeight: 20,
|
||
height: 20,
|
||
offsetCenter: [0, '20%'],
|
||
valueAnimation: true,
|
||
formatter: function (value) {
|
||
return '{value|' + value.toFixed(0) + '}{unit|%}'
|
||
},
|
||
rich: {
|
||
value: {
|
||
fontSize: fitChartSize(12),
|
||
fontWeight: 'bolder',
|
||
color: '#02F9FA'
|
||
},
|
||
unit: {
|
||
fontSize: fitChartSize(12),
|
||
color: '#02F9FA'
|
||
}
|
||
}
|
||
},
|
||
data: [
|
||
{
|
||
value: 80
|
||
}
|
||
]
|
||
}
|
||
]
|
||
})
|
||
window.addEventListener('resize', resize)
|
||
}
|
||
const resize = () => {
|
||
if (gaugeChart) {
|
||
gaugeChart.dispose()
|
||
init()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.gauge {
|
||
width: vw(70);
|
||
height: vh(50);
|
||
}
|
||
</style>
|