usky-web-mobile/src/pages/business/ems/overview/components/itemPieChart.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);

const DEFAULT_DATA = [
  { name: "照明插座系统用电", value: 0, color: "#4a90e2" },
  { name: "空调系统用电", value: 0, color: "#40b883" },
  { name: "动力系统用电", value: 0, color: "#f5c542" },
  { name: "特殊系统用电", value: 0, color: "#ef6b6b" },
];

function buildOption() {
  const data = props.chartData.length ? props.chartData : DEFAULT_DATA;

  return {
    color: data.map((item) => item.color),
    tooltip: {
      trigger: "item",
      formatter: "{b}: {c} ({d}%)",
    },
    legend: {
      bottom: 0,
      left: "center",
      width: "92%",
      icon: "circle",
      itemWidth: 8,
      itemHeight: 8,
      itemGap: 10,
      textStyle: { fontSize: 10, color: "#666" },
    },
    series: [
      {
        type: "pie",
        radius: ["38%", "58%"],
        center: ["50%", "42%"],
        avoidLabelOverlap: true,
        label: {
          show: true,
          formatter: "{b}\n{d}%",
          fontSize: 10,
          color: "#666",
        },
        labelLine: {
          length: 10,
          length2: 6,
        },
        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: 520rpx;
  }
}
</style>