diff --git a/test/backwardCompat.html b/test/backwardCompat.html
index 2e897fed..d0ae8442 100644
--- a/test/backwardCompat.html
+++ b/test/backwardCompat.html
@@ -12,6 +12,7 @@
         <script src="../node_modules/echarts/dist/echarts.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/bar3D-axisPointer.html b/test/bar3D-axisPointer.html
index 4d4801ae..b8600082 100644
--- a/test/bar3D-axisPointer.html
+++ b/test/bar3D-axisPointer.html
@@ -12,6 +12,7 @@
         <script src="../node_modules/echarts/dist/echarts.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/bar3D-edge.html b/test/bar3D-edge.html
index 45604ba8..8538f15a 100644
--- a/test/bar3D-edge.html
+++ b/test/bar3D-edge.html
@@ -13,6 +13,7 @@
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
         <script src="lib/simplex.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/bar3D-event.html b/test/bar3D-event.html
index ed10f25d..958b63d6 100644
--- a/test/bar3D-event.html
+++ b/test/bar3D-event.html
@@ -13,6 +13,7 @@
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
         <script src="lib/facePrint.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/bar3D-image-pixels.html b/test/bar3D-image-pixels.html
index 848311b1..5ccd0e42 100644
--- a/test/bar3D-image-pixels.html
+++ b/test/bar3D-image-pixels.html
@@ -13,6 +13,7 @@
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
         <script src="lib/dat.gui.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'), null, {
                 devicePixelRatio: 1
diff --git a/test/bar3D-isometric.html b/test/bar3D-isometric.html
index f35ab9a8..8eb5b674 100644
--- a/test/bar3D-isometric.html
+++ b/test/bar3D-isometric.html
@@ -34,6 +34,7 @@
 
         <script src="js/exportGL2PLY.js"></script>
         <script src="lib/download.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'), null, {
                 devicePixelRatio: 1
diff --git a/test/bar3D-music.html b/test/bar3D-music.html
index bb9723a6..7f5bfbb4 100644
--- a/test/bar3D-music.html
+++ b/test/bar3D-music.html
@@ -12,6 +12,7 @@
         <script src="../node_modules/echarts/dist/echarts.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var UPDATE_DURATION = 100;
 
diff --git a/test/bar3D-non-zero.html b/test/bar3D-non-zero.html
index e700aec6..b003f470 100644
--- a/test/bar3D-non-zero.html
+++ b/test/bar3D-non-zero.html
@@ -12,6 +12,7 @@
         <script src="../node_modules/echarts/dist/echarts.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/bar3D-orthographic.html b/test/bar3D-orthographic.html
index 4795773a..3feb14a9 100644
--- a/test/bar3D-orthographic.html
+++ b/test/bar3D-orthographic.html
@@ -13,6 +13,7 @@
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
         <script src="lib/simplex.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'), null, {
                 devicePixelRatio: 1
diff --git a/test/bar3D-posteffect.html b/test/bar3D-posteffect.html
index 61df5fbf..1333d7b5 100644
--- a/test/bar3D-posteffect.html
+++ b/test/bar3D-posteffect.html
@@ -12,6 +12,7 @@
         <script src="../node_modules/echarts/dist/echarts.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/bar3D-punchcard.html b/test/bar3D-punchcard.html
index 7c516734..b0370add 100644
--- a/test/bar3D-punchcard.html
+++ b/test/bar3D-punchcard.html
@@ -12,6 +12,7 @@
         <script src="../node_modules/echarts/dist/echarts.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/bar3D-reflection.html b/test/bar3D-reflection.html
index f86141f3..5a320607 100644
--- a/test/bar3D-reflection.html
+++ b/test/bar3D-reflection.html
@@ -14,6 +14,7 @@
         <script src="lib/jquery.min.js"></script>
         <script src="lib/simplex.js"></script>
         <script src="lib/dat.gui.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'), null, {
                 devicePixelRatio: 1
diff --git a/test/bar3D-simplex.html b/test/bar3D-simplex.html
index 4246bb84..4c5b3b8f 100644
--- a/test/bar3D-simplex.html
+++ b/test/bar3D-simplex.html
@@ -13,6 +13,7 @@
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
         <script src="lib/simplex.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/bar3D-simplex2.html b/test/bar3D-simplex2.html
index 6154a097..f77aac8b 100644
--- a/test/bar3D-simplex2.html
+++ b/test/bar3D-simplex2.html
@@ -13,6 +13,7 @@
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
         <script src="lib/simplex.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'), null, {
                 devicePixelRatio: 1
diff --git a/test/bar3D-stack.html b/test/bar3D-stack.html
index 708d6a87..d7d6fd24 100644
--- a/test/bar3D-stack.html
+++ b/test/bar3D-stack.html
@@ -13,6 +13,7 @@
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
         <script src="lib/simplex.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/bar3D-transparent.html b/test/bar3D-transparent.html
