vue-PC大屏可视化自适应效果（postcss-pxtorem、lib-flexible、eCharts、dataV）

大屏适配效果预览

1.第三方内容插件

1. 左侧图表效果 — echarts
2. 数字跳动效果 – data-V
3. 中间数字翻滚效果 – 借鉴博客
4. 中间-底部水波纹图表 – echarts-liquidfill

2.第三方适配插件

1.postcss-pxtorem (自动把项目中的px转为rem)

npm install postcss-pxtorem --save-dev

在vue.config.js配置

module.exports = {
    
    
   	...
    css: {
    
    //这个是真正解决大屏适配有关的代码
        sourceMap: false,
        loaderOptions: {
    
    
            css: {
    
    
                // options here will be passed to css-loader
            },
            postcss: {
    
    
                // options here will be passed to postcss-loader
                plugins: [require('postcss-pxtorem')({
    
    
                    "rootValue": 192, // 设计稿宽度的1/10,（JSON文件中不加注释，此行注释及下行注释均删除）
                    "propList": ["*"] // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部, 如果某个样式不需要转换把px改为PX，Px即可
                })]
            }
        }
    },

}

2.lib-flexible

npm install lib-flexible --save-dev

这个插件只能适配移动端，所以需要修改源码，但每次npm install都会被覆盖，所以安装后找到源码 node_modules/lib-flexible/flexible.js 下载到本地放到资源目录。找到 refreshRem 方法

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;
    }

3.项目中图表适配

完成前两步已经可以自动把项目中的px转为rem，但是代码中的图表是使用js创建，所以需要另行适配，把所有涉及到宽高，字体的地方都乘以缩放比例。 例：

mounted() {
    
    
        // this.scale = (document.body.clientWidth<1920?1920:document.body.clientWidth) / 1920;
        this.scale = document.body.clientWidth / 1920;
    },

initServer(sources) {
    
    
            const myChart = echarts.init(document.getElementById('server'));
            myChart.clear();
            var option = {
    
    
                title: {
    
    
                    top: 'center',
                    left: 'center',
                    text: parseInt(sources.applyRate) + "%",
                    textStyle: {
    
    
                        color: '#fff',
                        fontStyle: 'normal',
                        fontWeight: 'bold',
                        fontSize: 22 * this.scale,
                    },
                },
                legend: {
    
    
                    orient: 'vertical',
                    selectedMode: false,
                    // icon: 'circle', //图例形状
                    data: ["参与率"],
                    top: 8,
                    left: 8,
                    itemWidth: 8, // 图例标记的图形宽度。[ default: 25 ]
                    itemHeight: 8, // 图例标记的图形高度。[ default: 14 ]
                    itemGap: 22, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
                    textStyle: {
    
    
                        fontSize: 14 * this.scale,
                        // fontWeight: 'bold',
                        color: '#FFFFFF',
                    },
                },
                series: [{
    
    
                    type: 'liquidFill',
                    color: [new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    
    
                        offset: 0,
                        color: "#148FD9"
                    },
                    {
    
    
                        offset: 1,
                        color: '#195682'
                    }
                    ])],
                    name: "参与率",
                    data: [{
    
    
                        value: parseInt(sources.applyRate) / 100,
                    }],
                    radius: '80%',
                    center: ['50%', '50%'],
                    backgroundStyle: {
    
    
                        color: "rgba(0,0,0,0)",
                    },
                    label: {
    
    
                        normal: {
    
    
                            formatter: '',
                            textStyle: {
    
    
                                fontSize: 12 * this.scale
                            }
                        }
                    },
                    outline: {
    
    
                        itemStyle: {
    
    
                            borderColor: 'rgba(20, 143, 217, 0.6)',
                            borderWidth: 1
                        },
                        borderDistance: 8
                    }
                },

                ]
            }
            myChart.setOption(option, true);
        },