Echarts图表变形与自适应解决方案

Posted 仲夏你的梦

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Echarts图表变形与自适应解决方案相关的知识,希望对你有一定的参考价值。


原因:是Echarts在初始化实例的时候,对应dom元素的宽高还没有确定。


1. 监听对应dom元素,如果大小发生变化,调用resize()方法。

let chartDom = document.getElementById('myChart');
let myChart = echarts.init(chartDom);
// 若dom尺寸变化,则resize

const chartObserver = new ResizeObserver(() => 
    myChart.resize();
);
chartObserver.observe(chartDom);

2. 自适应是浏览器窗口变化的时候,echarts图表大小能够相应的变化。可通过监听浏览器窗口实现

// 单个
window.onresize = () => 
    myChart.resize();


// 不在同一个作用域内,如果多次调用window.onresize(),后一个将会覆盖掉前一个
window.onresize = () =>  
    myChart1.resize();
    myChart2.resize();


// 完美解决方案 window.addEventListener('resize', callback)
window.addEventListener('resize', () => 
    myChart1.resize();
, false);// false代表事件句柄在冒泡阶段执行

...

window.addEventListener('resize', () => 
    myChart2.resize();
, false);

以上是关于Echarts图表变形与自适应解决方案的主要内容,如果未能解决你的问题,请参考以下文章

Echarts图表变形与自适应解决方案

echarts自适应

Echarts图表在div尺寸变化时的自适应

echarts图表变形解决方案

Echarts图表自适应布局

vue框架下,echarts图表外部容器宽度设置为百分比时内容超出容器以及echarts图表自适应的实现方案