// donutChart.js
import * as echarts from 'echarts';

/**
 * 环形图（donut / pie）
 * @param {Array<string>} nameList  名称数组
 * @param {Array<number>} valueList 数值数组
 * @returns {Object}                echarts option
 */
const getDonutChart = (nameList, valueList) => {
  // 使用与折线图一致的配色（6色，取前5个）
  const colors = [
    '#87E8DE',   // 原“集成电路”青绿 → 可替换为更协调色
    '#69B1FF',   // 浅蓝
    '#FF7875',   // 红
    '#B37FEB',   // 紫
    '#FFD666'    // 新增黄色，用于第5项（避免重复）
  ];

  const data = nameList.map((name, i) => ({
    name,
    value: valueList[i]
  }));

  return {
    color: colors,
    tooltip: { trigger: "item", formatter: ({ name, value, percent }) => `${name}<br/>${value}项 ${percent}%` },
    series: [
      {
        type: "pie",
        radius: [96, 120],
        center: ["50%", "50%"],
        avoidLabelOverlap: true,
        itemStyle: { borderWidth: 0 },
        label: {
          show: true,
          position: "outside",
          alignTo: "edge",
          formatter: ({ name, value, percent }) => `{name|${name}}  {value|${value}项}  {percent|${percent}%}`,
          minMargin: 50,
          edgeDistance: 10,
          lineHeight: 15,
          rich: {
            name: {
              fontSize: 16,
              fontFamily: "Microsoft YaHei",
              fontWeight: 700,
              lineHeight: 24,
              color: "rgb(59, 65, 75)"
            },
            value: {
              fontSize: 14,
              fontFamily: "Microsoft YaHei",
              fontWeight: 400,
              lineHeight: 22,
              color: "rgb(95, 101, 108)"
            },
            percent: {
              fontSize: 14,
              fontFamily: "Microsoft YaHei",
              fontWeight: 400,
              lineHeight: 22,
              color: "rgb(95, 101, 108)"
            }
          }
        },
        labelLine: {
          show: true,
          length: 30,
          length2: 0,
          maxSurfaceAngle: 80
        },
        labelLayout: function (params) {
          const isLeft = params.labelRect.x < 380;
          const points = params.labelLinePoints;
          // 导航线终点在标签下方
          const lineY = params.labelRect.y + params.labelRect.height;
          points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width;
          points[2][1] = lineY;
          points[1][1] = lineY;
          return {
            labelLinePoints: points
          };
        },
        data: data.map((d, i) => ({
          ...d,
          labelLine: { lineStyle: { color: colors[i], width: 1 } }
        }))
      }
    ]
  };
};

export default getDonutChart;