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

news2024/11/13 10:08:54

文章目录

  • 前言
  • Echart模块源码+功能分析+数据渲染
    • 一、HashRateEchart统计图
      • 1. 功能分析
      • 2. 代码+详细注释
    • 二、BlockTimeChart统计图
      • 1. 功能分析
      • 2. 代码+详细注释
    • 三、使用方式
    • 四. 数据渲染后效果如下
  • 总结


前言

还记得之前我们创建的 高性能可配置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组件 */}
      <ReactChartBlock
        option={parseOption(echartData, true)}
        notMerge
        lazyUpdate
        style={{
          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组件 */}
      <ReactChartBlock
        option={parseOption(echartData, true)}
        notMerge
        lazyUpdate
        style={{
          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)移动端

在这里插入图片描述


总结

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1929340.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【刷题汇总 -- 乒乓球筐、组队竞赛、删除相邻数字的最大分数】

C日常刷题积累 今日刷题汇总 - day0141、乒乓球筐1.1、题目1.2、思路1.3、程序实现 2、组队竞赛2.1、题目2.2、思路2.3、程序实现 3、删除相邻数字的最大分数3.1、题目3.2、思路3.3、程序实现 -- dphash 4、题目链接 今日刷题汇总 - day014 1、乒乓球筐 1.1、题目 1.2、思路 …

RflySim工具链常见问题解答

7月10日&#xff0c;卓翼飞思实验室暑期公益培训首场直播圆满落幕&#xff0c;共吸引2400余名学员参与。本期直播培训以“RflySim-智能无人集群系统快速开发与验证工具链”为主题&#xff0c;对RflySim工具链的功能和资源框架进行了全面详细的介绍。本文将针对使用RflySim工具链…

数据结构-java中链表的存储原理及使用方式

目录 链表&#xff08;线性表的链式存储&#xff09; 代码实例&#xff1a;&#xff08;链表构建&#xff0c;头插尾插&#xff09; LinkedList LinkedList的使用&#xff1a; 1、构造方法 2、操作方法 LinkedList 和 ArrayList 的区别 链表&#xff08;线性表的链式存储…

论文AI疑似度太高?AIGC降痕工具助你快速降低

面对论文降痕的挑战&#xff0c;许多人都感受过其中的困难和挑战。论文里面如果出现“引用”过多的内容&#xff0c;AIGC率高的情况&#xff0c;这个时候怎么办呢&#xff0c;相信大多数的人就是替换同义词或词组、删除冗余的词汇和句子&#xff0c;从而来增加论文的原创性。然…

数仓实践:数据回滚的实现思路

目录 一、什么是数据回滚&#xff1f; 二、数据回滚的作用 1. 增量更新过程中的错误处理 2.维护数据的一致性 3.支持数据同步的可靠性 三、数据回滚的实现思路 1.标识字段的应用 2.数据同步失败的处理 3.数据同步成功后的处理 四、实战案例 在数据同步时&#xff0c;当历史数据…

如何用Claude 3 Sonnet Artifacts实现对数据文件的可视化分析?

如何用Claude 3 Sonnet Artifacts实现对数据文件的可视化分析&#xff1f; Prompt模板&#xff1a; Initial Request: 初始请求&#xff1a; I have uploaded data of the number of Software Engineering Jobs in the US since May 2020. I need different visual creative…

Package hyperref Warning: Ignoring empty anchor on input line 202.

问题 使用https://github.com/yaoyz96/els-cas-templates下载的复杂模板使用overleaf编译会出现警告 解决方案 将cas-dc.cls文件中的代码调换位置&#xff0c;例如将下述代码位置放到文件的最后即可解决问题 \RequirePackage[colorlinks]{hyperref} \colorlet{scolor}{blac…

干货分享 | TSMaster RPC 基础入门:编程指导和使用说明

介绍RPC模块前&#xff0c;我们先浅聊一下RPC的相关说明&#xff0c;以及在什么样的情况下需要了解本文 。 1. RPC 说明 远程过程调用&#xff08;RPC, Remote Procedure Call&#xff09;是一种网络通信协议&#xff0c;使得程序可以调用另一台计算机上的程序或服务&#xff…

# Redis 入门到精通(五)-- redis 持久化(2)

Redis 入门到精通&#xff08;五&#xff09;-- redis 持久化&#xff08;2&#xff09; 一、redis 持久化–save 配置与工作原理 1、RDB 启动方式&#xff1a;反复执行保存指令&#xff0c;忘记了怎么办&#xff1f;不知道数据产生了多少变化&#xff0c;何时保存&#xff1…

多核并行加速 tokenizer

import multiprocessingdef tokenize_text(text):return tokenizer(text, truncationTrue, paddingTrue, max_length256)def parallel_tokenize(texts, num_processesNone):"""使用多核并行处理文本分词"""with multiprocessing.Pool(processesn…

uniapp开发APP,主动连接mqtt,订阅消息

一、安装依赖 通过查阅资料&#xff0c;了解到现在mqtt.js库的最新版本已经是5&#xff0c;但是目前应该mqtt3.0.0版本最为稳定&#xff0c;我项目开发中使用的也是mqtt3.0.0版本 npm install mqtt3.0.0 参考插件&#xff1a;MQTT使用-模板项目 - DCloud 插件市场 参考文档…

鸿蒙Harmony--文本组件Text属性详解

金樽清酒斗十千&#xff0c;玉盘珍羞直万钱。 停杯投箸不能食&#xff0c;拔剑四顾心茫然。 欲渡黄河冰塞川&#xff0c;将登太行雪满山。 闲来垂钓碧溪上&#xff0c;忽复乘舟梦日边。 行路难&#xff0c;行路难&#xff0c;多歧路&#xff0c;今安在&#xff1f; 长风破浪会有…

java中的String 以及其方法(超详细!!!)

文章目录 一、String类型是什么String不可变的原因(经典面试题)String不可变的好处 二、String的常用构造形式1.使用常量串构造2.使用newString对象构造3.字符串数组构造 三、常用方法1. length() 获取字符串的长度2. charAt() 获取字符串中指定字符的值 (代码单元)3. codePoin…

ES快速开发,ElasticsearchRestTemplate基本使用以及ELK快速部署

最近博主有一些elasticsearch的工作&#xff0c;所以更新的慢了些&#xff0c;现在就教大家快速入门&#xff0c;并对一些基本的查询、更新需求做一下示例&#xff0c;废话不多说开始&#xff1a; 1. ES快速上手 es下载&#xff1a;[https://elasticsearch.cn/download/]()这…

记录|C#连接PLC通讯

参考视频C#连接S71200PLC 参考资料 目录 前言一、使用工具二、博图PLC1.创建好PLC设备Step1. 创建新设备Step2. 自动配置CPUStep3. 配置IP协议和连接机制隐藏步骤&#xff1a;重置解决PLC硬件版本和PLCSim创建的PLC版本不兼容Step4. 通过HslDemo来测试是否连通Step5. 配置DB数据…

C语言课程回顾:十、C语言之 指针

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 C语言之 指针 10 指针10.1 地址指针的基本概念10.2 变量的指针和指向变量的指针变量10.2.1 定义一个指针变量10.2.2 指针变量的引用10.2.3 指针变量作为函数参数10.2.4 指针变…

性能测试中唯一标识的JMH测试

前文分享了几种性能测试中常用到的生成全局唯一标识的案例&#xff0c;虽然在文中我猜测了几种方案设计的性能&#xff0c;并根据自己的经验给出了适用的场景。 但对于一个性能测试工程师来讲&#xff0c;有真是测试数据才更有说服力。这让我想起来之前学过的Java微基准测试框…

记录些MySQL题集(2)

MySQL 不使用limit的分页查询 limit问题&#xff1a;limit&#xff0c;offset递增问题。随着offset的增加&#xff0c;条数不变&#xff0c;耗时却增加了。 limit 0,10 耗时1ms limit 300000,10 耗时152ms limit 600000,10 耗时312ms 毫秒级别可能没感觉。假…

java:aocache 与Spring Aop兼容问题

本文适用于所有AspectJ与Spring AOP混用的场景。 Spring AOP 是基于动态代理的实现AOP&#xff0c;基于 JDK代理和CGLib代理实现运行时织入&#xff08;runtime weaving&#xff09;。 Spring AOP的切面定义沿用了ASpectJ的注解体系&#xff0c;所以在Spring体系中注解定义切面…

Java 将图片转base64和base64转图片

工具 Base64 和 图片互转。 导入的依赖 <!-- https://mvnrepository.com/artifact/com.sun.xml.bind/jaxb-impl --><dependency><groupId>com.sun.xml.bind</groupId><artifactId>jaxb-impl</artifactId><version>4.0.5</versi…