目录
- echarts图表大小resize自适应
- 一个图表
- 多个图表
- 放大有效,但缩小无效
- echarts图表文字自适应
- 封装字体自适应函数
- 图表大小自适应时,option重新赋值
- 实现效果
内容
1. echarts图表大小resize自适应
1.1 一个图表
const chartRef = ref();
const myChart = ref();
myChart.value = markRaw(echarts.init(chartRef.value));
window.onresize = function(){
myChart.value.resize();
}
1.2 多个图表
onresize
不适用,会出现只有最后一个图表实现resize自适应的情况。应使用addEventListener
进行监听。
window.addEventListener("resize", () => {
myChart.value && myChart.value.resize();
initOption();
});
1.3 放大有效,但缩小无效
图表元素本身及父元素(甚至祖先元素)均使用了flex: 1,导致图表自适应大小出现问题,在父元素定义一下min-width
即可。例如,
.chart_zone {
display: flex;
.item {
flex: 1;
min-width: 100px; // 此为解决办法
.chart_desc {
...
}
.chart_content {
flex: 1;
}
}
}
2. echarts图表文字自适应
如果只对图表大小进行自适应,而文字大小不进行自适应,则呈现的样式会不美观。
2.1 封装字体自适应函数
根据屏幕宽度调整字体大小
export function myEchartsFontSize(value, n) {
let screenWidth = document.body.clientWidth;
const result = value * (screenWidth / 1920) * n;
return result;
}
2.2 图表大小自适应时,option重新赋值
const initOption = () => {
let option = {...
fontSize: myEchartsFontSize(22, 1.2);
...};
option && myChart.value.setOption(option);
}
window.addEventListener("resize", () => {
myChart.value && myChart.value.resize();
initOption();
});
实现效果
(黑框表示页面大小)
页面缩小时的图表
页面放大时的图表
同理,该关系图的节点大小也可以根据页面大小进行自适应。