import React, { useState, useEffect } from 'react';
const ParentCom = () => {
	const [data, setData] = useState({});
	useEffect(() => {
		// 這里可以做一些接口請(qǐng)求等操作
		setData({
            isSheng: false, value: 11.24, percentage: '2.3%', data: {
              xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              yData: [820, 233, 121, 934, 12, 130, 320],
            },
          });
	},[]);

	return <div>
		<div>{/*頁面的其他渲染內(nèi)容*/}</div>
		<ThumbnailChartsCom 
          id={'yeasterday-search-time'}
          data={data} />
	</div>
};
export default ParentCom;

import React, { memo, useEffect, useRef } from 'react';

import { LineChart } from 'echarts/charts';
import { GridComponent } from 'echarts/components';
import * as echarts from 'echarts/core';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

import styles from './index.module.less';

echarts.use([
  GridComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition,
]);
interface IThumbnail {
  xData: string[];
  yData: number[];
}
const ThumbnailChartsCom = ({ id, data }: { id: string, data: IThumbnail }) => {
  const chartRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    const chartDom = chartRef.current;
    if (!chartDom) return;
    const myChart = echarts.init(chartDom);
    const option = {
      grid: {
        top: '0',
        left: '0',
        right: '0',
        bottom: '0',
        containLabel: true,
      },
      // 設(shè)置x軸的類型為類目軸，不顯示邊界間隙
      xAxis: {
        type: 'category',
        boundaryGap: false,
        show: false,
        // 設(shè)置x軸的數(shù)據(jù)
        data: data.xData || [],
      },
      // 設(shè)置y軸的類型為數(shù)值軸
      yAxis: {
        type: 'value',
        axisTick: { show: false }, // 隱藏 Y 軸的刻度線
        axisLabel: { show: false },  // 隱藏 Y 軸的標(biāo)簽
        splitLine: {
          show: false,
        }, // 隱藏 Y 軸的分割線
      },
      // 設(shè)置圖表的系列數(shù)據(jù)
      series: [
        {
          // 設(shè)置系列數(shù)據(jù)
          data: data.yData || [],
          type: 'line', // 設(shè)置系列數(shù)據(jù)的類型為折線圖
          symbol: 'none', // 不顯示折線圖上的點(diǎn)
          smooth: true, // 平滑曲線
          lineStyle: {
            color: '#375EFF',
          },
          // 設(shè)置系列數(shù)據(jù)的區(qū)域樣式
          areaStyle: {
            opacity: 0.3,
          },
        },
      ],
    };
    option && myChart.setOption(option);
    const handleResize = () => {
      myChart.resize();
    };
    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
      myChart.dispose(); // 銷毀ECharts實(shí)例
    };
  }, [data, id]);
  // 返回一個(gè)div元素，用于顯示圖表
  return <div ref={chartRef} id={id} className={styles.chartsWrap} />;
};

export default memo(ThumbnailChartsCom);