react+echarts实现变化趋势缩略图

如上图，实现一个缩略图。

复制代码

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;

javascript 复制代码

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);

思路

将折线图的横纵轴信息、标题、图例、信息卡、刻度线等全部隐藏起来。