179 lines
3.4 KiB
Vue
179 lines
3.4 KiB
Vue
<template>
|
||
<div
|
||
class="gauge"
|
||
:id="id"
|
||
:style="{
|
||
width: styleUtil.px2vw(width),
|
||
height: styleUtil.px2vh(height)
|
||
}"
|
||
/>
|
||
</template>
|
||
|
||
<script setup>
|
||
import * as echarts from 'echarts'
|
||
import { guid } from '@/utils/util'
|
||
import styleUtil from '@/utils/styleUtil'
|
||
import { fitChartSize } from '@/utils/dataUtil'
|
||
|
||
const props = defineProps({
|
||
width: {
|
||
type: Number,
|
||
default: () => 0
|
||
},
|
||
height: {
|
||
type: Number,
|
||
default: () => 0
|
||
}
|
||
})
|
||
let gaugeChart = null
|
||
let id = ref(guid())
|
||
let defaultCofig = {
|
||
title: [
|
||
{
|
||
text: '45.5%',
|
||
x: 'center',
|
||
top: '34%',
|
||
textStyle: {
|
||
color: '#00D0FF',
|
||
fontSize: fitChartSize(12)
|
||
}
|
||
},
|
||
{
|
||
text: '完成率',
|
||
x: 'center',
|
||
top: '56%',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: fitChartSize(12)
|
||
}
|
||
}
|
||
],
|
||
series: [
|
||
// 内侧环
|
||
{
|
||
type: 'gauge',
|
||
radius: '100%',
|
||
center: ['50%', '60%'],
|
||
min: 0,
|
||
max: 100,
|
||
startAngle: 180,
|
||
endAngle: 0,
|
||
itemStyle: {
|
||
color: '#00D0FF'
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
roundCap: false,
|
||
lineStyle: {
|
||
color: [
|
||
[0, '#075199'],
|
||
[1, '#075199']
|
||
],
|
||
width: fitChartSize(6)
|
||
}
|
||
},
|
||
progress: {
|
||
show: true,
|
||
roundCap: false,
|
||
width: fitChartSize(6)
|
||
},
|
||
pointer: {
|
||
// 指针
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
// 刻度
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
// 分割线
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
// 刻度标签
|
||
show: false
|
||
},
|
||
detail: {
|
||
// 仪表盘详情
|
||
show: false
|
||
},
|
||
data: [
|
||
{
|
||
value: 50
|
||
}
|
||
]
|
||
},
|
||
{
|
||
type: 'gauge',
|
||
radius: '90%',
|
||
center: ['50%', '60%'],
|
||
min: 0,
|
||
max: 100,
|
||
startAngle: 180,
|
||
endAngle: 0,
|
||
itemStyle: {
|
||
color: '#057EB9'
|
||
},
|
||
axisLine: {
|
||
roundCap: false,
|
||
lineStyle: {
|
||
color: [
|
||
[0, '#075199'],
|
||
[1, '#075199']
|
||
],
|
||
width: fitChartSize(6)
|
||
}
|
||
},
|
||
progress: {
|
||
show: true,
|
||
roundCap: false,
|
||
width: fitChartSize(6)
|
||
},
|
||
pointer: {
|
||
// 指针
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
// 刻度
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
// 分割线
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
// 刻度标签
|
||
show: false
|
||
},
|
||
detail: {
|
||
// 仪表盘详情
|
||
show: false
|
||
},
|
||
data: [
|
||
{
|
||
value: 50
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
|
||
onMounted(() => {
|
||
init()
|
||
})
|
||
const init = () => {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
gaugeChart = echarts.init(document.getElementById(id.value))
|
||
gaugeChart.setOption({ ...defaultCofig })
|
||
window.addEventListener('resize', resize)
|
||
}
|
||
const resize = () => {
|
||
if (gaugeChart) {
|
||
gaugeChart.dispose()
|
||
init()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped></style>
|