Commit 87eb6d2c authored by jingnan's avatar jingnan 👀

首页站位统计及问题项管理开发

parent 8d03dd62
/** * @Description:物料缺件分析 * @author gjn * @date 2023/12/04 */
<template>
<div ref="pieDom" style="width: 100%; height: 10vh" />
</template>
<script>
export default {
props: {
item: {
type: Object,
default: () => {}
}
},
data() {
return {
pieEcharts: '',
pieOption: {},
datas: []
}
},
watch: {
item: {
deep: true,
immediate: true,
handler(val) {
this.datas = [
{
value: this.item.countUndone,
name: '未开始' // 未完成
},
{
value: this.item.countNotOk,
name: '执行中' // 执行中
},
{
value: this.item.countCarry,
name: '已完成' // 已完成
}
]
this.$nextTick(() => {
this.pieEcharts = this.$echarts.init(this.$refs.pieDom)
this.setPieOption()
this.setPieEvents()
})
}
}
},
mounted() {},
beforeDestroy() {
if (this.pieEcharts) {
this.pieEcharts.dispose() // 清理ECharts实例,避免内存泄漏
}
window.removeEventListener('resize', this.pieEcharts.resize)
},
methods: {
setPieOption() {
this.pieOption = {
color: ['blue', '#f2743a', '#13b346'], // 环形的分段色值设置
title: {
text: this.item.name,
color: '#3F3F3F',
bottom: 0,
right: 'center',
textStyle: {
fontSize: 14
}
},
tooltip: {
trigger: 'item'
},
series: [
{
type: 'pie',
radius: ['50%', '70%'], // 内存 、外层
avoidLabelOverlap: false,
hoverAnimation: true,
hoverOffset: 2,
top: -18,
label: {
normal: {
show: false, // 中间的标签
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '12'
}
}
},
labelLine: {
normal: {
show: false
}
},
selectedOffset: 0,
itemStyle: {
emphasis: {}
},
data: this.datas
}
]
}
// 渲染图表
this.pieEcharts.setOption(this.pieOption)
window.addEventListener('resize', function() {
this.pieEcharts.resize()
})
},
/**
* 设置图表的事件
*/
setPieEvents() {
/**
* 刷新时默认显示第一条
*/
this.pieEcharts.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: 0
})
/**
* 鼠标移入图表时,不为第一条时就取消第一条的高亮效果
*/
this.pieEcharts.on('mouseover', (v) => {
if (v.dataIndex !== 0) {
this.pieEcharts.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: 0
})
}
})
/**
* 鼠标图表时默认显示第一条
*/
this.pieEcharts.on('mouseout', (v) => {
this.pieEcharts.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: 0
})
})
// 监听窗口变化 - 只刷新最后一个图表
// window.onresize = () => {
// this.pieEcharts.resize()
// }
// 监听窗口变化 - 多个图表同时刷新
// window.addEventListener('resize', () => {
// this.pieEcharts.resize()
// })
}
}
}
</script>
<style scoped></style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment