当前位置：首页 > news >正文

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

news 2025/8/9 8:38:37

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

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