vue 中使用 echarts 自适应问题
Posted 野球拳MAX
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 中使用 echarts 自适应问题相关的知识，希望对你有一定的参考价值。
echarts 自带的自适应方法 resize()
具体用法：
let xxEcharts = this.$echarts.init(document.getElementById(‘xxx‘))
xxEcharts.setOption(xxxx) // 参数是 echarts 的option对象
window.onresize = xxEcharts.resize
但是，问题来了，同一个页面使用多个echarts 的时候，window.onresize = xxEcharts.resize 只对最后一个echarts有效果
这时候换种写法
window.onresize = function(){
xxBarChart.resize()
xxxBarChart.resize()
xxChart.resize()
xxxChart.resize()
}
好了，现在所有的 echarts都可以自适应了，
然而，还没完，还是会出现各种问题，导致自适应出问题，现在我们想想，如何手动触发 resize
首先，肯定要把 echarts变量全局化。
我现在 vue的data中设置 xxEcharts : this.$echarts.init(document.getElementById(‘xxx‘))
然而报错，没办法，
再试试在计算函数中声明
computed:{
xxBarChart(){
return this.$echarts.init(document.getElementById(‘myChart_ln‘))
}
}
再试试，竟然可以了，虽然不知道原理，但是现在我们可以手动调起 this.xxBarChart.resize()了
以上是关于vue 中使用 echarts 自适应问题的主要内容，如果未能解决你的问题，请参考以下文章