vue2+echarts渲染实时数据图像 通过el-tab切换

前端实习第一周 有在努力学习！（内容有很多是参考了其他博主的解决方案，感谢！）

目录

问题简述

解决思路

问题及解决过程：

---

问题简述

第一个任务就碰到了一些麻烦，需求大概是这样的：原本是页面通过选择产品和账户，直接渲染一条实时动态数据曲线；现在通过选择产品和账户，可以切换两条曲线，之前的实时动态数据曲线和新的收益率曲线。

之前：

需要更改成类似这样：

解决思路

1. 首先实时动态数据曲线和收益率的选择通过el-tab实现，可以自己上一下element-ui

 2.每一条曲线的展示通过一个组件实现，通过query参数传递选择的产品和账户，子组件中通过watch属性，如果产品和账户发生改变，则重新渲染曲线

3.子组件对应页面挂载后就访问一次数据，之后产品和账户发生改变，则重新渲染曲线

  mounted() {
    this.$nextTick(function() {
      this.set_time_area(9, 15)
      setTimeout(() => {
            this.close_socket()
            this.getChartData()
          }, 500)
    })
  },

问题及解决过程：

1.父组件传递给子组件的对象，在父组件中改变，子组件未更新

2.初始的时候并未采用两个图形用两个组件展示，打算两个包裹两个

，每一个

展示一个图形，上来改变账户后触发onAccountChange函数，通过websocket获取数据，渲染好两张图片，再通过进行图片的切换。

（1）问题：

但是！！点击tabs切换之后，切换过来的echarts只剩下100px的宽度。

（2）原因：

本来的页面是通过mounted钩子函数，+this.$nextTick，上来就把echarts图表的横纵坐标渲染好。

mounted() {

this.$nextTick(function() {

this.set_time_area(9, 15)

})

},

渲染的时机不对，我们需要在点击到当前切换的时候在echarts父级加载完毕之后在执行echarts，而不是在页面初始化的时候就把所有tabs里面的echarts都执行。
因为echarts会根据父级给宽度，而在初始化页面的时候其他tabs切换是display：none；没有宽度，所以会发生以上问题。

（3）解决方案：试过v-if 不行；固定宽高就无法自适应了，也不行，采用两个组件方式

3.每一条曲线的展示通过一个组件实现，通过query参数传递选择的产品和账户，子组件中通过watch属性，如果产品和账户发生改变，则重新渲染曲线。

（1）问题：第一次点击权益图，页面先挂载，由于watch没监听到数据的变化，函数不执行，数据不渲染，也不能用watch的immediate，因为watch要比mounted先执行，如果immediate：true,那么会报错，因为此时还没有对应的dom元素

（2）解决方案:子组件对应页面挂载后就访问一次数据，之后产品和账户发生改变，则重新渲染曲线

  mounted() {
    this.$nextTick(function() {
      this.set_time_area(9, 15)
      setTimeout(() => {
            this.close_socket()
            this.getChartData()
          }, 500)
    })
  },

4.只有一个图表自适应，但是多个图表不能采用这个方法

// 监听 window 窗口大小变化的事件
 window.onresize = () => {
              this.myChart.resize()
          }
}

（1）原因：window.onresize()，后一个将会覆盖掉前一个

（2）解决方案：

/图表自适应页面
                window.addEventListener("resize", function () {
                  myChart01.resize();
                  myChart02.resize();
                  myChart03.resize();
                  myChart04.resize();
                  myChart05.resize();
              });