|
|
@@ -0,0 +1,164 @@
|
|
|
+<!--
|
|
|
+ * @Author: your name
|
|
|
+ * @Date: 2021-10-26 09:15:22
|
|
|
+ * @LastEditTime: 2021-10-26 09:42:54
|
|
|
+ * @LastEditors: Please set LastEditors
|
|
|
+ * @Description: 存栏结构图
|
|
|
+ * @FilePath: \hyyfScreen\src\views\Production\board\ChartAmountPie.vue
|
|
|
+-->
|
|
|
+<template>
|
|
|
+ <div class="chart-inventory-pie">
|
|
|
+ <div id="chartAmountPie"></div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ 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: '存栏结构',
|
|
|
+ x: 20,
|
|
|
+ y: 20
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ x: 100
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: function ({name, value, percent}) {
|
|
|
+ return name + '：' + value + '头 ' + percent + '%'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ top: '25%',
|
|
|
+ left: '55%',
|
|
|
+ orient: 'vertical',
|
|
|
+ icon: "circle",
|
|
|
+ selectedMode: false, // 取消右侧项选中
|
|
|
+ itemGap: 20, // 各项间隔
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 15,
|
|
|
+ color: '#666'
|
|
|
+ },
|
|
|
+ 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: [
|
|
|
+ {
|
|
|
+ type: 'text',
|
|
|
+ left: '27%',
|
|
|
+ top: '43%',
|
|
|
+ style: {
|
|
|
+ text: '总存栏',
|
|
|
+ fontSize: 15,
|
|
|
+ fill: 'rgb(192, 188, 189)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'text',
|
|
|
+ left: '25%',
|
|
|
+ top: '53%',
|
|
|
+ style: {
|
|
|
+ text: total + '头',
|
|
|
+ fontSize: 22,
|
|
|
+ fontWeight: 700
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: 'Access From',
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['60%', '80%'], // 半径
|
|
|
+ center: ['30%', '55%'],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ // position: 'center'
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ fontSize: '40',
|
|
|
+ fontWeight: 'bold'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: function (colors) { // 颜色设置
|
|
|
+ var colorList = ['#3aa0ff', '#4dcb73', '#fad337', '#f2637b', '#975fe4']
|
|
|
+ return colorList[colors.dataIndex]
|
|
|
+ },
|
|
|
+ borderWidth: 5, // 设置各项空隙
|
|
|
+ borderColor: '#fff'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ { 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: '育肥猪存栏' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+
|
|
|
+ this.myChart.setOption(options)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.myChart = this.$echarts.init(document.getElementById('chartAmountPie'));
|
|
|
+ this.init()
|
|
|
+ console.log(this.data)
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ data(newValue) {
|
|
|
+ console.log(newValue)
|
|
|
+ this.init()
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+.chart-inventory-pie {
|
|
|
+ display: inline-block;
|
|
|
+ width: 45%;
|
|
|
+ height: 300px;
|
|
|
+}
|
|
|
+#chartAmountPie {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+</style>
|
East