JG-ADMIN-TEMP/src/views/report/statistics/outTime/components/PieChart1.vue

<!-- 饼图 -->
<template>
  <el-card>
    <div :id="id" :class="className" :style="{ height, width }"></div>
  </el-card>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { defineProps, ref } from "vue";

const props = defineProps({
  id: {
    type: String,
    default: "pieChart",
  },
  className: {
    type: String,
    default: "",
  },
  width: {
    type: String,
    default: "200px",
    required: true,
  },
  height: {
    type: String,
    default: "200px",
    required: true,
  },
  list: {
    type: Array,
    default: [],
    required: true,
  },
});
const options = {
  title: {
    text: "订单准时完成率",
    x: "center",
    textStyle: {
      color: "#fff",
    },
  },
  tooltip: {
    trigger: "item",
    formatter: "{b} : {c} ({d}%)",
  },
  legend: {
    orient: "vertical",
    x: "left",
    data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
  },
  calculable: true,
  series: [
    {
      name: "访问来源",
      type: "pie",
      radius: "75%",
      center: ["50%", "50%"],
      data: [
        { name: "直接访问", value: 70 },
        { value: 30, name: "邮件营销" },
      ],
    },
  ],
};

const chart = ref<any>("");
watch?.(
  () => props.list,
  (newVal) => {
    options.series[0].data = props.list;
    options.legend.data = [];
    props.list.forEach((item) => {
      options.legend.data.push(item.name);
    });
    handle();
  }
);

const handle = () => {
  chart.value = markRaw(
    echarts.init(document.getElementById(props.id) as HTMLDivElement)
  );

  chart.value.setOption(options);

  window.addEventListener("resize", () => {
    chart.value.resize();
  });
};
onMounted(() => {
  handle();
});

onActivated(() => {
  if (chart.value) {
    chart.value.resize();
  }
});
</script>