首页 > 其他好文 > 详细

vue 中使用 echarts 自适应问题

时间：2018-04-19 19:36:24 阅读：351 评论：0 收藏：0 [点我收藏+]

标签：手动 barchart char arc res bar his resize data

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 自适应问题

标签：手动 barchart char arc res bar his resize data

原文地址：https://www.cnblogs.com/tmbm/p/8885509.html

踩

(0)

赞

(0)

举报

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

更多

友情链接

兰亭集智国之画百度统计站长统计阿里云 chrome插件新版天听网

关于我们 - 联系我们 - 留言反馈

© 2014 mamicode.com 版权所有联系我们:gaon5@hotmail.com

迷上了代码！