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

applications/dee-task-center/src/views/home/compontents/stationPie.vue

+/** * @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>