ECharts自适应与重绘

最新推荐文章于 2025-03-13 16:54:22 发布

TSwizzle1327

最新推荐文章于 2025-03-13 16:54:22 发布

阅读量464

点赞数

分类专栏： ECharts

本文链接：https://blog.youkuaiyun.com/jduksa/article/details/119214229

版权

ECharts 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了ECharts图形如何实现窗口大小变化时的自适应调整，包括两种不同的事件监听写法，并展示了在处理多个图表时的注意事项。同时，探讨了ECharts图形数据更新时的重绘方法，包括直接调用`setOption`函数和传入`true`参数的两种方式，确保图表根据新数据正确更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//单个图形自适应
//第一种写法
window.onresize = myChart.resize;
//第二种写法
window.onresize = function() {
  myChart.resize()
}
//多个图形自适应
//第一种写法
window.addEventListener('resize', function () {
        myChartA.resize();
        myChartB.resize();
        myChartC.resize();
})
//第二种写法
 window.onresize = function(){
        myChartA.resize();
        myChartB.resize();
        myChartC.resize();
    }
但是当myChart命名一样时不能用第二种写法
例如：
     function FunChart1(data) 
     {
        var myChart = echarts.init(document.getElementById('myChart1'));
        myChart.setOption({
        ...
        });
        //随屏幕自适应
        window.addEventListener('resize', function () {
            myChart.resize()
        })
     }
     function FunChart2(data) 
     {
        var myChart = echarts.init(document.getElementById('myChart2'));
        myChart.setOption({
        ...
        });
        //都被命名为myChart
        window.addEventListener('resize', function () {
            myChart.resize()
        })
      }

//ECharts图形数据更新图表重新绘制
//第一种写法加上true
myChart.setOption({...},true)
//第二种写法
var option = {...}
myChart.setOption(option, true);