React+TS前台项目实战（二十九）-- 首页构建之性能优化实现首页Echarts模块数据渲染

---

前言

还记得之前我们创建的 高性能可配置Echarts组件 吗？今天我们将利用它来呈现首页统计模块的数据可视化效果，借助这个组件，我们能够显著减少编写代码的工作量，会方便很多。

Echart模块源码+功能分析+数据渲染

一、HashRateEchart统计图

1. 功能分析

（1）数据获取：使用@tanstack/react-query库来处理数据获取。使用useQuery请求并缓存数据
（2）组件缓存：使用memo高阶组件进行缓存。有助于提高性能，防止不必要的重新渲染组件
（3）数据处理：使用useMemo钩子缓存处理后的图表数据（fullEchartData和echartData），确保只有在必要时才进行数据处理，从而减少不必要的计算
（4）懒加载处理：组件根据数据的可用性进行条件渲染，数据加载中时显示Loading组件
（5）引用公共组件：使用Echart公共组件，提高开发效率，组件可看之前文章 高性能可配置Echarts图表组件封装

2. 代码+详细注释

// @/components/Home/HashRateEchart/index.tsx
import { memo, useMemo } from "react";
import BigNumber from "bignumber.js";
import { HomeChartBlock, ChartLoadingBlock } from "./styled";
import classNames from "classnames";
import "echarts/lib/chart/line";
import "echarts/lib/component/title";
import echarts from "echarts/lib/echarts";
import { useTranslation } from "react-i18next";
import { useQuery } from "@tanstack/react-query";
import Loading from "@/components/Loading";
import { ReactChartBlock } from "@/components/Echarts/common";
import { queryStatisticHashRate } from '@/api/home'
// echarts 配置
const useOption = () => {const { t } = useTranslation();return (data: any, useMiniStyle: boolean): echarts.EChartOption => {return {color: ["#ffffff"],title: {text: "平均出块时间(s)",textAlign: "left",textStyle: {color: "#ffffff",fontSize: 14,fontWeight: "lighter",fontFamily: "Lato",},},grid: {left: useMiniStyle ? "1%" : "2%",right: "3%",top: useMiniStyle ? "20%" : "15%",bottom: "2%",containLabel: true,},xAxis: [{axisLine: {lineStyle: {color: "#ffffff",width: 1,},},data: data.map((item: any) => item.xTime),axisLabel: {formatter: (value: string) => value,},boundaryGap: false,},],yAxis: [{position: "left",type: "value",scale: true,axisLine: {lineStyle: {color: "#ffffff",width: 1,},},splitLine: {lineStyle: {color: "#ffffff",width: 0.5,opacity: 0.2,},},axisLabel: {formatter: (value: string) => new BigNumber(value),},boundaryGap: ["5%", "2%"],},{position: "right",type: "value",axisLine: {lineStyle: {color: "#ffffff",width: 1,},},},],series: [{name: t("block.hash_rate"),type: "line",yAxisIndex: 0,lineStyle: {color: "#ffffff",width: 1,},symbol: "none",data: data.map((item: any) => new BigNumber(item.yValue).toNumber()),},],};};
};
// 使用memo钩子函数提升性能
export default memo(() => {// 使用useQuery请求数据const query = useQuery(["StatisticHashRate"], async () => {const { data,total } = await queryStatisticHashRate({page: 1,page_size: 25,});return {data,total: total ?? data?.length,};}, {refetchOnWindowFocus: false,});// 处理数据，并通过useMemo实现数据的缓存const fullEchartData = useMemo(() => query.data ?? [], [query.data]);// 获取最近14天的数据，并通过useMemo实现数据的缓存const echartData = useMemo(() => {const last14Days = -15;return fullEchartData.slice(last14Days);}, [fullEchartData]);// 根据数据渲染图表，当数据为空时显示没有数据，正在请求数据时显示加载中if (query.isLoading || !echartData?.length) {return <ChartLoadingBlock>{query.isLoading ? <Loading size="small" /> : <div className={classNames("no-data")}>暂无数据</div>}</ChartLoadingBlock>;}// 获取echarts的option配置const parseOption = useOption();return (<HomeChartBlock to="/block-list">{/* 使用公共Echart组件 */}<ReactChartBlockoption={parseOption(echartData, true)}notMergelazyUpdatestyle={{height: "180px",}}></ReactChartBlock></HomeChartBlock>);
});
--------------------------------------------------------------------------
import styled from "styled-components";
import Link from "@/components/Link";
export const HomeChartBlock = styled(Link)`canvas {cursor: pointer;}
`;
export const ChartLoadingBlock = styled.div`height: 100%;display: flex;align-items: center;justify-content: center;.no-data {font-size: 18px;}
`;

