ECharts源码分析优化

最新推荐文章于 2025-07-15 08:48:45 发布

tqtiwvfdn

最新推荐文章于 2025-07-15 08:48:45 发布

阅读量8.4k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： JavaScript 前端图表 Web 插件

本文链接：https://blog.youkuaiyun.com/tqtiwvfdn/article/details/46313547

前端同时被 3 个专栏收录

25 篇文章

订阅专栏

Web

19 篇文章

订阅专栏

JavaScript

13 篇文章

订阅专栏

一、内存优化的原因及解决方案

ECharts在现代浏览器（IE9+、Chrome）下长时间使用，内存的变化并不特别明显。但在IE 8 或以下浏览器长期使用时，则出现内存不断增大的情况。其主要原因是ECharts不同浏览器下实现canvas的代码不一样所指。ECharts在不支持HTML 5的浏览器中，使用Google在06年开发的Explorer Canvas（简称excanvas），模拟canvas功能，而在支持HTML 5的浏览器中，则采用轻量级图表插件Zender插件实现核心功能。由于excanvas是在06年编写的，已经很久没有更新及维护，在JS方面，很多思想已经不符合ECMAScript 5的规定，也没有针对IE的内存回收机制进行优化。
另外由于IE的内存回收机制分为JavaScript变量回收机制和DOM变量计数回收机制，一旦将js变量与DOM变量混合使用，IE则容易无法自动回收，造成内存泄漏，需要手动清理变量。
在ECharts中是有API手动清理变量的，分别是clear和dispose，区别是前者只需插入参数，ECharts就会重绘图表；而后者则是直接将ECharts对象进行清理，需要重新构建ECharts对象。
另外，IE也有自身的回收内存函数CollectGarbage，每次浏览器最小化的时候，浏览器都会调用该函数，清理内存。
下面，将组合调用以上函数，对ECharts进行内存优化。

二、测试

在本次测试中，共有15组测试。其中对照测试组1和10。利用函数clear清理内存的测试组有2、3、4、8、9、11、12、13、14、16；利用dispose的有5、7、15，除1-4组外，均结合IE的CollectGarbage（简称CG）进行测试。见表1或图1。

新增测试组20、21、22，是基于单个图表进行，使用ajax从后台获取随机生产的数据，对照测试组为测试1和11。

表1 测试组及测试内容

