epmet-work-pc-chengyang/src/views/modules/home/cpts/pan-chart.vue

<template>
  <div class="m-chart">
    <canvas id="myChart" :width="width" :height="height" />
  </div>
</template>

<script>
import nextTick from "dai-js/tools/nextTick";
import F2 from "@antv/f2/lib/index-all";

// ios下字体渲染有bug
const fontFamily = "PingFang SC";
const fontSize = 12;

let chart;
let srcData = [];

const iniChart = function (config, srcData, total) {
  chart = new F2.Chart({
    id: "myChart",
    ...config,
  });

  let data = [
    {
      const: "const",
      name: "交通出行",
      count: 51.39,
    },
    {
      const: "const",
      name: "饮食",
      count: 356.68,
    },
    {
      const: "const",
      name: "生活日用",
      count: 20.0,
    },
    {
      const: "const",
      name: "住房缴费",
      count: 116.53,
    },
  ];
  console.log("-----------------------------------", srcData);
  data = srcData;

  chart.source(data);
  chart.coord("polar", {
    transposed: true,
    radius: 0.9,
    innerRadius: 0.6,
  });
  chart.axis(false);
  chart.legend(false);
  // chart.legend({
  //   position: "bottom",
  //   align: "center",
  // });
  chart.tooltip(false);
  chart.guide().html({
    position: ["50%", "50%"],
    html: `<div style="text-align: center;width:150px;height: 35px;">\n      <p style="font-size: 18px;color: #999;margin: 0" id="title">总人数</p>\n      <p style="font-size: 30px;color: #343434;margin: 0;font-weight: bold;" id="count">${total}</p>\n      </div>`,
  });
  chart
    .interval()
    .position("const*count")
    .adjust("stack")
    .color("name", [
      "#e70014",
      "#ea6200",
      "#f59701",
      "#fcc900",
      "#fef200",
      "#cedc01",
      "#8fc41e",
      "#22ad38",
      "#009b44",
      "#009c6c",
      "#019e97",
      "#00a1be",
      "#00a2c1",
      "#00a0ea",
      "#0085d2",
      "#0067b6",
      "#00469b",
      "#1d2089",
      "#5e1986",
      "#920784",
      "#bd0081",
      "#e5007f",
      "#e5026d",
      "#e4024e",
      "#e40031",
    ]);
  chart.pieLabel({
    sidePadding: 30,
    activeShape: true,
    label1: function label1(data) {
      return {
        text: data.count + "人",
        fill: "#343434",
        fontWeight: "bold",
        fontSize,
      };
    },
    label2: function label2(data) {
      return {
        text: data.name,
        fill: "#999",
        fontSize,
      };
    },
    onClick: function onClick(ev) {
      const data = ev.data;
      if (data) {
        // $("#title").text(data.name);
        // $("#count").text(data.count);
      }
    },
  });
  chart.render();

  // 注意：需要把chart return 出来
  return chart;
};

export default {
  name: "chart",
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
    total: {
      type: Number,
      default: 0,
    },
    config: {
      type: Object,
      default: () => {
        return {};
      },
    },
    width: {
      type: Number,
      default: 400,
    },
    height: {
      type: Number,
      default: 260,
    },
  },
  data() {
    return {
      iniLoading: false,
    };
  },
  watch: {
    list(data) {
      // chart.changeData(data);
      srcData = data;
    },
  },
  async created() {
    await nextTick(200);
    iniChart(this.config, this.list, this.total);
    await nextTick(200);
    this.iniLoading = true;
  },

  methods: {
    setList(data) {
      chart.changeData(data);
      srcData = data;
    },
  },
};
</script>

<style lang="scss" scoped></style>