Echarts相关问题处理

1、切换其他组件统计图时，出现卡顿问题如何解决

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

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

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

2、echarts图表自适应div resize问题

echarts官网的实例都具有响应式功能

​ echart图表本身是提供了一个resize的函数的。

​ 用于当div发生resize事件的时候，让其触发echart的resize事件，重绘canvas。

<div class="chart">
    <div class="col-md-3" style="width:73%;height:270px" id="chartx"></div>
</div>
<script src="/static/assets/scripts/jquery.ba-resize.js"></script>
js代码：
var myChartx = echarts.init(document.getElementById('chartx'));
$('.chart').resize(function(){
		myChartx.resize();
})

注：jquery有resize()事件，但直接调用没有起作用，引入jquery.ba-resize.js文件

3、echarts x轴标签文字过多导致显示不全问题解决办法：

https://www.2cto.com/kf/201710/692950.html

4、x轴数据显示不全的问题

axisLabel: {
    interval: 0
}

5、y轴数据显示不全的问题

y2可以控制不显示区域的高度，就能显示全啦
grid: {
    x:40,
    x2:100,
    y2: 200
}

6、x 轴数据倾斜显示

axisLabel的类型是object，主要作用是：左边轴刻度标签的相关设置。（yAxis也是）
axisLabel: {
    interval: 0,
    rotate: 40
}
以上就能解决x轴文字显示不全并将文字倾斜。

7、x轴数据溢出的问题

 

boundaryGap : true