echarts 自适应rem
当使用px2rem插件把px转换成rem单位时 层叠样式表中px可以转换成rem 单位 但是echarts图表中的单位并未发生转换,下面是解决方案,并做一记录 :
- 添加fontSize函数
在图表配置的页面添加下方的转换函数,其中以3840为设计稿的宽度(记得根据实际情况进行修改)。
function fontSize(res) {
// 获取文档宽度
let docEl = document.documentElement,
clientWidth = window.innerWeight ||
document.documentElement.clientWidth ||
document.body.clientWidth;
// 未获取到宽度 返回undefined
if(!clientWidth) return;
//根据文档宽度和设计稿的宽度 获取单位转换比例
let fontSize = clientWidth / 3840
//返回大小
return res * fontSize;
}
2.使用fontSize函数实现图表的数据转换
所有图表配置中涉及尺寸数据的,都要用fontSize进行转换,包括定位、字体大小、宽度、内外边距
此时无需计算,只需要调用fontSize函数即可完成转换
legend: [
{
data: ["人"],
top: fontSize(10),
right: fontSize(320),
itemWidth: fontSize(14),
textStyle: {
color: "#fff",
fontSize: fontSize(20),
}
}
]
- 同时监听屏幕尺寸变化,重绘图表即可
import echarts from "echarts";
let option = {…… 图表配置 ……}
let chart = echarts.init(this.$refs.myChart);
chart.setOption(option);
// 添加窗口大小改变监听事件,当窗口大小改变时,图表会重新绘制,自适应窗口大小
window.addEventListener("resize", function() {
chart.resize();
});