hyyfClient/src/views/Env/chart/ChartSalePig.vue

<template>
  <div :id="'chart-sale-pie-' + id" style="width: 100%; height: 100%"></div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "ChartStark",
  computed: {
    ...mapState(["color"]),
  },
  props: {
    id: {
      type: String,
      default: () => "0",
    },
    starkCount: {
      type: String,
      default: () => "0",
    },
  },
  data() {
    return {
      myChart: null,
    };
  },
  watch: {
    color(newVal) {
      if (newVal) {
        this.myChart.clear();
        this.init();
      }
    },
    starkCount(newVal) {
      if (newVal) {
        this.myChart.clear();
        this.init();
      }
    },
  },
  methods: {
    init() {
      let data = [{ name: "总重量", value: this.starkCount.toString() }];
      let formatNumber = function(num) {
        let reg = /(?=(\B)(\d{3})+$)/g;
        return num.toString().replace(reg, ",");
      };
      let total = data.reduce((a, b) => {
        return a + b.value * 1;
      }, 0);
      let options = {
        color: [this.color],
        title: [
          {
            text:
              "{name|" +
              "总重量" +
              "}\n{val|" +
              formatNumber(total) +
              "千克" +
              "}",
            top: "center",
            left: "center",
            textStyle: {
              rich: {
                name: {
                  fontSize: 14,
                  fontWeight: "normal",
                  color: "#666666",
                  padding: [10, 0],
                },
                val: {
                  fontSize: 32,
                  fontWeight: "bold",
                  color: "#333333",
                },
              },
            },
          },
        ],
        series: [
          {
            type: "pie",
            radius: ["45%", "60%"],
            center: ["50%", "50%"],
            data: data,
            hoverAnimation: false,
            itemStyle: {
              normal: {
                borderColor: "#fff",
                borderWidth: 2,
              },
            },
            labelLine: {
              normal: {
                length: 20,
                length2: 120,
                lineStyle: {
                  color: "#e6e6e6",
                },
              },
            },
            label: {
              // normal: {
              //   formatter: (params) => {
              //     return (
              //       "{icon|●}{name|" +
              //       params.name +
              //       "}{value|" +
              //       formatNumber(params.value) +
              //       "}"
              //     );
              //   },
              //   padding: [0, -100, 25, -100],
              //   rich: {
              //     icon: {
              //       fontSize: 16,
              //     },
              //     name: {
              //       fontSize: 14,
              //       padding: [0, 10, 0, 4],
              //       color: "#666666",
              //     },
              //     value: {
              //       fontSize: 18,
              //       fontWeight: "bold",
              //       color: "#333333",
              //     },
              //   },
              // },
              show: false,
            },
          },
        ],
      };
      this.myChart.setOption(options);
    },
  },
  mounted() {
    this.myChart = this.$echarts.init(
      document.getElementById("chart-sale-pie-" + this.id)
    );
    this.init();
  },
};
</script>

<style scoped></style>