diff --git a/doc/doc.html b/doc/doc.html
index 434ab332901dad268224c636d3f4d8c6b8154a3b..c286b4f8c669fde6855cdcbd4f2f0d5fa98069d0 100644
--- a/doc/doc.html
+++ b/doc/doc.html
@@ -1918,7 +1918,7 @@ feature : {
                     <p><img src="./asset/img/doc/multiControl.jpg" title="" alt="多级控制"/></P>
 
                     <h3>附录：一个直观的事例<a name="附录一个直观的事例"> </a></h3>
-                    <p>查看更多实例 <a href="example.html" target="_blank">example</a></p>
+                    <p>查看更多实例 <a href="example.html" target="_blank">example</a>，或者使用这个<a href="example/demo.html" target="_blank">demo</a>作为你的模板</p>
                     <div class="code">
                         <pre>// 图表实例化------------------
 var echarts = require('echarts');
diff --git a/doc/example/demo.html b/doc/example/demo.html
index 016cce7b3acd8183bbfb52c0b524e1a8af0789c8..3824e73eb2d2a92b3f1cf8d925091e4d43d2df59 100644
--- a/doc/example/demo.html
+++ b/doc/example/demo.html
@@ -7,10 +7,6 @@
     <meta name="description" content="ECharts">
     <meta name="author" content="linzhifeng@baidu.com">
 
-    <script src="../asset/js/esl/esl.js"></script>
-    <script src="../asset/js/codemirror.js"></script>
-    <script src="../asset/js/javascript.js"></script>
-
     <link href="../asset/css/bootstrap.css" rel="stylesheet">
     <link href="../asset/css/bootstrap-responsive.css" rel="stylesheet">
     <link href="../asset/css/codemirror.css" rel="stylesheet">
@@ -61,139 +57,10 @@
       </div><!-- /.navbar-inner -->
     </div><!-- /.navbar-wrapper -->
 
-    <div class="container-fluid">
-        <div class="row-fluid">
-            <div id="sidebar-code" class="span4">
-                <div class="well sidebar-nav">
-                    <div class="nav-header"><a href="#" onclick="autoResize()" class="icon-resize-full" id ="icon-resize" ></a>option</div>
-                    <textarea id="code" name="code">
-option = {
-    // color : []
-    tooltip : {
-        // show : true,        // default : true
-        trigger: 'axis',
-        borderWidth : 1,
-        borderColor : 'yellow',
-        padding : [8,12],
-        textStyle : {
-            color : '#eee',
-            fontSize : '16',
-            fontWeight:'blod',
-            fontFamily:'微软雅黑'
-        },
-        formatter: "Template : <br/>{b}<br/>{a}:{c}<br/>{a1}:{c1}<br/>{a2}:{c2}",
-        formatter: function(params) {
-            var res = 'Function : <br/>' + params[0][1];
-            for (var i = 0, l = params.length; i < l; i++) {
-                res += '<br/>' + params[i][0] + ' : ' + params[i][2];
-            }
-            return res;
-        }
-    },
-    legend: {
-        // orient : 'vertical',
-        // x : 'right',
-        borderWidth:0,
-        padding:[5,5],
-        //data:['Kener','Amy','apple','orange','peach','banana'],
-        data:['serie1','serie2','serie3','serie4']
-    },
-    grid : {
-        //x : 50,
-        //y : 30,
-        //width : 600,
-        //height : 320
-    },
-    xAxis : [
-        {
-            type : 'category',
-            position:'bottom',
-            // axisTick : {show:true, lineStyle:{color:'red'}},
-            // splitLine : {show:false},
-            // splitArea : {show:false, areaStyle:{color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']}},
-            data : ['2012-02-01','2012-02-02','2012-02-03','2012-02-04','2012-02-05']
-        }
-    ],
-    yAxis : [
-        {
-            type : 'value',
-            position:'left'
-        }
-    ],
-    series : [
-        {
-            name:'serie1',
-            type:'line',
-            itemStyle: {normal: {areaStyle: {color: 'rgba(144, 238, 144, 0.3)'}}},
-            data:[1,2,8,{value:20,tooltip : {trigger: 'item'}}]
-        },
-        {
-            name:'serie2',
-            stack: 'stack1',
-            type:'line',
-            itemStyle: {normal: {areaStyle: {color: 'rgba(98, 130, 10, 0.3)'}}},
-            data:[12,20,'-', 15, 9]
-        },
-        {
-            name:'serie3',
-            stack: 'stack1',
-            type:'line',
-            itemStyle: {normal: {areaStyle: {color: 'rgba(170, 130, 180, 0.3)'}}},
-            data:[13,3,33,9,7]
-        },
-        {
-            name:'serie4',
-            type:'line',
-            itemStyle: {normal: {areaStyle: {color: 'rgba(70, 30, 180, 0.3)'}}},
-            data:[4,14,3,6,4]
-        },
-        /*
-        {
-            name:'fruit',
-            type:'pie',
-            radius : [80, 120],
-            center: [400,200],
-            data:[
-                {value:10, name:'apple'},
-                {value:34, name:'orange'},
-                {value:35, name:'peach'},
-                {value:48, name:'banana'}
-            ]
-        },
-        {
-            name:'people',
-            type:'pie',
-            radius : [20, 60],
-            center: [400,200],
-            itemStyle :　{
-                normal : {
-                    label : {
-                        position:'inner'
-                    },
-                    labelLine : {
-                        show : false
-                    }
-                }
-            },
-            data:[
-                {value:12, name:'Kener'},
-                {value:24, name:'Amy'},
-                {value:35, name:'Lily'},
-                {value:48, name:'Eric'}
-            ]
-        }
-        */
-    ]
-};
-                    </textarea>
-              </div><!--/.well -->
-            </div><!--/span-->
-            <div id="graphic" class="span8">
-                <div id="main" class="main"></div>
-                <div>
-                    <button onclick="refresh(true)">Refresh ~</button>
-                    <span id='wrong-message' style="color:red"></span>
-                </div>
+    <div class="container">
+        <div class="row">
+            <div id="graphic" class="span12">
+                <div id="main" style="height:400px"></div>
             </div><!--/span-->
         </div><!--/row-->
         <hr>
@@ -217,6 +84,83 @@ option = {
     <script src="../asset/js/bootstrap-collapse.js"></script>
     <script src="../asset/js/bootstrap-carousel.js"></script>
     <script src="../asset/js/bootstrap-typeahead.js"></script>
-    <script src="../asset/js/echartsExample.js"></script>
+    
+    <!--echarts demo-->
+    <script src="../asset/js/esl/esl.js"></script>
+    <script type="text/javascript">
+        require.config({
+            paths: {
+                'js': '../asset/js/esl/js'
+            },
+            packages: [
+                {
+                    name: 'echarts',
+                    location: '../../src',
+                    main: 'echarts'
+                },
+                {
+                    name: 'zrender',
+                    location: 'http://ecomfe.github.io/zrender/src',
+                    //location: '../../../zrender/src',
+                    main: 'zrender'
+                }
+            ]
+        });
+        
+        var option = {
+            tooltip : {
+                trigger: 'axis'
+            },
+            legend: {
+                data:['蒸发量','降水量']
+            },
+            toolbox: {
+                show : true,
+                feature : {
+                    mark : true,
+                    dataView : {readOnly: false},
+                    magicType:['line', 'bar'],
+                    restore : true
+                }
+            },
+            calculable : true,
+            xAxis : [
+                {
+                    type : 'category',
+                    data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
+                }
+            ],
+            yAxis : [
+                {
+                    type : 'value',
+                    splitArea : {show : true}
+                }
+            ],
+            series : [
+                {
+                    name:'蒸发量',
+                    type:'bar',
+                    data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
+                },
+                {
+                    name:'降水量',
+                    type:'bar',
+                    data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
+                }
+            ]
+        };
+        
+        require(
+            [
+                'echarts',
+                'echarts/chart/line',
+                'echarts/chart/bar',
+            ],
+            function(ec) {
+                var myChart = ec.init(document.getElementById('main'));
+                myChart.setOption(option);
+            }
+        )
+    </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 0d96f765a3db9d080572927f728cd19ccd636dcf..ef0f0026fd650a4a3bc08300b2d80218a08ee19a 100644
--- a/index.html
+++ b/index.html
@@ -194,7 +194,7 @@
         </div>
         <h2 class="featurette-heading">标线辅助</h2>
         <p>趋势线？平均线？上升通道？支持位？专业的你自然知道该怎么用</p>
-        <p>提供标线辅助在K线图中可是必要的功能！当然，ECharts中的任何图标都可以使用。</p>
+        <p>提供标线辅助在K线图中可是必要的功能！当然，ECharts中的任何图表都可以使用。</p>
       </div>
       <hr class="featurette-divider">
       <div class="featurette">