vue e charts 初始化没有按照最大宽度渲染

如题所述

第1个回答  2021-08-13
this.$refs.chart.resize()这个是官网给的自适应方法,
这里的核心是$nextTick,页面渲染完成后执行这个自适应函数
2)窗口变化时适应

window.addEventListener("resize", this.resizeTheChart);//这句在mounted中
methods中:

resizeTheChart() {
if (this.$refs && this.$refs.echarts1) {
this.$refs.echarts1.resize();
}
这里时给窗口添加自适应函数监听,有了这句改变屏幕大小时,画布也会随着改变。

总结
网上给的自适应解决方案全都是只给出了窗口自适应的问题,事实上也能解决窗口自适应,但是第一次渲染的时候会出现不适应的问题,这就要用nextTick去解决。
查了一下,这个下载的vue-echarts他给的默认长宽是600px*400px,如果外等盒子的长宽比这个小的话那么就会超出,而这个自适应函数本身是解决这个问题的,但是它貌似是异步的,如果只单单在mounted中写一次,那它会在画布生成前执行一次,就不能达到想要的效果。
第2个回答  2021-08-10
初始化按照最大的宽度来渲染,那么可能是最好的,如果超过这个不行的话,那么也没办法了,因为他已经达到了一个最大的标准了
第3个回答  2021-08-10
建议你最好不要按照一个最大的比例去渲染,因为如果这个比例太大,对你来说是有一定的影响的,是不好的,所以不要把这个比例调得太大,知道吗?
第4个回答  2021-08-13
讲程序改一下,其中的window.innerWidth / 2 - 20 + 'px'并不是固定的,完全根据自己实际页面排版进行调整即可。
第5个回答  2021-08-17
了一下,这个下载的vue-echarts他给的默认长宽是600px*400px,如果外等盒子的长宽比这个小的话那么就会超出,而这个自适应函数本身是解决这...本回答被网友采纳