index 58699d92..e0c19566 100644
--- a/test/bar3D-transparent.html
+++ b/test/bar3D-transparent.html
@@ -13,6 +13,7 @@
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
         <script src="lib/dat.gui.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/bar3d-negative.html b/test/bar3d-negative.html
index 8d53fb2c..284b1539 100644
--- a/test/bar3d-negative.html
+++ b/test/bar3d-negative.html
@@ -12,6 +12,7 @@
         <script src="../node_modules/echarts/dist/echarts.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/buildings-cold.html b/test/buildings-cold.html
index 5c030439..6d0f57ab 100644
--- a/test/buildings-cold.html
+++ b/test/buildings-cold.html
@@ -13,6 +13,7 @@
         <script src="../node_modules/echarts/map/js/world.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/buildings-hatching.html b/test/buildings-hatching.html
index 93c8fb7e..3761c2ca 100644
--- a/test/buildings-hatching.html
+++ b/test/buildings-hatching.html
@@ -13,6 +13,7 @@
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
         <script src="lib/dat.gui.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
             chart.showLoading();
diff --git a/test/buildings.html b/test/buildings.html
index c4fe05ef..920fcf23 100644
--- a/test/buildings.html
+++ b/test/buildings.html
@@ -12,6 +12,7 @@
         <script src="../node_modules/echarts/dist/echarts.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/flowGL-random.html b/test/flowGL-random.html
index f0423a59..efeeed76 100644
--- a/test/flowGL-random.html
+++ b/test/flowGL-random.html
@@ -13,6 +13,7 @@
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
         <script src="lib/simplex.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/flowGL-simple.html b/test/flowGL-simple.html
