echarts的resize()方法在过度属性下的表现

resize方法是监听包含canvas的div的元素的变化的,根据其变化改变自身大小
如果为该div元素设置了大小变化的过度属性,则canvas图表来不及改变大小到div的大小,canvas改变后的大小与设置的国度事件有关系。

<div id="main" class="main"><canvas></canvas></div>

<style>

       #mian{
            font-size: 4em; 
             text-align: center;border:dotted;box-sizing: border-box;
              transition:.8s;
}

</style>
如果想要保持过度效果,那就让resize方法在过度时间之后执行
setTimeout(function () { myChart.resize();}, 800);

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Vue 中,父组件要调用子组件的方法,需要使用 `ref` 来引用子组件,并通过引用调用子组件的方法。 首先,在父组件中给子组件添加一个 `ref` 属性,例如 `<ChildComponent ref="childComponent"></ChildComponent>`。 然后,在父组件中,你可以通过 `$refs` 来访问子组件的实例,并调用子组件的方法。在这种情况下,你可以调用 ECharts 实例的 `resize` 方法。 下面是一个示例代码: ```vue <template> <div> <ChildComponent ref="childComponent"></ChildComponent> <button @click="resizeEcharts">Resize ECharts</button> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { resizeEcharts() { this.$refs.childComponent.resizeEcharts(); } } } </script> ``` 在上述代码中,当点击 "Resize ECharts" 按钮时,调用了 `resizeEcharts` 方法,该方法通过 `$refs` 引用了子组件实例,并调用了子组件的 `resizeEcharts` 方法。 接下来,在子组件中,你可以在合适的时机调用 ECharts 实例的 `resize` 方法。 ```vue <template> <div ref="echartsContainer"></div> </template> <script> import * as echarts from 'echarts'; export default { mounted() { // 假设这里是初始化 ECharts 的代码 this.echartsInstance = echarts.init(this.$refs.echartsContainer); }, methods: { resizeEcharts() { this.echartsInstance.resize(); } } } </script> ``` 在上述代码中,我们获取了父组件传入的 `div` 的引用,并在 `mounted` 钩子中初始化了 ECharts 实例。然后,在 `resizeEcharts` 方法中,调用了 ECharts 实例的 `resize` 方法。 这样,当父组件调用子组件的 `resizeEcharts` 方法时,就会触发 ECharts 实例的 `resize` 方法,实现了父组件调用子组件的 echarts `resize` 方法
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值