Echarts多个图表自适应窗口大小

心已赠人 2022-11-11 05:26 353阅读 0赞

页面中只有一个 echarts 图表时和有多个 echarts图表时，设置自适应的方法是不一样的

一个 echarts 图表自适应

  1. let myChart = this.$echarts.init(ref)
  3. myCharts.setOption(option)
  5. // 监听 window 窗口大小变化的事件
  6. window.onresize = function() { 
  7.   // 调用 echarts 实例对象的 resize 方法
  8.   myCharts.resize()
  9. }
  10. // 或者简写
  11. // window.onresize = myCharts.resize

如果一个页面上需要多个图表自适应，上面方法就只会让一个图表生效

多个图表自适应

多个图表自适应时，为每个图表都添加以下部分的代码即可

  1. let myChart = this.$echarts.init(ref)
  3. myCharts.setOption(option)
  4. window.addEventListener('resize', function () { 
  5.    myChart.resize()
  6.  })

发表评论

表情：
评论列表 （有 0 条评论，353人围观）

还没有评论，来说两句吧...

相关阅读