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

/**
 * 环形图（ donut / pie ）
 * @param {Array<string>} nameList  名称数组
 * @param {Array<number>} valueList 数值数组
 * @param {boolean} isPercent       数值是否带 % 显示
 * @returns {Object}                echarts option
 */
const getDonutChart = (nameList, valueList, isPercent = false) => {
  console.log(nameList, valueList, isPercent = false)
  // 渐变色可随主题扩展
  const colorList = [
    '#87E8DE',
    '#69B1FF',
    '#FF7875',
    '#B37FEB'
  ];

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

  return {
    color: colorList,
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c}' + (isPercent ? '%' : '') + ' ({d}%)'
    },
    legend: {
      orient: 'vertical',
      // left: 'center',
      bottom: 'bottom',
      itemGap: 16,
      textStyle: { fontSize: 14, color: '#666' }
    },
    series: [
      {
        name: '统计',
        type: 'pie',
        radius: ['45%', '70%'],   // 内环 / 外环
        center: ['40%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: { borderRadius: 0, borderColor: '#fff', borderWidth: 0 },
        label: {
          show: false,
          position: 'inside',
          formatter: ({ value }) => value + (isPercent ? '%' : ''),
          fontSize: 14,
          color: '#fff'
        },
        emphasis: {
          label: { show: true, fontSize: 16, fontWeight: 'bold' }
        },
        data
      }
    ]
  };
};

export default getDonutChart;