text: import React from 'react';
  import IceContainer from '@icedesign/container';
  import ReactEcharts from 'echarts-for-react';
  import styles from './index.module.scss';
  
  /**
   * 图表来源参考：http://gallery.echartsjs.com/editor.html?c=xByzFvaw1M
   */
  export default function Index() {
    const getOption = () => {
      const scale = 1;
      const echartData = [
        {
          value: 2154,
          name: '曲阜师范大学',
        },
        {
          value: 3854,
          name: '潍坊学院',
        },
        {
          value: 3515,
          name: '青岛职业技术学院',
        },
        {
          value: 3515,
          name: '淄博师范高等专科',
        },
        {
          value: 3854,
          name: '鲁东大学',
        },
        {
          value: 2154,
          name: '山东师范大学',
        },
      ];
      const rich = {
        yellow: {
          color: '#ffc72b',
          fontSize: 30 * scale,
          padding: [5, 4],
          align: 'center',
        },
        total: {
          color: '#ffc72b',
          fontSize: 40 * scale,
          align: 'center',
        },
        white: {
          color: '#fff',
          align: 'center',
          fontSize: 14 * scale,
          padding: [21, 0],
        },
        blue: {
          color: '#49dff0',
          fontSize: 16 * scale,
          align: 'center',
        },
        hr: {
          borderColor: '#0b5263',
          width: '100%',
          borderWidth: 1,
          height: 0,
        },
      };
  
      return {
        backgroundColor: '#031f2d',
        title: {
          text: '总考生数',
          left: 'center',
          top: '53%',
          padding: [24, 0],
          textStyle: {
            color: '#fff',
            fontSize: 18 * scale,
            align: 'center',
          },
        },
        legend: {
          selectedMode: false,
          formatter: () => {
            let total = 0; // 各科正确率总和
            echartData.forEach((value) => {
              total += value.value;
            });
            return `{total|${total}}`;
          },
          data: [echartData[0].name],
          // data: ['高等教育学'],
          // itemGap: 50,
          left: 'center',
          top: 'center',
          icon: 'none',
          align: 'center',
          textStyle: {
            color: '#666',
            fontSize: 16 * scale,
            rich,
          },
        },
        series: [
          {
            name: '总考生数量',
            type: 'pie',
            radius: ['42%', '50%'],
            hoverAnimation: false,
            color: [
              '#c487ee',
              '#deb140',
              '#49dff0',
              '#034079',
              '#6f81da',
              '#00ffb4',
            ],
            label: {
              normal: {
                formatter: (params) => {
                  let total = 0; // 考生总数量
                  let percent = 0; // 考生占比
                  echartData.forEach((value) => {
                    total += value.value;
                  });
                  percent = (params.value / total * 100).toFixed(1);
                  return `{white|${params.name}}\n{hr|}\n{yellow|${
                    params.value
                  }}\n{blue|${percent}%}`;
                },
                rich,
              },
            },
            labelLine: {
              normal: {
                length: 55 * scale,
                length2: 0,
                lineStyle: {
                  color: '#0b5263',
                },
              },
            },
            data: echartData,
          },
        ],
      };
    };
  
    return (
      <div className="circular-chart">
        <IceContainer>
          <ReactEcharts option={getOption()} className={styles.reactHeight} />
        </IceContainer>
      </div>
    );
  }
  