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

      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: 'bottom',
          padding: 20
        },
        color: [
          '#fa2c7b',
          '#ff38e0',
          '#ffa235',
          '#04c5f3',
          '#0066fe',
          '#8932a5',
          '#c90444'
        ],
        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: 1048, name: '管网'},
              {value: 735, name: '道路'},
              {value: 580, name: '楼宇厂房'},
              {value: 484, name: '征地拆迁'},
              {value: 300, name: '生态环保'}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

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