【vue】pc端自适应方案，echart字体自适应

一、pc端自适应方案

1. 安装postcss-pxtorem和amfe-flexible

• postcss-pxtorem：自动将px转换为rem
• amfe-flexible：设置rem基准值

$ npm install postcss postcss-pxtorem --save-dev
$ npm i -S amfe-flexible

2. 根目录下新建postcss.config.js文件

• 新建postcss.config.js文件，将下边代码复制进去

// postcss.config.js
module.exports = {
  plugins: {
    "postcss-pxtorem": {
      rootValue: 192,
      propList: ["*"],
    },
  },
};

3. main.js中引入amfe-flexible

• 最后在main.js中引入重启项目即可

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

import "amfe-flexible";

4. 如果出现报错PostCSS plugin postcss-pxtorem requires PostCSS 8.

• 这是因为postcss-pxtorem版本过高，降低版本即可

$ npm uninstall postcss-pxtorem
$ npm install postcss-pxtorem@5.1.1

5. 如果卸载postcss-pxtorem的过程中出现报错A complete log of this run can be found in

• 可能是npm版本问题，可以试着更新下npm版本

$ npm install npm -g

建议使用淘宝镜像
$ cnpm install npm -g

二、echart字体自适应

methods: {
    initCharts() {
      const charts = echarts.init(this.$refs["charts"]);

      const option = {
      
      	...
      	
	      xAxis: [
	          {
	            axisLabel: {
	              color: "#fff",
	              
	              // fontSize：12，改为如下所示
	              fontSize: this.fontSize(0.12), 
	            },
	          },
	        ],
	        
	     ...
	     
       }

      charts.setOption(option);
    },

	// 适配echart字体
    fontSize(res) {
      let clientWidth =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;
      if (!clientWidth) return;
      let fontSize = 100 * (clientWidth / 1920);
      return res * fontSize;
    },
  },