import * as React from 'react';

import echarts from '../../../../utils/echarts';
interface Iprops {
  className: string;
  dataSource: { aqi: number };
}

const AqiCharts: React.FC<Iprops> = ({ className, dataSource }) => {
  const echartsContainer = React.useRef<HTMLDivElement>(null);
  React.useEffect(() => {
    const myChart = echarts.init(echartsContainer.current);
    const option = {
      grid: {
        top: '10%',
        bottom: '20%',
      },
      series: [
        {
          name: '业务指标',
          type: 'gauge',
          radius: '90%',
          min: 0,
          max: 500,
          detail: { formatter: '{value}' },
          data: [{ value: dataSource.aqi }],
          axisLine: {
            show: true,
          },
          splitLine: {
            show: false,
          },
        },
      ],
    };
    myChart.setOption(option);
  }, [dataSource.aqi]);

  return (
    <div className='data-statistics-charts-wrapper'>
      <div className={className} ref={echartsContainer}></div>;
    </div>
  );
};
export default AqiCharts;
