|
@@ -1,7 +1,7 @@
|
|
|
<!--
|
|
|
* @Author: your name
|
|
|
* @Date: 2021-09-30 15:46:57
|
|
|
- * @LastEditTime: 2021-10-12 08:42:45
|
|
|
+ * @LastEditTime: 2021-10-21 18:08:06
|
|
|
* @LastEditors: Please set LastEditors
|
|
|
* @Description: 存栏结构图
|
|
|
* @FilePath: \hyyfClient\src\views\PdcData\analysis\ChartInventoryPie.vue
|
|
@@ -18,8 +18,16 @@ export default {
|
|
|
myChart: null
|
|
|
}
|
|
|
},
|
|
|
+ props: {
|
|
|
+ data: {
|
|
|
+ type: Array,
|
|
|
+ required: true
|
|
|
+ }
|
|
|
+ },
|
|
|
methods: {
|
|
|
init() {
|
|
|
+ const _this = this
|
|
|
+ let total = this.data[1].stockQuantity + this.data[2].stockQuantity + this.data[3].stockQuantity + this.data[4].stockQuantity + this.data[5].stockQuantity
|
|
|
let options = {
|
|
|
title: {
|
|
|
text: '存栏结构',
|
|
@@ -46,22 +54,22 @@ export default {
|
|
|
fontSize: 15,
|
|
|
color: '#666'
|
|
|
},
|
|
|
- // formatter: function (name) {
|
|
|
- // var legendIndex = 0;
|
|
|
- // var clientLabels = [
|
|
|
- // { name: '母猪存栏', percent: '36%', number: 4544 },
|
|
|
- // { name: '公猪存栏', percent: '20%', number: 3244 },
|
|
|
- // { name: '哺乳仔猪存栏', percent: '16%', number: 2032 },
|
|
|
- // { name: '保育猪存栏', percent: '10%', number: 1644 },
|
|
|
- // { name: '育肥猪存栏', percent: '9%', number: 1546 },
|
|
|
- // ]
|
|
|
- // clientLabels.forEach(function (value, i) {
|
|
|
- // if (value.name == name) {
|
|
|
- // legendIndex = i;
|
|
|
- // }
|
|
|
- // });
|
|
|
- // return name + "| " + clientLabels[legendIndex].percent + " " + clientLabels[legendIndex].number + '头';
|
|
|
- // }
|
|
|
+ formatter: function (name) {
|
|
|
+ var legendIndex = 0;
|
|
|
+ var clientLabels = [
|
|
|
+ { name: '母猪存栏', percent: parseFloat(_this.data[1].stockQuantity / total)*100 + '%', number: _this.data[1].stockQuantity },
|
|
|
+ { name: '公猪存栏', percent: parseFloat(_this.data[2].stockQuantity / total)*100 + '%', number: _this.data[2].stockQuantity },
|
|
|
+ { name: '哺乳仔猪存栏', percent: parseFloat(_this.data[3].stockQuantity / total)*100 + '%', number: _this.data[3].stockQuantity },
|
|
|
+ { name: '保育猪存栏', percent: parseFloat(_this.data[4].stockQuantity / total)*100 + '%', number: _this.data[4].stockQuantity },
|
|
|
+ { name: '育肥猪存栏', percent: parseFloat(_this.data[5].stockQuantity / total)*100 + '%', number: _this.data[5].stockQuantity },
|
|
|
+ ]
|
|
|
+ clientLabels.forEach(function (value, i) {
|
|
|
+ if (value.name == name) {
|
|
|
+ legendIndex = i;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return name + " (" + clientLabels[legendIndex].percent + ', ' + clientLabels[legendIndex].number + '头' + ") ";
|
|
|
+ }
|
|
|
},
|
|
|
graphic: [
|
|
|
{
|
|
@@ -76,10 +84,10 @@ export default {
|
|
|
},
|
|
|
{
|
|
|
type: 'text',
|
|
|
- left: '24%',
|
|
|
+ left: '25%',
|
|
|
top: '53%',
|
|
|
style: {
|
|
|
- text: '123,224头',
|
|
|
+ text: total + '头',
|
|
|
fontSize: 22,
|
|
|
fontWeight: 700
|
|
|
}
|
|
@@ -117,11 +125,11 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
data: [
|
|
|
- { value: 4544, name: '母猪存栏' },
|
|
|
- { value: 3244, name: '公猪存栏' },
|
|
|
- { value: 2032, name: '哺乳仔猪存栏' },
|
|
|
- { value: 1644, name: '保育猪存栏' },
|
|
|
- { value: 1546, name: '育肥猪存栏' }
|
|
|
+ { value: this.data[1].stockQuantity, name: '母猪存栏' },
|
|
|
+ { value: this.data[2].stockQuantity, name: '公猪存栏' },
|
|
|
+ { value: this.data[3].stockQuantity, name: '哺乳仔猪存栏' },
|
|
|
+ { value: this.data[4].stockQuantity, name: '保育猪存栏' },
|
|
|
+ { value: this.data[5].stockQuantity, name: '育肥猪存栏' }
|
|
|
]
|
|
|
}
|
|
|
]
|
|
@@ -132,7 +140,13 @@ export default {
|
|
|
},
|
|
|
mounted() {
|
|
|
this.myChart = this.$echarts.init(document.getElementById('chartPie'));
|
|
|
- this.init()
|
|
|
+ // this.init()
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ data(newValue) {
|
|
|
+ console.log(newValue)
|
|
|
+ this.init()
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|