<template>
  <!-- 饼状图 -->
  <div class="page-header-index-wide">
      <div :id="id" :text="text" :subtext="subtext" :style="{width: '100%', height: `${height}px`}"></div>
  </div>
</template>

<script>
export default {
  name: 'CakeShape',
  components: {},
  props: {
    id: {
      type: String,
      default: 'myChart'
    },
    text: {
      type: String,
      default: ''
    },
    subtext: {
      type: String,
      default: ''
    },
    // 图表高度
    height: {
      type: Number,
      default: 500
    },
    data: {
      type: [Object, Array],
      default: () => []
    },
    radius: {
      type: Array,
      default: () => ['0%', '80%']
    },
    center: {
      type: Array,
      default: () => ['50%', '50%']
    },
    fontSize: {
      type: Number,
      default: () => 10
    },
    textStyle: {
      type: String,
      default: '#000000'
    },
    // 图例方向
    orientOrient: {
      type: String,
      default: 'vertical'
    },

  },
  data() {
    return {
      orgOptions: {}
    }
  },
  mounted() {
  },
  created() {
  },
  methods: {

    drawLine(res, queryParams,bool) {
      let that = this
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById(this.id))
      let data = {
        legend: {
          orient: this.orientOrient,
          left: 'left',
          textStyle: {
            color: this.textStyle //字体颜色
          },
        },
        title : {
          text: this.text,
          subtext: this.subtext,
          x:'center'
        },
        tooltip: {
          trigger: 'item',
        },
        series: [{
          type: 'pie',
          radius: this.radius,
          center: ['50%', '50%'],
          // label: {
          //   show: true,
          //   position: 'inside',
          //   textStyle: {
          //     color: this.textStyle //字体颜色
          //   },
          //   formatter: (params) => {
          //     return `${params.percent}%`
          //   }
          // },
          data: res
        }]
      }
      if (bool === true){
        myChart.on('click', function (param) {
          let query={
            areaId: queryParams.areaId,
            foremanId:queryParams.foremanId,
            workerId:queryParams.workerId,
            value:param.data.name,
          }
          that.$router.push({
            path:'/census/census8',
            query
          })
          // window.location.href = 'https://www.baidu.com/';
        });
      }
      // 绘制图表
      myChart.setOption(data)
      document.getElementById(this.id).setAttribute('_echarts_instance_', '')
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
  }
};
</script>

<style lang="less" scoped>

</style>

