Echarts:使用技巧记录

本文 专门记录Echarts使用过程常用技巧

(Tips:可能对于我是技巧,记录下,下次可以直接使用)

1.图形随窗口大小自适应

图形自适应可以解决浏览器窗口变换大小或电脑分辨率不高导致的变形遮掩等问题,其实方法也挺简单,就是在setOption后,在加一个方法就行,代码如下:
 

myChartAB.setOption(option);
myChartAB.resize();//resize就是自动调整size的方法

上面的resize方法管用,但是有些时候会实效,其实不是这个方法实效,而是Echarts在resize的时候获取父容器宽度高度有问题,所以发现有些时候不起作用,那这个时候就需要通过window.addEventListener方法监听resize再提前先获取并设置下父容器的宽高,代码如下

myChartAB.setOption(option);
//myChartAB.resize();
window.addEventListener("resize", function () {
       $("#LAY-index-ab>.layui-this").css("width", $("#LAY-index-ab").width());
       $("#LAY-index-ab>.layui-this>canvas").width($("#LAY-index-ab>.layui-this").width());
       myChartAB.resize();
 })

上面的代码基本通用,只需要将对应的父容器id改变下就可以,#LAY-index-ab就是渲染的容器.

2.Echarts X轴文字自适应显示不被遮挡

3.数据频繁渲染,导致setOption should not be called during main process

其实这个就是上次图还没有渲染完,又渲染新的图,导致进程出问题,解决方法就是在setOption之前先做一次清理clear:

myChart1.clear();
myChart1.setOption(option);

ECharts: Uncaught Error: `setOption` should not be called during main process

4.没事可以偶尔看看一些配置介绍

Echarts 各配置项详细说明总结

5.未待完续...