大屏通过vh，vw实现自适应效果

1用到的自适应函数以及使用方法

less文件中使用的工具函数

// 默认设计稿的宽度
@designWidth: 1920;

// 默认设计稿的高度
@designHeight: 1080;

.px2vw(@name, @px) {
  @{name}: (@px / @designWidth) * 100vw;
}

.px2vh(@name, @px) {
  @{name}: (@px / @designHeight) * 100vh;
}

.px2font(@px) {
  font-size: (@px / @designWidth) * 100vw;
}

// padding: 2px 20px 2px 5px;
    .px2vh(padding-top, 2);
    .px2vh(padding-right, 20);
    .px2vh(padding-bottom, 2);
    .px2vh(padding-left, 5);

js文件中使用的工具函数

const designWidth = 1920;
const designHeight = 1080;

// px转vw
export const px2vw = (_px) => {
  return (_px * 100.0) / designWidth + 'vw';
};

export const px2vh = (_px) => {
  return (_px * 100.0) / designHeight + 'vh';
};

export const px2font = (_px) => {
  return (_px * 100.0) / designWidth + 'vw';
};

style={{
              width: "100%",
            minHeight: "230px",
             height: px2vh(h),
             }}

echarts中使用到的工具函数

export const fitChartSize = (size,defalteWidth = 1920) => {
    let clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
    if (!clientWidth) return size;
    let scale = (clientWidth / defalteWidth);
    return Number((size*scale).toFixed(3));
  }
  

通过以上操作可以实现边框，字体大小的自适应 2实现图表自适应----即canvas的自适应

import "./pieChart.less";
import SectionTitle from "../../sectionTtitle";
import * as echarts from "echarts";
import { options } from "./defaultOptions";
// import { px2vw, px2vh, px2font } from "@/pages/bigScreen/helper/styleUtils.js";
import { ScreenQueueSvg } from "@/pages/common/icons.js";
function PieChart() {
  const chartRef = useRef(null);
  const chartContarinerRef = useRef(null);
  const [h, setH] = useState(null);

  useEffect(() => {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(chartRef.current);
    // 指定图表的配置项和数据
    var option = options;
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    setH(chartContarinerRef.current.clientHeight + "px");
    myChart.resize();
    window.onresize = function () {
      setH(chartContarinerRef.current.clientHeight + "px");
      myChart.resize();
    };
    const resizeChart = () => {
      setH(chartContarinerRef.current.clientHeight + "px");
      myChart.resize();
    };
    window.addEventListener("resize", resizeChart);
    return () => {
      // 组件卸载时移除事件监听
      window.removeEventListener("resize", resizeChart);
    };
  }, []);
  return (
    <div className='chart-syncQueue'>
      {/* titile */}
      <SectionTitle
        title={"同步队列"}
        icon={ScreenQueueSvg}
        iconColor={"#A4B424"}
      />
      {/* 内容 */}
      <div ref={chartContarinerRef} className='chart-content' id='chartContent'>
        <div className='pie-panel'>
          <div
            ref={chartRef}
            id='main'
            className='chart-box'
            // style={{
            //   width: "100%",
            //   minHeight: "230px",
            //   height: px2vh(h),
            // }}
          ></div>
        </div>
      </div>
    </div>
  );
}

export default PieChart;

此文章为11月Day023学习笔记，内容来源于极客时间《重学前端》，强烈推荐该课程