vue项目中，点击切换tab栏时echarts图表缩小在一起（宽高只有100px），解决方法？echarts图表缩小在一起，解决方法？echarts 图表大小随窗口变动而自适应（无需刷新）

柔光的暖阳◎ 2023-10-02 22:33 15阅读 0赞

1、在点击tab切换后，我们会发现设置好宽高的echarts图表切换过来之后只剩下100px的大小，原因是：渲染的时机不对

4fc6c21844c1496f82e7e7c03c29ab57.png

解决方法：我们需要在点击tab事件时使用this.$nextTick，页面加载完毕之后执行延迟回调，搭配Echarts 图表自适应使用（2、）

  1. // tab点击事件
  2.     handleClick() {
  3.       this.$nextTick(function () {
  4.         var myEvent = new Event("resize");
  5.         window.dispatchEvent(myEvent);
  6.       });
  7.     },

#

2、Echarts 图表自适应，echarts 图表大小随窗口变动而自适应，直接给echarts图表加监听事件，如下：

  1. option && myChart.setOption(option);
  2.       window.addEventListener("resize", () => {
  3.         myChart.resize();
  4.       });

直接添加在图表数据最后……

发表评论

表情：
评论列表 （有 0 条评论，15人围观）

还没有评论，来说两句吧...

相关阅读