学无先后,达者为师

网站首页 编程语言 正文

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

作者:前端开心果 更新时间: 2023-07-31 编程语言

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

一个 echarts 图表自适应

let myChart = this.$echarts.init(ref)

myCharts.setOption(option)

// 监听 window 窗口大小变化的事件
window.onresize = function() {
  // 调用 echarts 实例对象的 resize 方法
  myCharts.resize()
}
// 或者简写
// window.onresize = myCharts.resize

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

多个图表自适应

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

let myChart = this.$echarts.init(ref)

myCharts.setOption(option)
window.addEventListener('resize', function () {
   myChart.resize()
 })

原文链接:https://blog.csdn.net/qq_38157825/article/details/115006760

  • 上一篇:没有了
  • 下一篇:没有了
栏目分类
最近更新