React+TS前台项目实战（二十六）-- 高性能可配置Echarts图表组件封装

Amore05252024-07-09 14:33

文章目录

  • 前言
  • CommonChart组件
    • [1. 功能分析](#1. 功能分析)
    • [2. 代码+详细注释](#2. 代码+详细注释)
    • [3. 使用到的全局hook代码](#3. 使用到的全局hook代码)
    • [4. 使用方式](#4. 使用方式)
    • [5. 效果展示](#5. 效果展示)
  • 总结

前言

Echarts图表在项目中经常用到，然而，重复编写初始化，更新，以及清除实例等动作对于开发人员来说是一种浪费时间和精力。因此，在这篇文章中，将封装一个 "高性能可配置Echarts组件" ，简化开发的工作流程，提高数据可视化的效率和质量。

CommonChart组件

1. 功能分析

（1）可以渲染多种类型的图表，包括折线图、柱状图、饼图、地图和散点图

（2）通过传入的 option 属性，配置图表的各种参数和样式

（4）通过传入的 onClick 属性，处理图表元素的点击事件

（5）通过传入的 notMerge 属性，控制是否合并图表配置

（6）通过传入的 lazyUpdate 属性，控制是否懒渲染图表

（7）通过传入的 style 属性，设置图表容器的样式

（8）通过传入的 className 属性，自定义图表容器的额外类名

（9）通过监听窗口大小变化，自动调整图表的大小

（10）使用 usePrevious、useWindowResize 和 useEffect 等钩子来提高组件性能并避免不必要的渲染

2. 代码+详细注释

c 复制代码 
// @/components/Echarts/commom/index.tsx
import { useRef, useEffect, CSSProperties } from "react";
// 引入 Echarts 的各种图表组件和组件配置,后续备用
import "echarts/lib/chart/line"; // 折线图
import "echarts/lib/chart/bar"; // 柱状图
import "echarts/lib/chart/pie"; // 饼图
import "echarts/lib/chart/map"; // 地图
import "echarts/lib/chart/scatter"; // 散点图
import "echarts/lib/component/tooltip"; // 提示框组件
import "echarts/lib/component/title"; // 标题组件
import "echarts/lib/component/legend"; // 图例组件
import "echarts/lib/component/markLine"; // 标线组件
import "echarts/lib/component/dataZoom"; // 数据区域缩放组件
import "echarts/lib/component/brush"; // 刷选组件
// 引入 Echarts 的类型声明
import * as echarts from "echarts";
import { ECharts, EChartOption } from "echarts";
// 引入自定义的钩子函数和公共函数
import { useWindowResize, usePrevious } from "@/hooks";
import { isDeepEqual } from "@/utils";
/**
 * 公共 Echarts 业务灵巧组件，可在项目中重复使用
 *
 * @param {Object} props - 组件属性
 * @param {EChartOption} props.option - Echarts 配置项
 * @param {Function} [props.onClick] - 点击事件处理函数
 * @param {boolean} [props.notMerge=false] - 是否不合并数据
 * @param {boolean} [props.lazyUpdate=false] - 是否懒渲染
 * @param {CSSProperties} [props.style] - 组件样式
 * @param {string} [props.className] - 组件类名
 * @returns {JSX.Element} - React 组件
 */
type Props = {
  option: EChartOption;
  onClick?: (param: echarts.CallbackDataParams) => void;
  notMerge?: boolean;
  lazyUpdate?: boolean;
  style?: CSSProperties;
  className?: string;
};
const CommonChart = (props: Props) => {
  // 解构属性，并设置默认值
  const {
    option,
    onClick, // 点击事件处理函数
    notMerge = false, // 是否不合并数据，默认为 false
    lazyUpdate = false, // 是否懒渲染，默认为 false
    style, // 组件样式
    className = "", // 组件类名，默认为空字符串
  } = props;
  // 创建 ref 来引用 div 元素，并初始化 chartInstanceRef 为 null
  const chartRef = useRef<HTMLDivElement>(null);
  const chartInstanceRef = useRef<ECharts | null>(null);
  // 使用 usePrevious 钩子函数来记录上一次的 option 和 onClick 值
  const prevOption = usePrevious(option);
  const prevClickEvent = usePrevious(onClick);

  useEffect(() => {
    // 定义一个变量来存储图表实例
    let chartInstance: ECharts | null = null;
    if (chartRef.current) {
      // 如果图表实例不存在，则初始化
      if (!chartInstanceRef.current) {
        const hasRenderInstance = echarts.getInstanceByDom(chartRef.current);
        if (hasRenderInstance) {
          hasRenderInstance.dispose();
        }
        chartInstanceRef.current = echarts.init(chartRef.current);
      }
      // 暂存当前的图表实例
      chartInstance = chartInstanceRef.current;
      // 如果 option 或 onClick 值发生变化，则重新渲染
      try {
        if (!isDeepEqual(prevOption, option, ["formatter"])) {
          chartInstance.setOption(option, { notMerge, lazyUpdate });
        }
        if (onClick && typeof onClick === "function" && onClick !== prevClickEvent) {
          chartInstance.on("click", onClick);
        }
      } catch (error) {
        chartInstance && chartInstance.dispose();
      }
    }
  }, [option, onClick, notMerge, lazyUpdate, prevOption, prevClickEvent]);
  // 监听窗口大小变化，当窗口大小变化时，重新渲染图表
  useWindowResize(() => {
    if (chartInstanceRef.current) {
      chartInstanceRef.current?.resize();
    }
  });
  return <div style={{ ...style }} className={className} ref={chartRef}></div>;
};

export { CommonChart };

3. 使用到的全局hook代码

c 复制代码 
// @/utils/index
// 深度判断两个对象某个属性的值是否相等
export const isDeepEqual = (left: any, right: any, ignoredKeys?: string[]): boolean => {
  const equal = (a: any, b: any): boolean => {
    if (a === b) return true

    if (a && b && typeof a === 'object' && typeof b === 'object') {
      if (a.constructor !== b.constructor) return false

      let length
      let i
      if (Array.isArray(a)) {
        length = a.length
        if (length !== b.length) return false
        for (i = length; i-- !== 0;) {
          if (!equal(a[i], b[i])) return false
        }
        return true
      }

      if (a instanceof Map && b instanceof Map) {
        if (a.size !== b.size) return false
        for (i of a.entries()) {
          if (!b.has(i[0])) return false
        }
        for (i of a.entries()) {
          if (!equal(i[1], b.get(i[0]))) return false
        }
        return true
      }

      if (a instanceof Set && b instanceof Set) {
        if (a.size !== b.size) return false
        for (i of a.entries()) if (!b.has(i[0])) return false
        return true
      }

      if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags
      if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf()
      if (a.toString !== Object.prototype.toString) return a.toString() === b.toString()

      const keys = Object.keys(a)
      length = keys.length
      if (length !== Object.keys(b).length) return false

      for (i = length; i-- !== 0;) {
        if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false
      }

      for (i = length; i-- !== 0;) {
        const key = keys[i]

        if (key === '_owner' && a.$$typeof) {
          // React
          continue
        }

        if (ignoredKeys && ignoredKeys.includes(key)) {
          continue
        }

        if (!equal(a[key], b[key])) return false
      }

      return true
    }
    // eslint-disable-next-line no-self-compare
    return a !== a && b !== b
  }
  return equal(left, right)
}
--------------------------------------------------------------------------
// @/hooks/index.ts
/**
 * Returns the value of the argument from the previous render
 * @param {T} value
 * @returns {T | undefined} previous value
 * @see https://react-hooks-library.vercel.app/core/usePrevious
 */
export function usePrevious<T>(value: T): T | undefined {
  const ref = useRef<T>()

  useEffect(() => {
    ref.current = value
  }, [value])

  return ref.current
}

export function useWindowResize(callback: (event: UIEvent) => void) {
  useEffect(() => {
    window.addEventListener('resize', callback)
    return () => window.removeEventListener('resize', callback)
  }, [callback])
}

4. 使用方式

c 复制代码 
// 引入组件和echarts
import { CommonChart } from "@/components/Echarts/common";
import echarts from "echarts/lib/echarts";
// 使用
const useOption = () => {
  return (data: any): echarts.EChartOption => {
    return {
      color: ["#ffffff"],
      title: {
        text: "图表y轴时间",
        textAlign: "left",
        textStyle: {
          color: "#ffffff",
          fontSize: 12,
          fontWeight: "lighter",
          fontFamily: "Lato",
        },
      },
      grid: {
        left: "2%",
        right: "3%",
        top: "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()),
        },
      ],
    };
  };
};
const echartData = [
  { xTime: "2020-01-01", yValue: "1500" },
  { xTime: "2020-01-02", yValue: "5220" },
  { xTime: "2020-01-03", yValue: "4000" },
  { xTime: "2020-01-04", yValue: "3500" },
  { xTime: "2020-01-05", yValue: "7800" },
];
const parseOption = useOption();
<CommonChart
  option={parseOption(echartData, true)}
  notMerge
  lazyUpdate
  style={{
    height: "180px",
  }}
></ChartBlock>

5. 效果展示

总结

下一篇讲【首页响应式搭建以及真实数据渲染】。关注本栏目，将实时更新。

相关推荐
咖啡の猫33 分钟前
Shell脚本-for循环应用案例
前端·chrome
百万蹄蹄向前冲3 小时前
Trae分析Phaser.js游戏《洋葱头捡星星》
前端·游戏开发·trae
朝阳5813 小时前
在浏览器端使用 xml2js 遇到的报错及解决方法
前端
GIS之路4 小时前
GeoTools 读取影像元数据
前端
ssshooter4 小时前
VSCode 自带的 TS 版本可能跟项目TS 版本不一样
前端·面试·typescript
Jerry5 小时前
Jetpack Compose 中的状态
前端
dae bal6 小时前
关于RSA和AES加密
前端·vue.js
柳杉6 小时前
使用three.js搭建3d隧道监测-2
前端·javascript·数据可视化
lynn8570_blog6 小时前
低端设备加载webp ANR
前端·算法
LKAI.6 小时前
传统方式部署（RuoYi-Cloud）微服务
java·linux·前端·后端·微服务·node.js·ruoyi
热门推荐
01UV安装并设置国内源02蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接03Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code04KGG转MP3工具|非KGM文件|解密音频05【2025.08.06最新版】Android Studio下载、安装及配置记录（自动下载sdk）062025最新国内服务器可用docker源仓库地址大全（2025年8月更新）07TRAE 规则（Rules）配置指南：个人习惯、团队规范与最佳实践08NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南09阿里开源首个图像生成基础模型——Qwen-Image本地部署教程，超强中文渲染能力刷新SOTA！10TRAE Rules 实践：为项目配置 6A 工作流