tabs标签页中使用Echarts图表常见警告以及处理方式

问题一：There is a chart instance already initialized on the dom.

问题原因：echarts.init()在页面切换时没有及时进行销毁，实例重复创建导致的。
问题分析：这是由于相同的echarts容器id在写逻辑代码过过程中多次echarts.init（）导致的重复创建的问题。
解决思路：
思路一：可以通过echarts.getInstanceByDom(echartDiv)去获取当前容器看是否存在Echarts对象，把图表创建的init方法加逻辑判断，保证它只创建一次，就可以实现一张echarts通过不同点击事件切换图表的功能。
思路二：可以在切换数据时添加echarts.dispose()销毁容器中已经创建的实例对象。
（该方法需要将图表定义成一个全局变量以供销毁调用（不建议），或者通过echarts.getInstanceByDom(echartDiv)获取容器中的实例对象，然后执行echarts.dispose()。）

问题二：Can’t get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be 0.For example, you may need to call this in the callback of window.onload.

问题原因：echarts.init()在页面未渲染时就先页面一步加载了。
问题分析：由于图表在tabs标签页里，因为没有选中的tab是没有内部元素宽高的，但是并不影响echarts的init方法。
（该警告主要存在于以下场景：
1.echarts图表在路由跳转后不能在首屏展示的情况。
2.echats图表需要通过函数调用才能渲染在屏幕上。）
解决思路：在tabs切换的函数中加入一个布尔值的条件判断，每当切换到有图表的标签页时布尔值判true，跳出tab时布尔值判false。
（利用父子组件控制布尔值的改变，局部刷新页面，此种方法也可以解决特定业务逻辑下，页面切换导致echarts的被挤压的问题。）

问题三：页面改变引起的echarts整体被压缩。

问题分析：页面在没有加载或者正在加载的时候，DOM容器是没有或者还未加载完全宽高的，然而Echarts会在获取不到DOM容器宽高的情况下使用默认的大小创建图表。Echarts图表在绘制一次后大小是不会再发生改变的，所以只能通过手动去改变图表大小，或者改变图表创建的时机。
解决思路：
1.延迟echarts的创建。
2.控制echarts的创建时间。
在页面DOM容器改变时手动改变echarts的绘制尺寸。
常规思路：使用Echarts提供的echarts.resize()在页面切换的时候调用该方法，这个具体操作百度就可以了。

硬核无脑思路：利用父子组件传值控制布尔值的改变，强制页面局部刷新，可以在每次跳转该页面的时候改变布尔值（可能会比常规思路多写几行做判断的代码，基本上和常规思路差不多，好处是通过状态改变实现功能，而不用定义全局变量或者获取DOM元素。）。
巧夺天工思路：如果用的是ElementUI组件库的话，这种问题都不叫问题，因为他的Tab组件库里就内置了一个延迟渲染的方法，直接拿过来在你有图表的标签里写上就万事大吉了。

参考文档

ElementUi
Echarts