二、BlockTimeChart统计图

1. 功能分析

注：此处忽略，功能和上面HashRateEchart统计表基本一致，只是数据请求不同

2. 代码+详细注释

// @/components/Home/BlockTimeChart/index.tsx
import { memo, useMemo } from "react";
import BigNumber from "bignumber.js";
import { HomeChartBlock, ChartLoadingBlock } from "./styled";
import classNames from "classnames";
import "echarts/lib/chart/line";
import "echarts/lib/component/title";
import echarts from "echarts/lib/echarts";
import { useTranslation } from "react-i18next";
import { useQuery } from "@tanstack/react-query";
import Loading from "@/components/Loading";
import { ReactChartBlock } from "@/components/Echarts/common";
import { queryStatisticAverageBlockTimes } from '@/api/home'
// echarts 配置
const useOption = () => {const { t } = useTranslation();return (data: any, useMiniStyle: boolean): echarts.EChartOption => {return {color: ["#ffffff"],title: {text: "哈希率(H/s)",textAlign: "left",textStyle: {color: "#ffffff",fontSize: 14,fontWeight: "lighter",fontFamily: "Lato",},},grid: {left: useMiniStyle ? "1%" : "2%",right: "3%",top: useMiniStyle ? "20%" : "15%",bottom: "2%",containLabel: true,},xAxis: [{axisLine: {lineStyle: {color: "#ffffff",width: 1,},},data: data.map((item: any) => item.xTime),axisLabel: {formatter: (value: string) => value,},boundaryGap: false,},],yAxis: [{position: "left",type: "value",scale: true,axisLine: {lineStyle: {color: "#ffffff",width: 1,},},splitLine: {lineStyle: {color: "#ffffff",width: 0.5,opacity: 0.2,},},axisLabel: {formatter: (value: string) => new BigNumber(value),},boundaryGap: ["5%", "2%"],},{position: "right",type: "value",axisLine: {lineStyle: {color: "#ffffff",width: 1,},},},],series: [{name: t("block.hash_rate"),type: "line",yAxisIndex: 0,lineStyle: {color: "#ffffff",width: 1,},symbol: "none",data: data.map((item: any) => new BigNumber(item.yValue).toNumber()),},],};};
};
// 使用memo钩子函数提升性能
export default memo(() => {// 使用useQuery请求数据const query = useQuery(["StatisticAverageBlockTimes"], async () => {const { data,total } = await queryStatisticAverageBlockTimes({page: 1,page_size: 25,});return {data,total: total ?? data?.length,};}, {refetchOnWindowFocus: false,});// 处理数据，并通过useMemo实现数据的缓存const fullEchartData = useMemo(() => query.data ?? [], [query.data]);// 获取最近14天的数据，并通过useMemo实现数据的缓存const echartData = useMemo(() => {const last14Days = -15;return fullEchartData.slice(last14Days);}, [fullEchartData]);// 根据数据渲染图表，当数据为空时显示没有数据，正在请求数据时显示加载中if (query.isLoading || !echartData?.length) {return <ChartLoadingBlock>{query.isLoading ? <Loading size="small" /> : <div className={classNames("no-data")}>暂无数据</div>}</ChartLoadingBlock>;}// 获取echarts的option配置const parseOption = useOption();return (<HomeChartBlock to="/block-list">{/* 使用公共Echart组件 */}<ReactChartBlockoption={parseOption(echartData, true)}notMergelazyUpdatestyle={{height: "180px",}}></ReactChartBlock></HomeChartBlock>);
});
-------------------------------------------------------------------------------------------------------
// @/components/Home/BlockTimeChart/styled.tsx
import styled from "styled-components";
import Link from "@/components/Link";
export const HomeChartBlock = styled(Link)`canvas {cursor: pointer;}
`;
export const ChartLoadingBlock = styled.div`height: 100%;display: flex;align-items: center;justify-content: center;.no-data {font-size: 18px;}
`;

三、使用方式

结合首页响应式构建之banner、搜索、统计模块布局 这一讲，在统计模块中引入出块统计图表，以及挖矿统计图表即可

// 引入组件和echarts
import HashRateEchart from "./HashRateEchart/index";
import BlockTimeChart from "./BlockTimeChart/index";
// 使用
// ....
<HashRateEchart />
// ....
<BlockTimeChart />
// ....

四. 数据渲染后效果如下

（1）PC端

（2）移动端

---

总结

下一篇讲【首页响应式构建之实现全页面数据】。关注本栏目，将实时更新。