index be76ee71..387a680d 100644
--- a/test/flowGL-simple.html
+++ b/test/flowGL-simple.html
@@ -14,6 +14,7 @@
         <script src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
             chart.setOption({
diff --git a/test/flowGL-wind.html b/test/flowGL-wind.html
index 3c23c73a..b402376a 100644
--- a/test/flowGL-wind.html
+++ b/test/flowGL-wind.html
@@ -14,6 +14,7 @@
         <script src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/forceAtlas2.html b/test/forceAtlas2.html
index c7aeb55a..0060114c 100644
--- a/test/forceAtlas2.html
+++ b/test/forceAtlas2.html
@@ -12,6 +12,7 @@
         <script src="../node_modules/echarts/dist/extension/dataTool.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var forceAtlas = new echarts.ForceAtlas2GPU();
 
diff --git a/test/geo3D-airline.html b/test/geo3D-airline.html
index 8768aa8a..5201b8ea 100644
--- a/test/geo3D-airline.html
+++ b/test/geo3D-airline.html
@@ -14,6 +14,7 @@
         <script src="../node_modules/echarts/theme/dark.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/geo3D-bar3D-bug.html b/test/geo3D-bar3D-bug.html
index d0efd1ef..ffa74da0 100644
--- a/test/geo3D-bar3D-bug.html
+++ b/test/geo3D-bar3D-bug.html
@@ -13,17 +13,18 @@
         <script src="../node_modules/echarts/map/js/world.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
-    
+
             data =  [[116, 36, 0],[114, 27, 0],[113,34,2],[112,43,0]];
-            
+
             function setData(){
                 for(var k in data){
                     data[k][2] = Math.random()*40;
                 }
-                
+
                 chart.setOption({
                     backgroundColor: '#cdcfd5',
                     geo3D: {
@@ -96,7 +97,7 @@
             setInterval(function(){
                 setData(data)
             },5000)
-            
+
             window.addEventListener('resize', function () {
                 chart.resize();
             });
diff --git a/test/geo3D-bar3D.html b/test/geo3D-bar3D.html
index e42d7cb7..1ca55c71 100644
--- a/test/geo3D-bar3D.html
+++ b/test/geo3D-bar3D.html
@@ -13,6 +13,7 @@
         <script src="../node_modules/echarts/map/js/world.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/geo3D-border.html b/test/geo3D-border.html
index 1484576d..3c4b5bdf 100644
--- a/test/geo3D-border.html
+++ b/test/geo3D-border.html
@@ -13,6 +13,7 @@
         <script src="../node_modules/echarts/map/js/china.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
             chart.setOption({
diff --git a/test/geo3D-border2.html b/test/geo3D-border2.html
index b44922ae..10dd1680 100644
--- a/test/geo3D-border2.html
+++ b/test/geo3D-border2.html
@@ -13,6 +13,7 @@
         <script src="data/liaoning.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
             chart.setOption({
diff --git a/test/geo3D-complex.html b/test/geo3D-complex.html
index 834b0785..023a11c5 100644
--- a/test/geo3D-complex.html
+++ b/test/geo3D-complex.html
@@ -12,6 +12,7 @@
         <script src="../node_modules/echarts/dist/echarts.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var points = [123.046875, 39.5302734375, 123.0458984375, 39.5302734375, 123.0458984375, 39.53125, 123.0458984375, 39.53125, 123.0458984375, 39.53125, 123.046875, 39.53125, 123.046875, 39.53125, 123.0478515625, 39.53125, 123.0478515625, 39.53125, 123.0478515625, 39.5302734375, 123.048828125, 39.5302734375, 123.048828125, 39.5302734375, 123.048828125, 39.5302734375, 123.0498046875, 39.5302734375, 123.0498046875, 39.5302734375, 123.0498046875, 39.5302734375, 123.0498046875, 39.5302734375, 123.0498046875, 39.5302734375, 123.0498046875, 39.5302734375, 123.0498046875, 39.5302734375, 123.0498046875, 39.529296875, 123.0498046875, 39.529296875, 123.0498046875, 39.529296875, 123.0498046875, 39.529296875, 123.0498046875, 39.529296875, 123.048828125, 39.529296875, 123.048828125, 39.529296875, 123.048828125, 39.529296875, 123.0478515625, 39.5302734375, 123.046875, 39.53125, 123.046875, 39.53125, 123.046875, 39.5302734375];
 
diff --git a/test/geo3D-dude.html b/test/geo3D-dude.html
index af78db7d..fcb80a46 100644
--- a/test/geo3D-dude.html
+++ b/test/geo3D-dude.html
@@ -12,6 +12,7 @@
         <script src="../node_modules/echarts/dist/echarts.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var points = [[280.35714,648.79075,286.78571,662.8979,263.28607,661.17871,262.31092,671.41548,250.53571,677.00504,250.53571,683.43361,256.42857,685.21933,297.14286,669.50504,289.28571,649.50504,285,631.6479,285,608.79075,292.85714,585.21932,306.42857,563.79075,323.57143,548.79075,339.28571,545.21932,357.85714,547.36218,375,550.21932,391.42857,568.07647,404.28571,588.79075,413.57143,612.36218,417.14286,628.07647,438.57143,619.1479,438.03572,618.96932,437.5,609.50504,426.96429,609.86218,424.64286,615.57647,419.82143,615.04075,420.35714,605.04075,428.39286,598.43361,437.85714,599.68361,443.57143,613.79075,450.71429,610.21933,431.42857,575.21932,405.71429,550.21932,372.85714,534.50504,349.28571,531.6479,346.42857,521.6479,346.42857,511.6479,350.71429,496.6479,367.85714,476.6479,377.14286,460.93361,385.71429,445.21932,388.57143,404.50504,360,352.36218,337.14286,325.93361,330.71429,334.50504,347.14286,354.50504,337.85714,370.21932,333.57143,359.50504,319.28571,353.07647,312.85714,366.6479,350.71429,387.36218,368.57143,408.07647,375.71429,431.6479,372.14286,454.50504,366.42857,462.36218,352.85714,462.36218,336.42857,456.6479,332.85714,438.79075,338.57143,423.79075,338.57143,411.6479,327.85714,405.93361,320.71429,407.36218,315.71429,423.07647,314.28571,440.21932,325,447.71932,324.82143,460.93361,317.85714,470.57647,304.28571,483.79075,287.14286,491.29075,263.03571,498.61218,251.60714,503.07647,251.25,533.61218,260.71429,533.61218,272.85714,528.43361,286.07143,518.61218,297.32143,508.25504,297.85714,507.36218,298.39286,506.46932,307.14286,496.6479,312.67857,491.6479,317.32143,503.07647,322.5,514.1479,325.53571,521.11218,327.14286,525.75504,326.96429,535.04075,311.78571,540.04075,291.07143,552.71932,274.82143,568.43361,259.10714,592.8979,254.28571,604.50504,251.07143,621.11218,250.53571,649.1479,268.1955,654.36208,325,437,320,423,329,413,332,423,320.72342,480,338.90617,465.96863,347.99754,480.61584,329.8148,510.41534,339.91632,480.11077,334.86556,478.09046], [94,98]];
 
diff --git a/test/geo3D-export.html b/test/geo3D-export.html
index 6bfd7080..915a7331 100644
--- a/test/geo3D-export.html
+++ b/test/geo3D-export.html
@@ -13,6 +13,7 @@
         <script src="../node_modules/echarts/map/js/world.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
 
         <script src="js/exportGL2OBJ.js"></script>
         <script src="lib/download.js"></script>
diff --git a/test/geo3D-hatching.html b/test/geo3D-hatching.html
index 2e92a1ab..8a3f1eb8 100644
--- a/test/geo3D-hatching.html
+++ b/test/geo3D-hatching.html
@@ -13,6 +13,7 @@
         <script src="../node_modules/echarts/map/js/world.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'), null, {
                 devicePixelRatio: 1
diff --git a/test/geo3D-reflection.html b/test/geo3D-reflection.html
index 9853cd25..ad3c23dc 100644
--- a/test/geo3D-reflection.html
+++ b/test/geo3D-reflection.html
@@ -13,6 +13,7 @@
         <script src="../node_modules/echarts/map/js/world.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/geo3D-scatter3D.html b/test/geo3D-scatter3D.html
index 1ea38596..7677b617 100644
--- a/test/geo3D-scatter3D.html
+++ b/test/geo3D-scatter3D.html
@@ -14,6 +14,7 @@
         <script src="../node_modules/echarts/theme/dark.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'), 'dark');
 
diff --git a/test/geo3D-simple.html b/test/geo3D-simple.html
index 609599c0..b1227453 100644
--- a/test/geo3D-simple.html
+++ b/test/geo3D-simple.html
@@ -12,6 +12,7 @@
         <script src="../node_modules/echarts/dist/echarts.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             echarts.registerMap('sample', {
                 type: 'FeatureCollection',
diff --git a/test/geo3D-track.html b/test/geo3D-track.html
index 5ffaea4f..799a087d 100644
--- a/test/geo3D-track.html
+++ b/test/geo3D-track.html
@@ -14,6 +14,7 @@
         <script src="../node_modules/echarts/theme/dark.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/geo3D-track2.html b/test/geo3D-track2.html
index 2bb406eb..7bdf2593 100644
--- a/test/geo3D-track2.html
+++ b/test/geo3D-track2.html
@@ -14,6 +14,7 @@
         <script src="../node_modules/echarts/theme/dark.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/geo3D-transparent.html b/test/geo3D-transparent.html
index a96f6c9f..c2ef3984 100644
--- a/test/geo3D-transparent.html
+++ b/test/geo3D-transparent.html
@@ -13,6 +13,7 @@
         <script src="../node_modules/echarts/map/js/world.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/geo3D.html b/test/geo3D.html
index 48256bbc..174f629e 100644
--- a/test/geo3D.html
+++ b/test/geo3D.html
@@ -13,6 +13,7 @@
         <script src="../node_modules/echarts/map/js/world.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/globe-bar3D.html b/test/globe-bar3D.html
index a9b797f2..9ed42d6e 100644
--- a/test/globe-bar3D.html
+++ b/test/globe-bar3D.html
@@ -12,6 +12,7 @@
         <script src="../node_modules/echarts/dist/echarts.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/globe-color-correction.html b/test/globe-color-correction.html
index bcf55dbd..82112505 100644
--- a/test/globe-color-correction.html
+++ b/test/globe-color-correction.html
@@ -13,6 +13,7 @@
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
         <script src="lib/dat.gui.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/globe-complex-material.html b/test/globe-complex-material.html
index 0f39fc0d..317fc1d3 100644
--- a/test/globe-complex-material.html
+++ b/test/globe-complex-material.html
@@ -12,6 +12,7 @@
         <script src="../node_modules/echarts/dist/echarts.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/globe-complex-material2.html b/test/globe-complex-material2.html
index f94cd30b..d3ec31c5 100644
--- a/test/globe-complex-material2.html
+++ b/test/globe-complex-material2.html
@@ -12,6 +12,7 @@
         <script src="../node_modules/echarts/dist/echarts.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/globe-contour.html b/test/globe-contour.html
index 5107f136..d99ae6b2 100644
--- a/test/globe-contour.html
+++ b/test/globe-contour.html
@@ -18,6 +18,7 @@
         <script src="lib/jquery.min.js"></script>
         <script src="lib/stackBlur.js"></script>
         <script src="lib/dat.gui.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
 
 var config = {
@@ -121,9 +122,9 @@
   });
 }
 
-
+var chart;
 function initCharts(option) {
-    var chart = echarts.init(document.getElementById('main'));
+    chart = echarts.init(document.getElementById('main'));
 
     var contourChart = echarts.init(document.createElement('canvas'), null, {
         width: 4096,
diff --git a/test/globe-displacement.html b/test/globe-displacement.html
index 4c9408ba..f327b66a 100644
--- a/test/globe-displacement.html
+++ b/test/globe-displacement.html
@@ -13,6 +13,7 @@
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
         <script src="lib/dat.gui.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/globe-echarts-surface.html b/test/globe-echarts-surface.html
index 2564f228..5738b237 100644
--- a/test/globe-echarts-surface.html
+++ b/test/globe-echarts-surface.html
@@ -14,6 +14,7 @@
         <script src="../node_modules/echarts/map/js/china.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/globe-environment.html b/test/globe-environment.html
index 22bd96d0..50ebee3d 100644
--- a/test/globe-environment.html
+++ b/test/globe-environment.html
@@ -12,6 +12,7 @@
         <script src="../node_modules/echarts/dist/echarts.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/globe-flights.html b/test/globe-flights.html
index 9105640b..53f61c54 100644
--- a/test/globe-flights.html
+++ b/test/globe-flights.html
@@ -13,6 +13,7 @@
         <script src="../node_modules/echarts/map/js/world.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/globe-hatching.html b/test/globe-hatching.html
index 876173b5..92d1026a 100644
--- a/test/globe-hatching.html
+++ b/test/globe-hatching.html
@@ -12,6 +12,7 @@
         <script src="../node_modules/echarts/dist/echarts.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/globe-layer.html b/test/globe-layer.html
index 7528bce0..da66837c 100644
--- a/test/globe-layer.html
+++ b/test/globe-layer.html
@@ -17,6 +17,7 @@
         <script src="../node_modules/echarts/dist/echarts.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/globe-layer2.html b/test/globe-layer2.html
index 82696fd8..5eda46e7 100644
--- a/test/globe-layer2.html
+++ b/test/globe-layer2.html
@@ -14,6 +14,7 @@
         <script src="../node_modules/echarts/map/js/china.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/globe-light.html b/test/globe-light.html
index 570d282e..83b83cc2 100644
--- a/test/globe-light.html
+++ b/test/globe-light.html
@@ -14,6 +14,7 @@
         <script src="lib/jquery.min.js"></script>
         <script src="js/exportGL2OBJ.js"></script>
         <script src="lib/download.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/globe-posteffect-bloom.html b/test/globe-posteffect-bloom.html
index bea886c2..3bae9117 100644
--- a/test/globe-posteffect-bloom.html
+++ b/test/globe-posteffect-bloom.html
@@ -14,6 +14,7 @@
         <script src="../node_modules/echarts/map/js/china.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/globe-scatter3D.html b/test/globe-scatter3D.html
index 2d7d448b..24d01792 100644
--- a/test/globe-scatter3D.html
+++ b/test/globe-scatter3D.html
@@ -12,6 +12,7 @@
         <script src="../node_modules/echarts/dist/echarts.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/globe-view-animation.html b/test/globe-view-animation.html
index f380d013..ec9e9d70 100644
--- a/test/globe-view-animation.html
+++ b/test/globe-view-animation.html
@@ -12,6 +12,7 @@
         <script src="../node_modules/echarts/dist/echarts.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/globe-view-coord.html b/test/globe-view-coord.html
index 2cfbbb81..b39ff3f4 100644
--- a/test/globe-view-coord.html
+++ b/test/globe-view-coord.html
@@ -14,6 +14,7 @@
         <script src="../node_modules/echarts/map/js/china.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/graphGL-large.html b/test/graphGL-large.html
index a5851790..28f505c6 100644
--- a/test/graphGL-large.html
+++ b/test/graphGL-large.html
@@ -12,6 +12,7 @@
         <script src="../node_modules/echarts/dist/echarts.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'), null, {
                 devicePixelRatio: 1
diff --git a/test/graphGL-layout.html b/test/graphGL-layout.html
index 933779cc..036386d2 100644
--- a/test/graphGL-layout.html
+++ b/test/graphGL-layout.html
@@ -17,6 +17,7 @@
         <script src="../node_modules/echarts/dist/extension/dataTool.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/graphGL-layoutCPU.html b/test/graphGL-layoutCPU.html
index a43c3e35..7e571f13 100644
--- a/test/graphGL-layoutCPU.html
+++ b/test/graphGL-layoutCPU.html
@@ -17,6 +17,7 @@
         <script src="../node_modules/echarts/dist/extension/dataTool.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/graphGL-npm.html b/test/graphGL-npm.html
index 95782584..217b503e 100644
--- a/test/graphGL-npm.html
+++ b/test/graphGL-npm.html
@@ -17,6 +17,7 @@
         <script src="lib/echarts-graph-modularity.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'), null, {
                 devicePixelRatio: 1
diff --git a/test/graphGL.html b/test/graphGL.html
index 10d7bebc..fd4bb84a 100644
--- a/test/graphGL.html
+++ b/test/graphGL.html
@@ -13,6 +13,7 @@
         <script src="lib/echarts-graph-modularity.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/grid3D-viewport.html b/test/grid3D-viewport.html
index 840f5247..7d4884be 100644
--- a/test/grid3D-viewport.html
+++ b/test/grid3D-viewport.html
@@ -12,6 +12,7 @@
         <script src="../node_modules/echarts/dist/echarts.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/grid3D.html b/test/grid3D.html
index 212590ac..38c30e49 100644
--- a/test/grid3D.html
+++ b/test/grid3D.html
@@ -12,6 +12,7 @@
         <script src="../node_modules/echarts/dist/echarts.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/init-canvas.html b/test/init-canvas.html
index cb1d463f..a086c9d5 100644
--- a/test/init-canvas.html
+++ b/test/init-canvas.html
@@ -19,6 +19,7 @@
         <script src="../node_modules/echarts/dist/echarts.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('viewport'), null, {
                 width: document.getElementById('main').offsetWidth,
diff --git a/test/js/commonUI.js b/test/js/commonUI.js
new file mode 100644
index 00000000..d0cd29ce
--- /dev/null
+++ b/test/js/commonUI.js
@@ -0,0 +1,22 @@
+(function () {
+    var btn = document.createElement('button');
+    btn.innerHTML = 'DISPOSE';
+    btn.style.cssText = `
+        position:absolute;
+        left: 10px;
+        top: 10px;
+        background: rgb(42, 64, 173);
+        color: #fff;
+        border: none;
+        padding: 5px 10px;
+        z-index: 1000000;
+        cursor: pointer;
+    `;
+
+    btn.onclick = function () {
+        (typeof myChart !== 'undefined') && myChart.dispose();
+        (typeof chart !== 'undefined') && chart.dispose();
+    }
+
+    document.body.appendChild(btn);
+})();
\ No newline at end of file
diff --git a/test/js/exportGL2OBJ.js b/test/js/exportGL2OBJ.js
index 2b91d084..a00a69a0 100644
--- a/test/js/exportGL2OBJ.js
+++ b/test/js/exportGL2OBJ.js
@@ -75,7 +75,7 @@
             outName += outName + '_' + count;
         }
         textureLib.__count__[outName]++;
-        textureLib[map.__GUID__] = {
+        textureLib[map.__uid__] = {
             data: canvas.toDataURL(),
             file: outName + '.png'
         };
@@ -84,10 +84,10 @@
     function convertTexture(material, textureName, textureLib, outLib, outName) {
         var map = material.get(textureName);
         if (map && map.image) {
-            if (!textureLib[map.__GUID__]) {
+            if (!textureLib[map.__uid__]) {
                 convertImage(map, textureLib, outName);
             }
-            outLib[outName] = textureLib[map.__GUID__].file;
+            outLib[outName] = textureLib[map.__uid__].file;
         }
     }
 
@@ -106,7 +106,7 @@
         obj['Ns'] = phongFromRoughness(material.get('roughness'));
         convertTexture(material, 'diffuseMap', textureLib, obj, 'map_Kd');
         // convertTexture(material, 'bumpMap', textureLib, obj, 'bump');
-        
+
         // Physically-based Rendering extension.
         if (material.shader.name === 'ecgl.realistic') {
             convertTexture(material, 'normalMap', textureLib, obj, 'norm');
@@ -121,7 +121,7 @@
         }
         return obj;
     }
-    
+
     /**
      * @param {ECharts} echartsInstance
      * @param {Object} componentQuery
@@ -147,7 +147,7 @@
         var view = componentQuery.mainType === 'series'
             ? chartInstance.getViewOfSeriesModel(componentModel)
             : chartInstance.getViewOfComponentModel(componentModel);
-        
+
         if (!view.__ecgl__) {
             throw new Error('exportGL2OBJ only support GL components.');
         }
@@ -223,7 +223,7 @@
                         image: res.image
                     });
                     convertImage(tex, textureLib, 'map_Kd');
-                    materialLib[materialName]['map_Kd'] = textureLib[tex.__GUID__].file;
+                    materialLib[materialName]['map_Kd'] = textureLib[tex.__uid__].file;
 
                     if (!hasTexcoord) {
                         for (var i = 0; i < res.texcoords.length;) {
diff --git a/test/line3D-debugWireframe.html b/test/line3D-debugWireframe.html
index cf342ab4..5b706734 100644
--- a/test/line3D-debugWireframe.html
+++ b/test/line3D-debugWireframe.html
@@ -12,6 +12,7 @@
         <script src="../node_modules/echarts/dist/echarts.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/line3D-simple.html b/test/line3D-simple.html
index abbc3c12..f9a10c4e 100644
--- a/test/line3D-simple.html
+++ b/test/line3D-simple.html
@@ -12,6 +12,7 @@
         <script src="../node_modules/echarts/dist/echarts.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/line3D.html b/test/line3D.html
index f5a80ef7..10e30643 100644
--- a/test/line3D.html
+++ b/test/line3D.html
@@ -12,6 +12,7 @@
         <script src="../node_modules/echarts/dist/echarts.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/lines3D-airline.html b/test/lines3D-airline.html
index fab54390..18d146c4 100644
--- a/test/lines3D-airline.html
+++ b/test/lines3D-airline.html
@@ -13,6 +13,7 @@
         <script src="../node_modules/echarts/theme/dark.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'), 'dark');
 
diff --git a/test/linesGL.html b/test/linesGL.html
index 201582d0..61a08a1a 100644
--- a/test/linesGL.html
+++ b/test/linesGL.html
@@ -13,6 +13,7 @@
         <script src="../node_modules/echarts/map/js/world.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/map3D-transparent.html b/test/map3D-transparent.html
index 95209c1f..188aac61 100644
--- a/test/map3D-transparent.html
+++ b/test/map3D-transparent.html
@@ -13,6 +13,7 @@
         <script src="../node_modules/echarts/map/js/world.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/map3D.html b/test/map3D.html
index ab34b7e1..db5a6c7f 100644
--- a/test/map3D.html
+++ b/test/map3D.html
@@ -16,6 +16,7 @@
 
         <script src="js/exportGL2OBJ.js"></script>
         <script src="lib/download.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/mapbox-bar3D.html b/test/mapbox-bar3D.html
index 6224ce77..5d69eee9 100644
--- a/test/mapbox-bar3D.html
+++ b/test/mapbox-bar3D.html
@@ -15,6 +15,7 @@
         <link href='lib/mapbox-gl.css' rel='stylesheet' />
         <script src="lib/jquery.min.js"></script>
         <script src="./data/capitals.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             mapboxgl.accessToken = window.location.search.slice(1);
             var chart = echarts.init(document.getElementById('main'));
diff --git a/test/mapbox-buildings-mapzen.html b/test/mapbox-buildings-mapzen.html
index 8a818b7e..4f1445ff 100644
--- a/test/mapbox-buildings-mapzen.html
+++ b/test/mapbox-buildings-mapzen.html
@@ -17,6 +17,7 @@
         <script src="lib/dat.gui.js"></script>
         <script src="lib/LRU.js"></script>
         <script src="https://unpkg.com/sphericalmercator"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             mapboxgl.accessToken = window.location.search.slice(1);
             var chart = echarts.init(document.getElementById('main'));
diff --git a/test/mapbox-buildings.html b/test/mapbox-buildings.html
index 98025461..dc4c85f0 100644
--- a/test/mapbox-buildings.html
+++ b/test/mapbox-buildings.html
@@ -15,6 +15,7 @@
         <link href='./lib/mapbox-gl.css' rel='stylesheet' />
         <script src="./lib/jquery.min.js"></script>
         <script src="./lib/dat.gui.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             mapboxgl.accessToken = window.location.search.slice(1);
             var chart = echarts.init(document.getElementById('main'));
diff --git a/test/mapbox-map3D.html b/test/mapbox-map3D.html
index 9a035bcd..c97750e3 100644
--- a/test/mapbox-map3D.html
+++ b/test/mapbox-map3D.html
@@ -15,6 +15,7 @@
         <script src='lib/mapbox-gl.js'></script>
         <link href='lib/mapbox-gl.css' rel='stylesheet' />
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             mapboxgl.accessToken = window.location.search.slice(1);
             var chart = echarts.init(document.getElementById('main'));
diff --git a/test/mapbox-scatter3D.html b/test/mapbox-scatter3D.html
index ba181158..bc5483b9 100644
--- a/test/mapbox-scatter3D.html
+++ b/test/mapbox-scatter3D.html
@@ -15,6 +15,7 @@
         <script src='lib/mapbox-gl.js'></script>
         <link href='lib/mapbox-gl.css' rel='stylesheet' />
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             mapboxgl.accessToken = window.location.search.slice(1);
             var chart = echarts.init(document.getElementById('main'));
diff --git a/test/mapbox-taxi.html b/test/mapbox-taxi.html
index f77b7e2f..e4f610d5 100644
--- a/test/mapbox-taxi.html
+++ b/test/mapbox-taxi.html
@@ -21,6 +21,7 @@
         <script src="https://unpkg.com/shapefile@0.6"></script>
         <script src="lib/jquery.min.js"></script>
         <script src="lib/dat.gui.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             mapboxgl.accessToken = window.location.search.slice(1);
             var chart = echarts.init(document.getElementById('main'));
diff --git a/test/mapbox-track.html b/test/mapbox-track.html
index 7dc7a7bc..f8d69860 100644
--- a/test/mapbox-track.html
+++ b/test/mapbox-track.html
@@ -14,6 +14,7 @@
         <script src='lib/mapbox-gl.js'></script>
         <link href='lib/mapbox-gl.css' rel='stylesheet' />
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             mapboxgl.accessToken = window.location.search.slice(1);
             var chart = echarts.init(document.getElementById('main'), null, {
diff --git a/test/mapbox-track2.html b/test/mapbox-track2.html
index 5f149c8b..812ba033 100644
--- a/test/mapbox-track2.html
+++ b/test/mapbox-track2.html
@@ -15,6 +15,7 @@
         <script src='lib/mapbox-gl.js'></script>
         <link href='lib/mapbox-gl.css' rel='stylesheet' />
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             mapboxgl.accessToken = window.location.search.slice(1);
             var chart = echarts.init(document.getElementById('main'));
diff --git a/test/maptalks-bar3D.html b/test/maptalks-bar3D.html
index 13a8150b..ff555b43 100644
--- a/test/maptalks-bar3D.html
+++ b/test/maptalks-bar3D.html
@@ -13,6 +13,7 @@
         <script src="../dist/echarts-gl.js"></script>
         <script src='../node_modules/maptalks/dist/maptalks.js'></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
@@ -42,7 +43,6 @@
                         zoom: 3,
                         pitch: 50,
                         bearing: -10,
-                        style: 'mapbox://styles/mapbox/light-v9',
                         boxHeight: 50,
                         // altitudeScale: 1e2,
                         postEffect: {
diff --git a/test/maptalks-buildings-ny.html b/test/maptalks-buildings-ny.html
index 4302e00e..704a7a15 100644
--- a/test/maptalks-buildings-ny.html
+++ b/test/maptalks-buildings-ny.html
@@ -24,6 +24,7 @@
         <script src='../node_modules/maptalks/dist/maptalks.js'></script>
         <script src="lib/jquery.min.js"></script>
         <script src="lib/dat.gui.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/scatter3D-nutrients.html b/test/scatter3D-nutrients.html
index 9c9b5670..15bf93c5 100644
--- a/test/scatter3D-nutrients.html
+++ b/test/scatter3D-nutrients.html
@@ -13,6 +13,7 @@
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
         <script src="lib/dat.gui.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/scatter3D-simplex.html b/test/scatter3D-simplex.html
index 8975cbfb..c1431a8c 100644
--- a/test/scatter3D-simplex.html
+++ b/test/scatter3D-simplex.html
@@ -13,6 +13,7 @@
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
         <script src="lib/simplex.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/scatterGL-masterpainter.html b/test/scatterGL-masterpainter.html
index c701e63b..867b87e1 100644
--- a/test/scatterGL-masterpainter.html
+++ b/test/scatterGL-masterpainter.html
@@ -13,6 +13,7 @@
         <script src="../node_modules/echarts/map/js/china.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
             $.getJSON('data/masterPainterColorChoice.json', function (json) {
diff --git a/test/scatterGL-simple.html b/test/scatterGL-simple.html
index 9fc6b8b7..7b1ea07e 100644
--- a/test/scatterGL-simple.html
+++ b/test/scatterGL-simple.html
@@ -13,6 +13,7 @@
         <script src="../node_modules/echarts/map/js/china.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
             var iconPath ='path://M292.235-334.88c-0.544-0.205-1.104-0.291-1.65-0.266c0.099-0.433,0.125-0.866,0.086-1.291\
diff --git a/test/scatterGL-weibo.html b/test/scatterGL-weibo.html
index 09df0afc..934f3c69 100644
--- a/test/scatterGL-weibo.html
+++ b/test/scatterGL-weibo.html
@@ -13,6 +13,7 @@
         <script src="../node_modules/echarts/map/js/china.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/surface-complex-material.html b/test/surface-complex-material.html
index ba0e13ba..9a64b8c5 100644
--- a/test/surface-complex-material.html
+++ b/test/surface-complex-material.html
@@ -13,6 +13,7 @@
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
         <script src="lib/dat.gui.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/surface-hatching.html b/test/surface-hatching.html
index 13a2a774..35959749 100644
--- a/test/surface-hatching.html
+++ b/test/surface-hatching.html
@@ -13,6 +13,7 @@
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
         <script src="lib/dat.gui.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/surface-metal.html b/test/surface-metal.html
index 606213a8..a8f393c4 100644
--- a/test/surface-metal.html
+++ b/test/surface-metal.html
@@ -13,6 +13,7 @@
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
         <script src="lib/dat.gui.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/surface-parametric-more.html b/test/surface-parametric-more.html
index 574bf8c0..4d3b62b2 100644
--- a/test/surface-parametric-more.html
+++ b/test/surface-parametric-more.html
@@ -16,6 +16,7 @@
         <script src="../node_modules/echarts/dist/echarts.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             // http://xahlee.info/surface/breather_p/breather_p.html
             var chart = echarts.init(document.getElementById('main'));
diff --git a/test/surface-parametric.html b/test/surface-parametric.html
index eb190b73..77340ba9 100644
--- a/test/surface-parametric.html
+++ b/test/surface-parametric.html
@@ -12,6 +12,7 @@
         <script src="../node_modules/echarts/dist/echarts.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/surface-rose.html b/test/surface-rose.html
index 229de276..b40b5607 100644
--- a/test/surface-rose.html
+++ b/test/surface-rose.html
@@ -13,6 +13,7 @@
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
         <script src="lib/dat.gui.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/surface-texture.html b/test/surface-texture.html
index c8fa179c..30752fac 100644
--- a/test/surface-texture.html
+++ b/test/surface-texture.html
@@ -12,6 +12,7 @@
         <script src="../node_modules/echarts/dist/echarts.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/surface-transparent-large.html b/test/surface-transparent-large.html
index 3d05f961..68477320 100644
--- a/test/surface-transparent-large.html
+++ b/test/surface-transparent-large.html
@@ -12,6 +12,7 @@
         <script src="../node_modules/echarts/dist/echarts.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             // http://xahlee.info/surface/breather_p/breather_p.html
             var chart = echarts.init(document.getElementById('main'));
diff --git a/test/surface-transparent.html b/test/surface-transparent.html
index 1227f063..beaae20f 100644
--- a/test/surface-transparent.html
+++ b/test/surface-transparent.html
@@ -12,6 +12,7 @@
         <script src="../node_modules/echarts/dist/echarts.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/surface-wave.html b/test/surface-wave.html
index 54d12253..f4b3cd83 100644
--- a/test/surface-wave.html
+++ b/test/surface-wave.html
@@ -12,6 +12,7 @@
         <script src="../node_modules/echarts/dist/echarts.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));
 
diff --git a/test/surface.html b/test/surface.html
index 3c3c9879..8b65cdb2 100644
--- a/test/surface.html
+++ b/test/surface.html
@@ -12,6 +12,7 @@
         <script src="../node_modules/echarts/dist/echarts.js"></script>
         <script src="../dist/echarts-gl.js"></script>
         <script src="lib/jquery.min.js"></script>
+        <script src="js/commonUI.js"></script>
         <script>
             var chart = echarts.init(document.getElementById('main'));