lixuefeng/fengjie-datascreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：重新对接首页接口

Browse Source
This commit is contained in:
zjc
2025-01-14 19:01:09 +08:00
parent 880db48579
commit ebac43f818
28 changed files with 2250 additions and 2133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

300
src/views/workOrder/components/pie.vue
View File

@@ -8,145 +8,169 @@
const { id, setOption } = useEchart()
let option = {
backgroundColor: 'transparent',
title: [
{
text: '45.5%',
x: 'center',
top: '42%',
textStyle: {
color: '#02F9FA',
fontSize: fitChartSize(24)
}
},
{
text: '完成率',
x: 'center',
top: '54%',
textStyle: {
color: '#fff',
fontSize: fitChartSize(12)
}
}
],
series: [
{
type: 'gauge',
radius: '100%',
center: ['50%', '50%'],
min: 0,
max: 100,
startAngle: 90,
endAngle: 450,
clockwise: false,
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: '95%',
center: ['50%', '50%'],
min: 0,
max: 100,
startAngle: 90,
endAngle: 450,
clockwise: false,
itemStyle: {
color: '#057EB9'
},
axisLine: {
roundCap: false,
lineStyle: {
color: [
[0, '#075199'],
[1, '#075199']
],
width: fitChartSize(10)
}
},
progress: {
show: true,
roundCap: false,
width: fitChartSize(10)
},
pointer: {
// 指针
show: false
},
axisTick: {
// 刻度
show: false
},
splitLine: {
// 分割线
show: false
},
axisLabel: {
// 刻度标签
show: false
},
detail: {
// 仪表盘详情
show: false
},
data: [
{
value: 50
}
]
}
]
}
const init = () => {
setOption(option)
}
onMounted(() => {
init()
let props = defineProps({
value: {
type: Number,
default: () => 0
},
label: {
type: String,
default: () => ''
}
})
watch(
() => props.value,
(val) => {
if (val) {
nextTick(() => {
init()
})
}
},
{ immediate: true }
)
let params = null
const init = () => {
if (!params) {
params = {
backgroundColor: 'transparent',
title: [
{
text: `${(props.value * 100).toFixed(2)}%`,
x: 'center',
top: '40%',
textStyle: {
color: '#02F9FA',
fontSize: fitChartSize(24)
}
},
{
text: props.label,
x: 'center',
top: '56%',
textStyle: {
color: '#fff',
fontSize: fitChartSize(12)
}
}
],
series: [
{
type: 'gauge',
radius: '100%',
center: ['50%', '50%'],
min: 0,
max: 1,
startAngle: 90,
endAngle: 450,
clockwise: false,
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: props.value
}
]
},
{
type: 'gauge',
radius: '95%',
center: ['50%', '50%'],
min: 0,
max: 1,
startAngle: 90,
endAngle: 450,
clockwise: false,
itemStyle: {
color: '#057EB9'
},
axisLine: {
roundCap: false,
lineStyle: {
color: [
[0, '#075199'],
[1, '#075199']
],
width: fitChartSize(10)
}
},
progress: {
show: true,
roundCap: false,
width: fitChartSize(10)
},
pointer: {
// 指针
show: false
},
axisTick: {
// 刻度
show: false
},
splitLine: {
// 分割线
show: false
},
axisLabel: {
// 刻度标签
show: false
},
detail: {
// 仪表盘详情
show: false
},
data: [
{
value: props.value
}
]
}
]
}
} else {
params.series[0].data[0].value = props.value
}
setOption(params)
}
</script>
<style lang="scss" scoped>