Echarts相关问题处理

Posted 2022-03-17 小叶_Jiang

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"  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