zzz-signal-search-export/src/renderer/components/PieChart.vue

<template>
  <div class="chart mb-2 relative h-48 lg:h-56 xl:h-64 2xl:h-72">
    <div ref="chart" class="absolute inset-0"></div>
  </div>
</template>

<script setup>
import { reactive, computed, ref, onMounted, onUpdated } from "vue";
import { use, init } from "echarts/core";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from "echarts/components";
import { PieChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
import throttle from "lodash-es/throttle";

use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
]);

const props = defineProps({
  data: Object,
  typeMap: Map,
  i18n: Object,
});

const chart = ref(null);

const colors = ["#eeaa66", "#fac858", "#ee6666", "#5470c6", "#ba66ee", "#91cc75", "#73c0de"];

const parseData = (detail, type) => {
  const text = props.i18n.ui.data;
  const keys = [
    [text.bang4, "count4b"],
    [text.chara4, "count4c"],
    [text.weapon4, "count4w"],
    [text.chara3, "count3c"],
    [text.bang3, "count3b"],
    [text.weapon3, "count3w"],
    [text.weapon2, "count2w"]
  ];
  const result = [];
  const color = [];
  const selected = {
    [text.weapon2]: false,
  };
  keys.forEach((key, index) => {
    if (!detail[key[1]]) return;
    result.push({
      value: detail[key[1]],
      name: key[0],
    });
    color.push(colors[index]);
  });
  if (
    type === "100" ||
    result.findIndex((item) => item.name.includes("S")) === -1
  ) {
    selected[text.weapon2] = true;
  }
  return [result, color, selected];
};

let pieChart = null;
const updateChart = throttle(() => {
  if (!pieChart) {
    pieChart = init(chart.value);
  }

  const colon = props.i18n.symbol.colon;
  const result = parseData(props.data[1], props.data[0]);

  const option = {
    tooltip: {
      trigger: "item",
      formatter: `{b0}${colon}{c0}`,
      padding: 4,
      textStyle: {
        fontSize: 12,
      },
    },
    legend: {
      top: "2%",
      left: "center",
      selected: result[2],
    },
    selectedMode: "single",
    color: result[1],
    series: [
      {
        name: props.typeMap.get(props.data[0]),
        type: "pie",
        top: 50,
        startAngle: 70,
        radius: ["0%", "90%"],
        // avoidLabelOverlap: false,
        labelLine: {
          length: 0,
          length2: 10,
        },
        label: {
          overflow: "break",
        },
        data: result[0],
      },
    ],
  };

  pieChart.setOption(option);
  pieChart.resize();
}, 1000);

onUpdated(() => {
  updateChart();
});

onMounted(() => {
  updateChart();
  window.addEventListener("resize", updateChart);
});
</script>