<template>
  <div
    id="mainPieChartContract"
    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/contractAmount', 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('mainPieChartContract')
      this.myChart = echarts.init(chartDom)
      var option

      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: 'bottom',
          padding: 20
        },
        color: [
          '#9489fa',
          '#f06464',
          '#f7af59',
          '#f0da49',
          '#71c16f',
          '#2aaaef',
          '#5690dd',
          '#bd88f5',
          '#009db2',
          '#024b51',
          '#0780cf',
          '#765005'
        ],
        series: [
          {
            name: '合同金额统计',
            type: 'pie',
            radius: '50%',
            tooltip: {
              valueFormatter: function(value) {
                return value + '万元'
              }
            },
            data: [
              {value: 1048, name: '工程合同'},
              {value: 735, name: '技术合同'},
              {value: 580, name: '服务合同'},
              {value: 484, name: '采购合同'},
              {value: 300, name: '配套合同'}
            ],
            label: {
              show: true,
              textStyle: {
                color: '#5690dd',
                fontSize: 14
              },
              formatter: '{b}\n总值：{c}万元\n占比{d}%'
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

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