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

const Statistical: React.FC = () => {
  const chartRef: any = useRef();

  const options = {
    // 标题
    title: {
      text: '柱状图',
    },
    // x轴
    xAxis: {
      type: 'category',
      data: ['冬瓜', '茄子', '丝瓜', '玉米', '红薯', '西红柿', '芹菜'],
    },
    // y轴
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [20, 9, 39, 43, 60, 18, 50],
        type: 'bar', // 柱状图
        name: '销量',
      },
    ],
  };

  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>
    </div>
  );
};
export default Statistical;
