大屏适配效果预览
1.第三方内容插件
- 左侧图表效果 — echarts
- 数字跳动效果 – data-V
- 中间数字翻滚效果 – 借鉴博客
- 中间-底部水波纹图表 – 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);
},