admin/src/pages/statis/components/Age.jsx

import React from 'react';
import * as echarts from 'echarts/core';
import Chart from '@/components/chart';
import { getUserAge } from '@/services/statis';

let dataIndex = 0;
export default (props) => {

  const chartRef = React.useRef();
  const [option, setOption] = React.useState({});

  React.useEffect(() => {
    getUserAge().then(res => {
      // [{ age: 'xxx', cnt: 12 }] => { 'xxx': 12 }
      const dataSource = (res || []).reduce((acc, x) => ({ ...acc, [x.age]: x.cnt }), {});
      setOption(getOption(dataSource));

      const t = setTimeout(() => {
        const chart = chartRef.current;
        chart.on('mousemove', function(e) {
          chart.dispatchAction({ type: 'downplay', dataIndex });
          chart.dispatchAction({ type: 'highlight', dataIndex: e.dataIndex });
          dataIndex = e.dataIndex
        });
        chart.dispatchAction({ type: 'highlight', dataIndex });
        clearTimeout(t);
      }, 300);
    });
  }, []);

  const onInited = (chart) => chartRef.current = chart;

  return (
    <Chart option={option} style={{ height: '270px' }} onInited={onInited} />
  )
}

function getOption(seriesData) {
  const data = Object.keys(seriesData).map(function(key) {
    return {
      value: seriesData[key],
      name: key
    }
  });

  return {
    title: {
      show: true,
      top: '6%',
      left: 'center',
      text: '人员年龄统计',
      textStyle: {
        color: '#fff',
        fontSize: 18,
        fontWeight: 'normal'
      }
    },
    color: ['#3DE0A4', '#FF8940', '#3FC9F4', '#CB55E9'],
    series: [
      {
        type: 'pie',
        top: '10%',
        radius: ['60%', '70%'],
        label: {
          show: false,
          position: 'center',
          lineHeight: 28,
          borderRadius: [100, 100, 100, 100],
          borderColor: '#FD8F00',
          borderWidth: 2,
          padding: 16,
          width: 100,
          height: 100,
          formatter: [
            '{s1|{d}%}',
            '{s2|{b}}',
            '{s3|{c}}',
          ].join('\n'),
          rich: {
            s1: {
              color: '#FD8F00',
              fontSize: 24,
            },
            s2: {
              color: 'rgba(255, 255, 255, .7)',
              fontSize: 16,
            },
            s3: {
              color: '#fff',
              fontSize: 18,
            },
          }
        },
        emphasis: {
          scaleSize: 10,
          label: {
            show: true,
          }
        },
        labelLine: {
          show: false
        },
        data: data,
      },
    ]
  };
}