taos-web/src/components/chart/pie/percent-pie-chart.vue

<template>
  <div class="chart" :id="id"></div>
</template>

<script>
import util from "@/helper/util.js";
import partten from "@/helper/partten.js";
import * as echarts from "echarts";

export default {
  name: "percent-pie",
  componentName: "percent-pie",
  props: {
    width: {
      type: String,
      default: "18.519vh",
    },
    height: {
      type: String,
      default: "18.519vh",
    },
    // 百分比值
    value: {
      type: Number,
      default: 10,
    },
    max: {
      type: Number,
      default: 100,
    },
    // 颜色 green yellow 等 partten支持的颜色
    color: {
      type: String,
      default: "green",
    },
  },
  data() {
    return {
      id: "",
      chart: null,
    };
  },
  computed: {
    colorValue() {
      return partten.getColor(this.color);
    },
  },
  methods: {
    initChart() {
      let option = {
        calculable: true,
        series: [
          {
            name: "",
            type: "pie",
            radius: ["0%", "100%"],
            center: ["50%", "50%"],
            data: [
              {
                value: this.value,
                name: "",
                itemStyle: {
                  color: this.colorValue,
                },
              },
              {
                value: this.max - this.value,
                name: "",
                itemStyle: {
                  color: "transparent",
                },
              },
            ],
            label: {
              show: false,
              position: "center",
            },
          },
          {
            name: "",
            type: "pie",
            radius: ["0%", "95%"],
            center: ["50%", "50%"],
            data: [
              {
                value: this.value,
                name: "",
                itemStyle: {
                  color: "transparent",
                },
              },
              {
                value: this.max - this.value,
                name: "",
                itemStyle: {
                  color: "#5f6769",
                },
              },
            ],
            label: {
              show: false,
              position: "center",
            },
          },
        ],
      };

      this.chart.setOption(option);
    },
  },
  created() {
    this.id = "pie-chart-" + util.newGUID();
  },
  mounted() {
    this.$el.style.width = this.width;
    this.$el.style.height = this.height;
    this.chart = echarts.init(this.$el);
    this.initChart();
  },
  updated() {
    this.initChart();
  },
};
</script>

<style lang="less">
.chart {
  width: 100%;
  height: 100%;
  display: inline-block;
}
</style>