export const renderEchart = ({
  echart,
  echarts,
  pieChartData,
}: {
  echart: any
  echarts: any
  pieChartData: any
}) => {
  const typeColorMap: { [key: string]: any } = {
    需冲刺: { color: '#EB5241', simpleName: '冲' },
    较稳妥: { color: '#F0BA16', simpleName: '稳' },
    可保底: { color: '#15C496', simpleName: '保' },
  }
  const formattedData = pieChartData.value.map((item: any) => ({
    ...item,

    itemStyle: {
      color: typeColorMap[item.name]?.color,
    },
    label: {
      formatter: (params: any) => typeColorMap[params.name]?.simpleName || params.name,
    },
  }))
  echart.value.init(echarts, (chart: any) => {
    let option = {
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} ({d}%)',
      },
      legend: {
        orient: 'horizontal',
        bottom: 8,
        left: 'center',
        icon: 'circle',
        itemWidth: 10,
        itemHeight: 10,
        itemGap: 20,
      },
      series: [
        {
          type: 'pie',
          radius: ['40%', '70%'],
          data: formattedData,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
          label: {
            formatter: (params: any) => typeColorMap[params.name]?.simpleName || params.name,
          },
        },
      ],
      graphic: {
        elements: [
          {
            type: 'text',
            left: 'center',
            top: '40%',

            style: {
              text: '适合的大学',
              fontSize: 12,
              fill: '#1F2329',
              textAlign: 'center',
              textVerticalAlign: 'middle',
            },
          },
          {
            type: 'text',
            left: 'center',
            top: '50%',
            style: {
              text: formattedData.reduce((acc: any, curr: any) => acc + curr.value, 0),
              fontSize: 24,
              fill: '#1F2329',
              textAlign: 'center',
              textVerticalAlign: 'middle',
              fontWeight: 'bold',
            },
          },
        ],
      },
    }

    chart.setOption(option)
  })
}
