<template>
  <div
    id="mainPieChartBidding"
    style="width: 100%; height: 100%"
  ></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  props: {
    params: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      myChart: '',
      data: ''
    }
  },
  watch: {
    params: {
      handler(newValue) {
        this.getData(newValue)
      },
      deep: true
    }
  },
  mounted() {
    this.draw()
    this.getData(this.params)
  },
  methods: {
    getData(params) {
      this.$http
        .post('${cqxy}/biz/statistics/v1/biddingStatistics', params)
        .then(res => {
          this.data = res.data.value
          let data = []
          this.data.forEach(item => {
            data.push({
              value: item.total,
              name: item.typeName
            })
          })
          this.refreshData(data)
        })
    },
    refreshData(data) {
      //刷新数据
      var option = this.myChart.getOption()
      option.series[0].data = data
      this.myChart.setOption(option)
    },
    draw() {
      var chartDom = document.getElementById('mainPieChartBidding')
      this.myChart = echarts.init(chartDom)
      var option

      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: 'bottom',
          padding: 20
        },
        color: [
          '#63b2ee',
          '#76da91',
          '#f8cb7f',
          '#f89588',
          '#7cd6cf',
          '#9192ab',
          '#7898e1'
        ],
        series: [
          {
            name: '招投标统计',
            type: 'pie',
            radius: '50%',
            tooltip: {
              valueFormatter: function(value) {
                return value + '个'
              }
            },
            label: {
              show: true,
              textStyle: {
                color: '#5690dd',
                fontSize: 14
              },
              formatter: '{b}{c}个\n占比{d}%'
            },
            data: [
              {value: 10, name: '公开招标'},
              {value: 20, name: '直接委托'},
              {value: 3, name: '走流程'},
              {value: 0, name: '其他'}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      option && this.myChart.setOption(option)
    }
  }
}
</script>
