<template lang='pug'>
#pie4(:style="{ width: '100%', height: '95%' }")
</template>

<script>
export default {
  mounted() {
    this.pie()
  },
  methods: {
    pie() {
      let dom = document.getElementById('pie4')
      if (!dom) return
      let myCharts = this.$echarts.init(dom)
      let option = {
        color: ['#F2637B', '#eeeeee'],
        title: {
          text: '故障报警'
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            hoverAnimation: false, //关闭放大动画
            selectedOffset: 0, //选中块的偏移量
            label: {
              show: false,
              position: 'center',
              formatter: '{d}%'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: 60,
                name: '直接访问',
                selected: true, //默认选中第一块
                label: {
                  show: true, //默认显示第一块
                  fontSize: '20',
                  fontWeight: 'bold'
                }
              },
              {
                value: 100,
                name: '总故障',
                label: {
                  show: false, //默认显示第一块
                  fontSize: '20',
                  fontWeight: 'bold'
                }

              }
            ]
          }
        ]
      }
      myCharts.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>