大屏

1.采用react+vite+echarths+svg开发

安装指令

npm create vite@latest

2.安装DataV-React使用全屏容器(兼容配置)

2.1安装DataV-React

npm install @jiaminghi/data-view-react

2.2使用全屏容器

作用:数据可视化页面一般在浏览器中进行全屏展示，全屏容器将根据屏幕比例及当前浏览器窗口大小，自动进行缩放处理。浏览器全屏后，全屏容器将充满屏幕.

建议在全屏容器内使用百分比搭配flex进行布局，以便于在不同的分辨率下得到较为一致的展示效果。

使用前请注意将body的margin设为 0，否则会引起计算误差，全屏后不能完全充满屏幕。

import React from 'react'
import { FullScreenContainer } from '@jiaminghi/data-view-react'

export default function BidScreen() {
  return (
    <div className='bid'>
            <FullScreenContainer>

            </FullScreenContainer>
    </div>
  )
}

3.使用rem代替px(兼容配置)

根据屏幕大小的变化来自动调节字体大小

3.1.安装防抖插件lodash

npm install lodash

3.2.封装计算rem变化的函数,管理字体大小

import { useEffect, useCallback } from 'react';
import debounce from 'lodash/debounce';
// 设计稿的基准宽度
const BASE_WIDTH = 1920;
// 基准宽度下 HTML 的 font-size (方便计算，例如 1rem = 100px)
const BASE_FONT_SIZE = 100;

function setRemFontSize() {
  const screenWidth = window.innerWidth;
  // 计算新的 HTML font-size
  // 为了避免字体过小或过大，可以设置一个最小和最大限制
  const minFontSize = 95; // 最小字体大小限制
  const maxFontSize = 105; // 最大字体大小限制

  let newFontSize = (screenWidth / BASE_WIDTH) * BASE_FONT_SIZE;

  // 应用限制
  newFontSize = Math.max(minFontSize, Math.min(maxFontSize, newFontSize));

  document.documentElement.style.fontSize = newFontSize + 'px';
}

const debouncedSetRemFontSize = debounce(setRemFontSize, 100); // 100ms 的防抖

function useRemFontSize() {
  useEffect(() => {
    // 组件挂载时设置一次字体大小
    setRemFontSize();

    // 监听窗口尺寸变化，并使用防抖函数
    window.addEventListener('resize', debouncedSetRemFontSize);

    // 组件卸载时移除监听器和取消防抖
    return () => {
      window.removeEventListener('resize', debouncedSetRemFontSize);
      debouncedSetRemFontSize.cancel();
    };
  }, []); // 空依赖数组表示只在组件挂载和卸载时运行
}

export default useRemFontSize;

3.3.在项目的根文件下使用封装函数

import React from 'react';
import useRemFontSize from './hooks/useRemFontSize'; // 调整路径
import './App.less'; // 你的全局样式或 App 样式
import BidScreen from './View/BidScreen';
function App() {
  useRemFontSize(); // 调用自定义 Hook 来管理字体大小

  return (
    <div className="App">
      <BidScreen />
    </div>
  );
}

export default App;

4.使用svg进行矢量图的制作

svg使用方法

5.使用echarts设计图表

echarths使用方法