usky-web-mobile/src/pages/business/ems/overview/components/categoryPieChart.vue

<template>
  <view class="overview-chart">
    <l-echart ref="chartRef" class="overview-chart__echart"></l-echart>
  </view>
</template>

<script setup>
import * as echarts from "echarts";
import { ref, watch, nextTick } from "vue";

const props = defineProps({
  chartData: {
    type: Array,
    default: () => [],
  },
});

const chartRef = ref(null);

function buildOption() {
  const data = props.chartData.length
    ? props.chartData
    : [{ name: "电", value: 0, color: "#40b883" }];

  return {
    color: data.map((item) => item.color),
    tooltip: {
      trigger: "item",
      formatter: "{b}: {c} ({d}%)",
    },
    legend: {
      bottom: 0,
      left: "center",
      icon: "circle",
      itemWidth: 8,
      itemHeight: 8,
      textStyle: { fontSize: 11, color: "#666" },
    },
    series: [
      {
        type: "pie",
        radius: ["42%", "68%"],
        center: ["50%", "45%"],
        avoidLabelOverlap: true,
        label: {
          show: true,
          formatter: "{b}\n{d}%",
          fontSize: 11,
          color: "#666",
        },
        labelLine: {
          length: 12,
          length2: 8,
        },
        data: data.map((item) => ({
          name: item.name,
          value: item.value,
        })),
      },
    ],
  };
}

function renderChart() {
  nextTick(() => {
    if (!chartRef.value) return;
    chartRef.value.init(echarts, (instance) => {
      instance.setOption(buildOption(), true);
    });
  });
}

watch(() => props.chartData, renderChart, { deep: true, immediate: true });
</script>

<style lang="scss" scoped>
.overview-chart {
  &__echart {
    width: 100%;
    height: 480rpx;
  }
}
</style>