<template>
  <div>
    <Chart :cdata="cdata" />
  </div>
</template>

<script>
import Chart from './chart.vue'
export default {
	props: {
	  villageCountList: {
	    type: Array,
	    default: () => ([])
	  }
	},
  created () {
    this.cdata.category = this.villageCountList.map(item => ({ value: item.name, id: item.id }));
  },
  data () {
    return {
      cdata: {
        category: [],
        lineData: this.villageCountList.map(item => item.value),
        barData: this.villageCountList.map(item => item.value2),
        rateData: []
      }
    }
  },
  components: {
    Chart
  },
  mounted () {
    this.setData()
  },
  methods: {
    // 根据自己的业务情况修改
    setData () {
      for (let i = 0; i < this.cdata.barData.length - 1; i++) {
        const rate = this.cdata.barData[i] / this.cdata.lineData[i]
        this.cdata.rateData.push(rate.toFixed(2))
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
