echarts超大屏展示

模板github
ps：可根据屏幕宽度自适应

this.$refs.MonthlySales_ref.offsetWidth

完整过程：

1. 挂在$echarts；创建路由（超大屏幕，分割2块）
   
   
   

2.左侧大页面----组件+流式布局（百分比布局）


3.创建组件
创建div
初始化图表init
配置setOption，渲染图表
屏幕改变自适应resize（）
清空图例数据clear()

问题：

一.样式配置

​ title ：标题

​ tooltip ：鼠标悬停气泡

​ xAxis : 配置横轴类别，type类型为category类别

​ series：销量数据，data参数与横轴一一对应，如果想调样式，也可以简单调整，比如每个条形图的颜色可以通过函数进行数组返回渲染

二.切换其他组件统计图时，出现卡顿问题如何解决
原因：每一个图例在没有数据的时候它会创建一个定时器去渲染气泡，页面切换后，echarts图例是销毁了，但是这个echarts的实例还在内存当中，同时它的气泡渲染定时器还在运行。这就导致Echarts占用CPU高，导致浏览器卡顿，当数据量比较大时甚至浏览器崩溃

解决方法：在mounted()方法和destroy()方法之间加一个beforeDestroy()方法释放该页面的chart资源，clear()方法则是清空图例数据，不影响图例的resize，而且能够释放内存，切换的时候就很顺畅了

beforeDestroy () {
	this.chart.clear()
},