做网站学的什么专业,东莞seo全网营销,国内知名设计工作室,网站建设的功能特点有哪些文章目录 前言Echart模块源码功能分析数据渲染一、HashRateEchart统计图1. 功能分析2. 代码详细注释 二、BlockTimeChart统计图1. 功能分析2. 代码详细注释 三、使用方式四. 数据渲染后效果如下 总结 前言
还记得之前我们创建的 高性能可配置Echarts组件 吗#xff1f;今天我… 文章目录 前言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 sizesmall / : 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.divheight: 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 sizesmall / : 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.divheight: 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 /
// ....四. 数据渲染后效果如下
1PC端 2移动端 总结
下一篇讲【首页响应式构建之实现全页面数据】。关注本栏目将实时更新。
