49 lines
953 B
Vue
49 lines
953 B
Vue
<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>
|