<template>
  <div>
    <div ref="pieChart" :style="{ width: width, height: height }" />
  </div>
</template>

<script>
export default {
  props: {
    titletext: {
      // 标题名称
      type: String,
      default: ''
    },
    graphictext: {
      // 饼图中心 内容
      type: String,
      default: ''
    },
    seriesName: {
      // seriesName
      type: String,
      default: ''
    },
    isHollow: Boolean, // 是否空心
    seriesData: {
      // 区域数据
      type: Array,
      default() {
        return []
      }
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      // that: null
    }
  },
  watch: {
    seriesData: function() {
      this.myEcharts()
    }
  },
  mounted() {
    this.myEcharts()
  },
  methods: {
    myEcharts() {
      var that = this
      // 基于准备好的dom，初始化echarts实例
      var myChart = that.$echarts.init(that.$refs.pieChart)
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: that.titletext
        },
        grid: {
          top: '4%',
          left: '2%',
          right: '1%',
          bottom: '2%',
          containLabel: true
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          padding: [
            10, // 上
            10, // 右
            5, // 下
            23 // 左
          ]
        },
        graphic: {
          type: 'text',
          left: '55%',
          top: '48%',
          style: {
            text: that.graphictext, // '100顿',
            textAlign: 'center',
            fill: '#333',
            fontSize: 20,
            fontWeight: 700
          }
        },
        series: [
          {
            name: that.seriesName,
            center: ['60%', '50%'],
            type: 'pie',
            padding: [
              10, // 上
              10, // 右
              5, // 下
              50 // 左
            ],
            // radius: '70%',
            // radius: ['40%', '70%'],
            radius: that.isHollow ? ['40%', '70%'] : '70%',
            data: that.seriesData.length > 0 ? that.seriesData : [{ value: 10, name: '设备1' }, { value: 52, name: '设备2' }],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ],
        color: ['#3e72c5', '#17a2b8', '#20c997', '#00c0ef', '#0066FF', '#5599FF', '#33CCFF', '#9F88FF', '#99BBFF', '#00BBFF']
        // color: ['#3e72c5', '#20c997', '#ffc107', '#fd7e14', '#17a2b8', '#9932CC', '#FF7F50']
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
      myChart.off('click')
      myChart.on('click', function(params) {
        // that.$emit('click', params)
        console.log(params)
        // that.$router.push({ path: '/Concrete/productionaccounts', query: { type: 1 }})
      })
      // myChart.getZr().on('click', function(params) {
      //   debugger
      //   var point = [params.offsetX, params.offsetY]
      //   if (myChart.containPixel('gird', point)) {
      //     var xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, point)[0]
      //     var op = myChart.getOption()
      //     var name = op.xAxis[0].data[xIndex]
      //   }
      // })
    }
  }
}
</script>

<style>
</style>
