hyyfScreen/src/views/Production/board/ChartAmountPie.vue

<!--
 * @Author: your name
 * @Date: 2021-10-26 09:15:22
 * @LastEditTime: 2021-10-26 10:54: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: 10,
          // y: 10
        },
        tooltip: {
          trigger: 'item',
          formatter: function ({name, value, percent}) {
            return name + '：' + value + '头&nbsp;&nbsp;&nbsp;&nbsp;' + percent + '%'
          }
        },
        legend: {
          top: '11%',
          left: '55%',
          orient: 'vertical',
          icon: "circle",
          selectedMode: false, // 取消右侧项选中
          itemGap: 20, // 各项间隔
          textStyle: {
            fontSize: 12,
            color: '#eff'
          },
          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: '23%',
            top: '30%',
            style: {
              text: '总存栏',
              fontSize: 15,
              fontWeight: 700,
              fill: '#fff'
            }
          },
          {
            type: 'text',
            left: '23%',
            top: '40%',
            style: {
              text: total,
              fontSize: 24,
              fontWeight: 700,
              fill: '#fff'
            }
          }
        ],
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['45%', '60%'], // 半径
            center: ['28%', '38%'],
            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: 3, // 设置各项空隙，白边
                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 {
  width: 100%;
  height: 300px;
}
#chartAmountPie {
  width: 100%;
  height: 100%;
}
</style>