测试组	测试内存
1	对照测试组，仅使用setSeries更新数据
2	使用clear后，再setSeries更新数据
3	使用clear后，再setSeries更新数据(10个表单)
4	使用clear后，再setSeries更新数据(10个表单，与测试3对比）
5	使用dispose，每20ms使用CollectGarbage清理内存(10个表单)
重写JavaScript闭包
7	使用dispose，每20ms使用CollectGarbage清理内存(10个表单，与测试5对比）
8	使用clear后，再setOption更新数据，每20ms使用CollectGarbage清理内存（10个表单)
9	继承测试8条件，每1分钟使用CollectGarbage清理内存(10个表单)
10	使用setSeries更新数据，每1分钟使用CollectGarbage清理内存(10个表单)
11	继承测试9条件，每30秒使用CollectGarbage清理内存(10个表单)
12	继承测试9条件，每45秒使用CollectGarbage清理内存(10个表单)
13	继承测试9条件，每15秒使用CollectGarbage清理内存(10个表单)
14	继承测试9条件，每7.5秒使用CollectGarbage清理内存(10个表单)
15	使用dispose，每22.5秒使用CollectGarbage清理内存(10个表单，与测试5对比）
16	继承测试9条件，每22.5秒使用CollectGarbage清理内存(10个表单)
20	基于测试11，将刷新时间改为5秒，并将图表个数改为1
21	基于测试20，将CG功能移到更新数据函数内，CG时间改为5秒
22	基于测试20，将CG的时间改为5秒
将测试时间由时间变化时间改为CPU运行时间，数据可能会变大
25	基于测试20，将CG的时间改为10秒
26	基于测试26，将CG的时间改为15秒
27	基于测试27，将CG的时间改为20秒

图1 测试组及测试内容

测试1

测试内容，每50ms更新一次图表数据。.

动态更新数据关键代码：
            myChart.setSeries([
                {
                    "name": "销量",
                    "type": "bar",
                    "data": dataset  //数据
                }
            ]);

测试结果：

动作	内存（KB）		CPU(%)	刷新次数	对应时间（天）	内存变化（MB）
打开浏览器	线程1	线程2
打开浏览器	18952	15456	100	0
打开网页	49152	16228	100	29.49
1分钟后	58604	3376	100	1200	2.5	38.72
5分钟后	71808	3888	100	6000	12.5	51.62
10分钟后	84480	3900	100	12000	25	63.99
20分钟后	115700	4020	100	24000	50	94.48
30分钟后	136520	4020	100	36000	75	114.81
1小时后	200680	4020	100	72000	150	177.47
2小时后	4020	100	144000	300
IE奔溃	441380	1492	100	242400	505	412.53

测试2

加入每次更新数据前调用clear方法，测试结果：

动作	内存（KB）	CPU(%)	刷新次数	对应时间（天）	内存变化（MB）
打开网页	51476	100	-	-	0
2分钟后	51628	100	2400	5	0.15
5分钟后	52408	100	6000	12.5	0.91
10分钟后	52968	100	12000	25	1.46
20分钟后	53084	68	24000	50	1.57
30分钟后	53544	60	36000	75	2.02
1小时后	54488	78	72000	150	2.94
2小时后	IE奔溃	-	144000	300	-

测试3、4

为了让测试效果更加明显，让页面同时加载10个图表，测试结果：

动作	内存（KB）		CPU(%)	刷新次数	对应时间（天）	内存变化（MB）
打开网页	166404	-	100	-	-	0
2分钟后	171420	4.9	100	2400	5	4.9
6分钟后	173048	6.49	100	7200	15	6.49
10分钟后	174096	7.51	100	12000	25	7.51
20分钟后	177616	10.95	100	24000	50	10.95
30分钟后	180212	13.48	100	36000	75	13.48

动作	内存（KB）	CPU(%)	刷新次数	对应时间（天）	内存变化（MB）
打开网页	145604	100	-	-	0
1分钟后	145208	100	1200	3	-0.39
4分钟后	141896	100	4800	10	-3.62
15分钟后	147248	100	18000	38	1.61
19分钟后	144032	100	22800	48	-1.54
28分钟后	144728	100	33600	70	-0.86
35分钟后	153500	100	42000	88	7.71
39分钟后	143756	100	46800	98	-1.8
43分钟后	144596	100	51600	108	-0.98
57分钟后	144820	100	68400	143	-0.77

测试5、7

使用dispose和IE特有的CollectGarbage函数每50ms清理内存，核心代码：
           myChart.dispose();//销毁对象并设为null
           dataset.splice(0, dataset.length);
           window.CollectGarbage && CollectGarbage();//清理内存
			……
           myChart = echarts.init(document.getElementById(id));
           myChart.setOption(option);

动作	小时	内存（KB）	刷新次数	对应时间（天）	增加内存（MB）
128008	-	-	0
7分钟	0.1小时	134168	8400	17.5	6.02
10分钟	0.2小时	135456	12000	25	7.27
20分钟	0.3小时	135984	24000	50	7.79
33分钟	0.6小时	141484	39600	82.5	13.16
75分钟	1.3小时	177220	90000	187.5	48.06
93分钟	1.6小时	155208	111600	232.5	26.56
104分钟	1.7小时	155392	124800	260	26.74
128分钟	2.1小时	160384	153600	320	31.62
139分钟	2.3小时	160096	166800	347.5	31.34
158分钟	2.6小时	159254	189600	395	30.51
181分钟	3小时	167508	217200	452.5	38.57
202分钟	3.4小时	179708	242400	505	50.49
216分钟	3.6小时	180512	259200	540	51.27
687分钟	11.5小时	363228	824400	1717.5	229.71
694分钟	11.6小时	366960	832800	1735	233.35

动作	小时	内存（KB）	刷新次数	对应时间（天）	增加内存（MB）
打开网页	-	138684	-	-	-
18分钟后	0.3小时	142956	21600	45	4.17
23分钟后	0.4小时	144072	27600	57.5	5.26
45分钟后	0.8小时	144262	54000	112.5	5.45
62分钟后	1小时	149488	74400	155	10.55
67分钟后	1.1小时	153732	80400	167.5	14.7
80分钟后	1.3小时	156844	96000	200	17.73
95分钟后	1.6小时	159116	114000	237.5	19.95
133分钟后	2.2小时	169820	159600	332.5	30.41
239分钟后	4小时	201396	286800	597.5	61.24
268分钟后	4.5小时	222172	321600	670	81.53
340分钟后	5.7小时	242028	408000	850	100.92

测试8

使用clear和CollectGarbage函数每50ms清理内存，核心代码：
           	myChart.clear();
dataset.splice(0, dataset.length);
           	window.CollectGarbage && CollectGarbage();//清理内存
			……
           	myChart.setOption(option);

动作	小时	内存（KB）	刷新次数	对应时间（天）	增加内存（MB）
打开网页	-	140092	-	-	-
4分钟后	0.1小时	142512	4800	10	2.36
13分钟后	0.2小时	142440	15600	32.5	2.29
28分钟后	0.5小时	150832	33600	70	10.49
66分钟后	1.1小时	156800	79200	165	16.32
172分钟后	2.9小时	166964	206400	430	26.24
201分钟后	3.4小时	165852	241200	502.5	25.16
272分钟后	4.5小时	175892	326400	680	34.96
285分钟后	4.8小时	180336	342000	712.5	39.3
296分钟后	4.9小时	185152	355200	740	44

测试9

将CG调到更新数据函数外，改为每1分钟清理一次内存，核心代码：
            if (window.CollectGarbage) {
                setInterval(function () {
                    CollectGarbage();
                }, 60000);
            }

动作	小时	内存（KB）	刷新次数	对应时间（天）	增加内存（MB）
打开网页	-	137864	-	-	-
5分钟后	0.1小时	147512	6000	12.5	9.42
7分钟后	0.1小时	145212	8400	17.5	7.18
20分钟后	0.3小时	158152	24000	50	19.81
39分钟后	0.7小时	164448	46800	97.5	25.96
67分钟后	1.1小时	159164	80400	167.5	20.8
83分钟后	1.4小时	156324	99600	207.5	18.03
99分钟后	1.7小时	156452	118800	247.5	18.15
110分钟后	1.8小时	152448	132000	275	14.24
130分钟后	2.2小时	171844	156000	325	33.18
150分钟后	2.5小时	157180	180000	375	18.86
365分钟后	6.1小时	178444	438000	912.5	39.63
451分钟后	7.5小时	188632	541200	1127.5	49.58
465分钟后	7.8小时	182888	558000	1162.5	43.97
994分钟后	16.6小时	302516	1192800	2485	160.79

测试10

本测试为对照测试组，测试仅使用每50ms清理一次内存的内存变化情况，测试结果：

动作	小时	内存（KB）	刷新次数	对应时间（天）	增加内存（MB）
0分钟后	-	140648	-	-	-
19分钟后	0.3小时	188640	22800	47.5	46.87
32分钟后	0.5小时	202072	38400	80	59.98
43分钟后	0.7小时	216880	51600	107.5	74.45

测试11

与测试9代码一样，将CG的时间改为30秒，测试结果：

动作	小时	内存（KB）	刷新次数	对应时间（天）	增加内存（MB）
打开网页	-	132444	-	-	-
155分钟后	2.6小时	135904	186000	387.5	3.38
166分钟后	2.8小时	137964	199200	415	5.39
187分钟后	3.1小时	140060	224400	467.5	7.44
403分钟后	6.7小时	141304	483600	1007.5	8.65
488分钟后	8.1小时	151900	585600	1220	19
502分钟后	8.4小时	151740	602400	1255	18.84
615分钟后	10.3小时	160150	738000	1537.5	27.06

测试12

与测试9代码一样，将CG的时间改为45秒，测试结果：

动作	小时	内存（KB）	刷新次数	对应时间（天）	增加内存（MB）
打开网页	0小时	137016	0	-	-
4分钟后	0.1小时	139488	4800	10	2.41
9分钟后	0.2小时	141924	10800	22.5	4.79
16分钟后	0.3小时	149020	19200	40	11.72
32分钟后	0.5小时	146200	38400	80	8.97
61分钟后	1小时	156444	73200	152.5	18.97
78分钟后	1.3小时	166616	93600	195	28.91
114分钟后	1.9小时	179388	136800	285	41.38

测试13

与测试9代码一样，将CG的时间改为15秒，测试结果：

动作	小时	内存（KB）	刷新次数	对应时间（天）	增加内存（MB）
打开网页	-	136488	-	-	-
3分钟后	0.1小时	147712	3600	7.5	10.96
10分钟后	0.2小时	145888	12000	25	9.18
27分钟后	0.5小时	145776	32400	67.5	9.07
56分钟后	0.9小时	148502	67200	140	11.73
74分钟后	1.2小时	146772	88800	185	10.04
109分钟后	1.8小时	154544	130800	272.5	17.63
118分钟后	2小时	158112	141600	295	21.12
184分钟后	3.1小时	157120	220800	460	20.15
275分钟后	4.6小时	157044	330000	687.5	20.07
327分钟后	5.5小时	157032	392400	817.5	20.06
364分钟后	6.1小时	160172	436800	910	23.13
416分钟后	6.9小时	164528	499200	1040	27.38
491分钟后	8.2小时	184292	589200	1227.5	46.68
508分钟后	8.5小时	185900	609600	1270	48.25

测试14

与测试9代码一样，将CG的时间改为7.5秒，测试结果：

动作	小时	内存（KB）	刷新次数	对应时间（天）	增加内存（MB）
打开网页	-	131876	-	-	-
66分钟后	1.1小时	134192	79200	165	2.26
75分钟后	1.3小时	134212	90000	187.5	2.28
130分钟后	2.2小时	138208	156000	325	6.18
221分钟后	3.7小时	147304	265200	552.5	15.07
271分钟后	4.5小时	145928	325200	677.5	13.72
310分钟后	5.2小时	147046	372000	775	14.81
370分钟后	6.2小时	165228	444000	925	32.57
376分钟后	6.3小时	172436	451200	940	39.61

测试15

使用dispose并将CG移除到数据更新函数外，将CG的时间设为22.5秒，测试结果：

动作	小时	内存（KB）	刷新次数	对应时间（天）	增加内存（MB）
打开网页	-	131640	-	-	-
16分钟后	0.3小时	148724	19200	40	16.68
45分钟后	0.8小时	158464	54000	112.5	26.2
89分钟后	1.5小时	164880	106800	222.5	32.46
121分钟后	2小时	162964	145200	302.5	30.59
254分钟后	4.2小时	215684	304800	635	82.07
278分钟后	4.6小时	223944	333600	695	90.14

测试16

与测试9代码一样，将CG的时间改为22.5秒，测试结果：

动作	小时	内存（KB）	刷新次数	对应时间（天）	增加内存（MB）
打开网页	-	110804	-	-	-
9分钟后	0.2小时	119116	10800	22.5	8.12
21分钟后	0.4小时	123068	25200	52.5	11.98
53分钟后	0.9小时	135848	63600	132.5	24.46
94分钟后	1.6小时	162104	112800	235	50.1
125分钟后	2.1小时	169964	150000	312.5	57.77
260分钟后	4.3小时	201064	312000	650	88.14
283分钟后	4.7小时	197256	339600	707.5	84.43

测试20

基于测试11，将图表数量改为1，并将刷新时间改为5秒，更改部分如下：

            var i = 2;
            for (; --i;) {
                initCharts('main' + i);
            }
                setInterval(setData, 5000);

测试结果：

时间变化（小时）	刷新次数	总体内存（MB）	消耗内存（KB）	内存变化（KB）
0	0	160	48060	0
0.25	180	153	52352	4292
0.55	396	154	52644	4584
1.1	792	154	53276	5216
2.1	1512	155	52948	4888
4.45	3204	159	56552	8492
5.13	3696	167	56212	8152
6.07	4368	165	57576	9516
8.25	5940	167	56304	8244
8.5	6120	166	56560	8500
12.87	9264	167	56752	8692
24.05	17316	167	56716	8656
28.5	20520	168	56800	8740
29.48	21228	168	57860	9800
30.58	22020	167	57100	9040
32.02	23052	167	57120	9060
46.02	33132	168	57952	9892
49.8	35856	169	57976	9916
52.53	37824	170	58268	10208
53.93	38832	170	58352	10292
54.77	39432	170	58300	10240
55.88	40236	169	58256	10196
108.72	78276	172	59416	11356

由于该组测试与测试13的刷新数据对比相近，进行对比，以供参考。

测试13			测试20
运行时间	刷新次数	消耗内存/KB	运行时间	刷新次数	消耗内存/KB
10分钟	12000	9400.32	24.05小时	17316	8656
32分钟	38400	9185.28	54.77小时	38832	10240
56分钟	67200	12011.52	108.72小时	78276	11356

选取测试20数据稳定后的数据作散点图，如图2所示，预计线性函数为：

y =1609.9x – 7×10⁷

图2 测试20稳定数据的散点图及趋势的线性预测

测试21

基于测试20，将CG时间改为5秒，并将CG移入到数据刷新部分，核心代码：

setData = function () {
    option.series[0].data.splice(0, option.series[0].data.length);
    $.ajax({
        url: 'ajax/data.asp?t='+Math.random(),
        success: function (result) {
            result = $.parseJSON(result);
            option.series[0].data = result.dataset;
            myChart.clear().setOption(option);
            result = null;

            if (window.CollectGarbage) {
                CollectGarbage();
            }
        }
    });
};

测试数据：

时间变化（小时）	刷新次数	总体内存（MB）	消耗内存（KB）	内存变化（KB）
0	0	158	46672	0
0.05	36	148	47816	1144
0.37	264	148	48280	1608
0.92	660	149	48636	1964
1.88	1356	151	48764	2092
4.38	3156	153	51952	5280
4.92	3540	160	51248	4576
5.88	4236	159	50529	3857
8.03	5784	161	51960	5288
8.33	6000	160	50304	3632
12.67	9120	161	51164	4492
23.85	17172	161	51748	5076
28.32	20388	163	53756	7084
29.28	21084	163	54244	7572
30.4	21888	163	54048	7376
31.82	22908	165	55556	8884
45.8	32976	163	53460	6788
49.6	35712	162	52536	5864
52.33	37680	163	53292	6620
53.73	38688	163	53672	7000
54.58	39300	162	52864	6192
55.7	40104	162	52868	6196
108.53	78144	165	53724	7052

与测试13对比：

测试13			测试21
运行时间	刷新次数	消耗内存/KB	运行时间	刷新次数	消耗内存/KB
10分钟	12000	9400.32	23.85小时	17172	5076
32分钟	38400	9185.28	53.73小时	38688	7000
56分钟	67200	12011.52	108.53	78144	7052

测试21数据作散点图，如图3所示，预计线性函数为：

y = 1401.1x– 6×10⁷

图3 测试21数据的散点图及趋势的线性预测

测试22

基于测试20，将CG时间改为5秒，测试结果：

时间变化（小时）	刷新次数	总体内存（MB）	消耗内存（KB）	内存变化（KB）
0	0	158	53180	0
0.05	36	158	53948	768
0.6	432	163	55896	2716
1.53	1104	163	55952	2772
4.07	2928	164	56056	2876
4.57	3288	164	56196	3016
5.57	4008	163	55584	2404
7.72	5556	165	57844	4664
12.37	8904	173	59272	6092
23.53	16944	182	65176	11996
28	20160	183	65800	12620
29	20880	183	65624	12444
30.07	21648	182	65568	12388
31.5	22680	183	65884	12704
45.43	32712	183	66852	13672
49.27	35472	185	68556	15376

与测试13对比：

测试13			测试21
运行时间	刷新次数	消耗内存/KB	运行时间	刷新次数	消耗内存/KB
10分钟	12000	9400.32	23.53小时	16944	11996
32分钟	38400	9185.28	49.27小时	35472	15376

选取测试22中数据作散点图，如图4所示，预计线性函数为：

y =7582.8x – 3×10⁸

图4 测试22数据的散点图及趋势的线性预测

说明：以下测试以CPU的运行时间作为计时的标准，之前的测试标准不一致。

测试25

该组测试将CG时间设为10秒，测试结果如下：

时间变化（小时）	刷新次数	内存消耗（KB）	总内存消耗（MB）	内存变化（KB）
0	0	56800	167	0
40.78	29364	68256	188	11456
43.08	31020	68728	192	11928
44.08	31740	68036	193	11236
45.25	32580	69860	197	13060
47.12	33924	69128	199	12328
55.13	39696	69708	205	12908

选取测试25中数据作散点图，如图5所示，预计线性函数为：

y =3717.8x – 2×10⁸

图5 测试25数据的散点图及趋势的线性预测

测试26

该测试组将CG时间设为15秒，测试结果如下：

时间变化（小时）	刷新次数	内存消耗（KB）	总内存消耗（MB）	内存变化（KB）
0	0	53756	163	0
41.85	30132	74516	222	20760
44.15	31788	74356	224	20600
45.13	32496	75644	226	21888
46.3	33336	74212	227	20456
48.17	34680	74172	231	20416
56.17	40440	74616	236	20860

选取测试26中数据作散点图，如图6所示，预计线性函数为：

y =6206.4x – 3×10⁸

图6 测试26数据的散点图及趋势的线性预测

测试27

该组测试将CG时间设为20秒，测试结果如下：

时间变化（小时）	刷新次数	内存消耗（KB）	总内存消耗（MB）	内存变化（KB）
0	0	65800	183	0
41.78	30084	70340	205	4540
44.08	31740	71120	209	5320
45.08	32460	70132	210	4332
46.22	33276	70112	213	4312
48.12	34644	70652	216	4852
56.12	40404	70636	209	4836

选取测试27中数据作散点图，如图7所示，预计线性函数为：

y = 1371.4x – 6×10⁷

图7 测试27数据的散点图及趋势的线性预测

三、测试结果

1、测试1~5、7~16的测试结果图

图8 Echarts内存测试结果散点图

图9各个测试结果的线性回归函数预测图

图10各个测试结果的线性回归函数预测图（放大400倍后）

根据图9和图10可以看出，各个结果的斜率由小到大，如表2所示：

表2 各个测试结果的预测线性回归函数斜率排序

由此可以得出结论，就是内存优化最好测试组是测试11，最差的测试效果是测试1。

2、测试20~22、25~26的测试结果

根据两组测试的散点图作出的线性函数预测的斜率排序，如表3所示：

表3 测试20~22、25~27组测试结果斜率排名

斜率（越小越好）	测试
1371.46	测试27
1401.1	测试21
1609.9	测试20
3717.8	测试25
6208	测试26
7582.8	测试22

由此可以得到结论，在测试组20~22、25~27中，测试结果最好的，是测试组27，最差效果是22。即每次跟新数据前使用ECharts自带的clear功能并每20秒CG一次。

附录测试代码结构（以测试11为例）

图5 闭包函数执行结构

(function () {
    //
    //ChartsClass       自定义图表类
    //@param id         建立图表的DOM容器id
    //
    function ChartsClass(id) {
            //建立并初始化图表对象
        var myChart = echarts.init(document.getElementById(id)),
            //图表显示的数据
            dataset = [],
            option = {
                series: [
                    {
                        //将数据绑定到参数中
                        "data": dataset
                    }
                ]
                //其他参数
            },
            //
            //setData   设置/更新数据的方法
            //
            setData = function () {
                //手动清理上次的数据
                dataset.splice(0, dataset.length);
                //随机产生新的数据
                for (var i = 16; --i;) {
                    dataset.push(Math.ceil(Math.random() * 200));
                }
                //使用清理内存clear和重新设置参数setOption
                myChart.clear().setOption(option);
            };

        //执行设置数据的方法，并每50ms更新一次
        setData();
        setInterval(setData, 50);
    }

    //建立10个图表
    var i = 11;
    for (; --i;) {
        ChartsClass('main' + i);
    }

    //定时清理内存，仅针对IE
    if (window.CollectGarbage) {
        setInterval(CollectGarbage, 300000);
    }
}());

测试26

        (function () {

            function initCharts(id) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = echarts.init(document.getElementById(id));
                var dataset = [],
                    option = {
                        tooltip: {
                            show: true
                        },
                        legend: {
                            data: ['销量']
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15"]
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                "name": "销量",
                                "type": "bar",
                                "data": dataset
                            }
                        ],
                        animation: false
                    },
                    setData = function () {
                        option.series[0].data.splice(0, option.series[0].data.length);
                        $.ajax({
                            url: 'ajax/data.asp?t=' + Math.random(),
                            success: function (result) {
                                result = $.parseJSON(result);
                                option.series[0].data = [].concat(result.dataset);
                                myChart.clear().setOption(option);
                                result = null;
                            }
                        });
                    };
                setData();
                setInterval(setData, 5000);
            }

            var i = 2;
            for (; --i;) {
                initCharts('main' + i);
            }

            if (window.CollectGarbage) {
                setInterval(CollectGarbage, 15000);
            }
        }());<strong>
</strong>