import * as echarts from 'echarts';
import React, { useEffect, useRef } from 'react';

interface editPros {
  data: any;
}

const Statistical: React.FC<editPros> = (props) => {
  const chartRef: any = useRef();
  const { data } = props;
  const options = {
    title: {
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      orient: 'vertical',
      left: 'left',
    },
    series: [
      {
        type: 'pie',
        radius: '50%',
        data: [
          { value: data?.device_online * 6, name: '在线' },
          { value: data?.device_offline, name: '离线' },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  };

  useEffect(() => {
    // 创建一个echarts实例，返回echarts实例。不能在单个容器中创建多个echarts实例
    const chart = echarts.init(chartRef.current);
    // 设置图表实例的配置项和数据
    chart.setOption(options);
    // 组件卸载
    return () => {
      chart.dispose();
    };
  }, []);

  return (
    <div>
      <div style={{ width: '600px', height: '400px' }} ref={chartRef} />
    </div>
  );
};
export default Statistical;