h5-dangjian/src/pages/aiChannel/components/ring.vue

<template>
  <div :class="this.id" ref="ringChart">
    <canvas :id="this.id"></canvas>
  </div>
</template>

<script>
import F2 from "@antv/f2/lib/index-all";
export default {
  name: "ring",
  props: {
    list: {
      type: Array,
      default: () => []
    },
    id: {
      type: String,
      default: ""
    }
  },
  data: function() {
    return {};
  },
  methods: {},
  computed: {},
  mounted() {
    const data = this.list;
    let total = 0;
    data.forEach(v => {
      total += v.amount;
    });
    const chart = new F2.Chart({
      id: this.id,
      width: this.$refs.ringChart.offsetWidth,
      height: this.$refs.ringChart.offsetWidth * 0.5625,
      pixelRatio: window.devicePixelRatio,
      padding: [20, 0, 5, 0]
    });

    chart.source(data);
    chart.coord("polar", {
      transposed: true,
      innerRadius: 0.6,
      radius: 0.75
    });
    chart.axis(false);
    chart.legend(false);
    chart.tooltip(false);
    // 配置文本饼图
    chart.pieLabel({
      sidePadding: 5,
      label1: function label1(data) {
        return {
          text: data.memo,
          fill: "#808080"
        };
      },
      label2: function label2(data) {
        return {
          fill: "#808080",
          text: ((data.amount / total) * 100).toFixed(2) + "%",
          fontWeight: 500,
          fontSize: 10
        };
      }
    });
    chart
      .interval()
      .position("const*amount")
      .color("memo", [
        "#1890FF",
        "#13C2C2",
        "#2FC25B",
        "#FACC14",
        "#F04864",
        "#8543E0",
        "#3436C7",
        "#223273"
      ])
      .adjust("stack");
    chart.render();
  },
  beforeDestroy: function() {},
  components: {}
};
</script>
<style lang="scss" scoped></style>