vue 实现自适应屏幕

Posted 2023-03-31 小亓不可爱

1.安装自适应屏幕插件（优先使用vscode安装，需要调整px转化rem比例）

（1）安装插件：

          npm i lib-flexible --save

（2）mian.js引入：

         import 'lib-flexible/flexible.js'

2. 如果出现跑板现象，在node_modules文件夹中找到lib-flexible下面的flexible.js文件。

（1）找到下列代码注释掉：        

function refreshRem()
   var width = docEl.getBoundingClientRect().width;
   if (width / dpr > 540) 
   width = 540 * dpr;
   
   var rem = width / 10;
   docEl.style.fontSize = rem + 'px';
   flexible.rem = win.rem = rem;

（2）添加一句新的代码：

function refreshRem() 
 var rem = docEl.clientWidth / 24;
 docEl.style.fontSize = rem + 'px'

3. 在app.vue中的style中加入。

@media screen and (max-width: 1024px) 
  html 
   font-size: 42.66px!important;
   
  
  @media screen and (min-width: 2560px) 
   font-size: 106.66px!important;
   
 

 4.找到vscode安装插件的位置。

第二步中修改为80即可。

 

这样就实现了项目自适应屏幕的效果。

 

vue-echarts数据可视化实现自适应屏幕进行缩放

使用这个后可以实现屏幕自适应

 

效果如下

 

 

 

 

<template>
  <div style="width:100%;height:20rem" ref="res1">
    <!-- <v-chart :options="polar" style="width: 100%;height:100%;" ref="echarts1" id="chart1"/> -->
    <v-chart
      :options="orgOptions"
      :auto-resize="true"
      style="width: 100%;height:100%;"
      ref="echarts1"
      id="chart1"
    />
  </div>
</template>
 
<style>
.echarts {
  width: 100%;
  height: 100%;
}
</style>
 
<script>
import ECharts from "vue-echarts";
import "echarts/lib/chart/line";
import "echarts/lib/component/polar";

export default {
  components: {
    "v-chart": ECharts
  },
  data() {
    let data = [];

    for (let i = 0; i <= 360; i++) {
      let t = (i / 180) * Math.PI;
      let r = Math.sin(2 * t) * Math.cos(2 * t);
      data.push([r, i]);
    }

    return {
      orgOptions: {},
      polar: {
        title: {
          text: "极坐标双数值轴"
        },
        legend: {
          data: ["line"]
        },
        polar: {
          center: ["50%", "54%"]
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross"
          }
        },
        angleAxis: {
          type: "value",
          startAngle: 0
        },
        radiusAxis: {
          min: 0
        },
        series: [
          {
            coordinateSystem: "polar",
            name: "line",
            type: "line",
            showSymbol: false,
            data: data
          }
        ],
        animationDuration: 2000
      }
    };
  },
  mounted() {
    this.orgOptions = {
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
      },
      yAxis: {
        type: "value"
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: "line",
          smooth: true
        }
      ]
    };
    // 以下两种方案均可
    window.addEventListener("resize", this.resizeTheChart);
    //  setInterval(() => {
    //     window.onresize = function () {
    //      if (this.$refs && this.$refs.echarts1 ) {
    //         this.resizeTheChart()
    //     }
    //     }
    //   }, 100)
  },
  methods: {
    resizeTheChart() {
      if (this.$refs && this.$refs.echarts1) {
        this.$refs.echarts1.resize();
      }
    }
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeTheChart);
  }
};
</script>