如上圖，實現一個縮略圖。

import React, { useState, useEffect } from 'react';
const ParentCom = () => {const [data, setData] = useState({});useEffect(() => {// 這里可以做一些接口請求等操作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>{/*頁面的其他渲染內容*/}</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,},// 設置x軸的類型為類目軸，不顯示邊界間隙xAxis: {type: 'category',boundaryGap: false,show: false,// 設置x軸的數據data: data.xData || [],},// 設置y軸的類型為數值軸yAxis: {type: 'value',axisTick: { show: false }, // 隱藏 Y 軸的刻度線axisLabel: { show: false },  // 隱藏 Y 軸的標簽splitLine: {show: false,}, // 隱藏 Y 軸的分割線},// 設置圖表的系列數據series: [{// 設置系列數據data: data.yData || [],type: 'line', // 設置系列數據的類型為折線圖symbol: 'none', // 不顯示折線圖上的點smooth: true, // 平滑曲線lineStyle: {color: '#375EFF',},// 設置系列數據的區域樣式areaStyle: {opacity: 0.3,},},],};option && myChart.setOption(option);const handleResize = () => {myChart.resize();};window.addEventListener('resize', handleResize);return () => {window.removeEventListener('resize', handleResize);myChart.dispose(); // 銷毀ECharts實例};}, [data, id]);// 返回一個div元素，用于顯示圖表return <div ref={chartRef} id={id} className={styles.chartsWrap} />;
};export default memo(ThumbnailChartsCom);

思路

將折線圖的橫縱軸信息、標題、圖例、信息卡、刻度線等全部隱藏起來。