rightCenterPaneBottom.vue 3.41 KB
Newer Older
jingnan's avatar
jingnan committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155
/**
* @Description:物料缺件分析
* @author gjn
* @date 2023/12/04
*/
<template>
  <div ref="pieDom" style="height: 200px; width:200px" />
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      pieEcharts: '',
      pieOption: {},
      datas: [],
      hideColor: '#E2E7EB'
    }
  },
  mounted() {
    this.datas = [
      {
        value: this.item.present,
        name: this.item.present + '%'
      },
      {
        value: 100 - this.item.present,
        name: (100 - this.item.present) + '%'
      }
    ]

    this.pieEcharts = this.$echarts.init(this.$refs.pieDom)
    this.setPieOption()
    this.setPieEvents()
  },
  methods: {
    setPieOption() {
      this.pieOption = {
        color: [this.item.color, this.hideColor], // 环形的分段色值设置
        title: {
          text: this.item.name,
          color: '#3F3F3F',
          bottom: -4,
          right: 'center',
          textStyle: {
            fontSize: 15
          }
        },
        tooltip: {
          trigger: 'item',
          position: (point, params, dom, rect, size) => {
            return [point[0], point[1]]
          }
        },
        series: [{
          type: 'pie',
          radius: ['50%', '70%'], // 内存 、外层
          avoidLabelOverlap: false,
          hoverAnimation: true,
          hoverOffset: 2,
          label: {
            normal: {
              show: false, // 中间的标签
              position: 'center',
              textStyle: {
                fontSize: '18',
                fontWeight: 'bold'
              }
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: '18',
                fontWeight: 'bold'
              }
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          selectedOffset: 0,
          itemStyle: {
            emphasis: {

            }
          },
          data: this.datas
        }]
      }
      // 渲染图表
      this.pieEcharts.setOption(this.pieOption)
    },
    /**
             * 设置图表的事件
             */
    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>