<template>
  <div id="pie"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";

const init = () => {
  let chartDom: any = document.getElementById("pie");
  let myChart = echarts.init(chartDom);
  let option;

  let datas = [
    [
      { name: "圣彼得堡来客", value: 5.6 },
      { name: "陀思妥耶夫斯基全集", value: 1 },
      { name: "史记精注全译（全6册）", value: 0.8 },
      { name: "加德纳艺术通史", value: 0.5 },
      { name: "表象与本质", value: 0.5 },
      { name: "其它", value: 3.8 },
    ],
  ];
  option = {
    title: {
      text: "阅读书籍分布",
      left: "center",
      textStyle: {
        color: "#fff",
      },
    },
    series: datas.map(function (data, idx) {
      let top = idx * 33.3;
      return {
        type: "pie",
        radius: [20, 60],
        width: 400,
        itemStyle: {
          borderColor: "#fff",
          borderWidth: 1,
        },
        label: {
          alignTo: "edge",
          formatter: "{name|{b}}\t{time|{c} 小时}",
          minMargin: 5,
          edgeDistance: 10,
          lineHeight: 15,
          color: "#ffffff",
          rich: {
            time: {
              fontSize: 10,
              color: "#999",
            },
          },
        },
        labelLine: {
          length: 15,
          length2: 0,
          maxSurfaceAngle: 80,
        },
        labelLayout: function (params: any) {
          const isLeft = params.labelRect.x < myChart.getWidth() / 2;
          const points = params.labelLinePoints;
          points[2][0] = isLeft
            ? params.labelRect.x
            : params.labelRect.x + params.labelRect.width;
          return {
            labelLinePoints: points,
          };
        },
        data: data,
      };
    }),
  };

  option && myChart.setOption(option);
};

defineExpose({
  init,
});
</script>

<style lang="scss" scoped>
#pie {
  height: 200px;
  width: 384px;
}
</style>
