hyyfClient/src/components/erp/ProductionDonut.vue

<!--
 * @Author: your name
 * @Date: 2021-10-11 14:54:18
 * @LastEditTime: 2021-12-21 08:46:56
 * @LastEditors: Please set LastEditors
 * @Description: 生产情况的环形图
 * @FilePath: \hyyfClient\src\components\erp\ProductionDonut.vue
-->
<template>
  <div class="production-donut">
    <div :id="id" class="chartPie"></div>
  </div>
</template>
<script>
export default {
  props: {
    id: {
      type: Number,
      required: true,
    },
    stockName: {
      type: String,
      required: true,
    },
    stockQuantity: {
      type: String,
      default: () => 0,
    },
    color: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      myChart: null,
      rest: 0,
    };
  },
  methods: {
    init() {
      this.rest = 1 - parseFloat(this.stockQuantity);
      const useColor = this.color;
      let options = {
        title: {
          text: this.stockName,
          x: 35,
          y: 175,
        },
        grid: {
          x: 100,
          y: 200,
        },
        graphic: [
          {
            type: "text",
            left: "35",
            top: "38%",
            style: {
              text: (parseFloat(this.stockQuantity) * 100).toFixed(2) + "%",
              fontSize: 28,
              fill: useColor,
            },
          },
        ],
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["65%", "80%"], // 半径
            center: ["30%", "45%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
            },
            hoverAnimation: false,
            emphasis: {
              label: {
                show: false,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            itemStyle: {
              normal: {
                color: function(colors) {
                  // 颜色设置
                  var colorList = [useColor, "#000000"];
                  return colorList[colors.dataIndex];
                },
                // borderWidth: 5, // 设置各项空隙
                // borderColor: '#fff'
              },
            },
            data: [
              { value: parseFloat(this.stockQuantity) },
              { value: this.rest },
              // { value: 2032, name: '哺乳仔猪存栏' },
              // { value: 1644, name: '保育猪存栏' },
              // { value: 1546, name: '育肥猪存栏' }
            ],
          },
        ],
      };

      this.myChart.setOption(options);
    },
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById(this.id));
    this.init();
  },
  watch: {
    stockName: {
      handler(newValue) {
        console.log(newValue);
        this.init();
      },
    },
  },
};
</script>
<style scoped>
.production-donut {
  display: inline-block;
  margin-top: 20px;
  width: 20%;
  height: 200px;
}
.chartPie {
  width: 100%;
  height: 100%;
}
</style>