Vue项目中Echarts自适应整理（图表自适应resize失效等及文字大小适配） |
您所在的位置：网站首页 › echarts赋值没反应 › Vue项目中Echarts自适应整理（图表自适应resize失效等及文字大小适配） |
Vue项目中Echarts自适应整理（图表自适应resize失效等及文字大小适配）
|
目录
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(); }); 实现效果（黑框表示页面大小） 页面缩小时的图表 页面放大时的图表 |
同理，该关系图的节点大小也可以根据页面大小进行自适应。【本文地址】
今日新闻 |
推荐新闻 |