当前位置: 首页 > Web前端 > vue.js

[vue.js]封装echarts时,图表根据输入值实时改变大小

时间:2023-03-31 18:25:54 vue.js

需要:父组件修改input输入框的值,传递给折线图的子组件,使折线图的宽度或高度成为我们输入的值。父组件:blockitem是我的循环列表A子项,这个子项会包含宽度等信息子组件:

一开始我的想法是这样的:子组件的宽度是100%父组件,那么当父组件的宽度发生变化时,子组件的宽度会适应100%,但是结果不是这样的。经过一番研究,总结出以下几点注意事项:1.:judge-width="true"属性不能少,而且必须为true配置项引入类型默认值judge-width是否处理宽度生成图表时的问题booleanfalse也就是这个属性指定图表的宽高是否可以自适应如果父组件的宽度改变了,图表的宽度保持不变,需要注意这个第一的。(不过根据我的实践,judge-width属性好像拦截了图表的动画效果,不知道大家有没有解决办法)如果设置了judge-width属性,还是没办法达到效果。2.手动传入width参数,watch监听此参数并刷新图表父组件:子组件:
...watch:{changesizewidth(oldvalue,newvalue){this.$refs.mychart.echarts.resize();这样子组件只要监听到父组件的宽度变化,就会通过ref获取dom元素强制刷新,就可以实时跟随父组件的宽度变化。