diff --git a/doc/asset/js/echartsExample.js b/doc/asset/js/echartsExample.js
index b26db7ca53a2d51c937559e5c9f5619422507cad..99cd020966bfaa8dd838b6ff81b79e4f13256803 100644
--- a/doc/asset/js/echartsExample.js
+++ b/doc/asset/js/echartsExample.js
@@ -66,7 +66,7 @@ function needMap() {
 }
 
 var echarts;
-var developMode = false;
+var developMode = true;
 
 if (developMode) {
     // for develop
diff --git a/doc/example/mix7.html b/doc/example/mix7.html
new file mode 100644
index 0000000000000000000000000000000000000000..ea8364f2c76463c2f1e6f87b9b062a2638224095
--- /dev/null
+++ b/doc/example/mix7.html
@@ -0,0 +1,217 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>ECharts</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <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">
+    <link href="../asset/css/monokai.css" rel="stylesheet">
+    <link href="../asset/css/echartsHome.css" rel="stylesheet">
+    <link rel="shortcut icon" href="../asset/ico/favicon.png">
+</head>
+
+<body>
+    <!-- NAVBAR
+    ================================================== -->
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a class="brand" href="../../index.html">ECharts</a>
+          <div class="nav-collapse collapse">
+              <a id="forkme_banner" href="https://github.com/ecomfe/echarts">View on GitHub</a>
+              <ul class="nav">
+                <li><a href="../../index.html"><i class="icon-home icon-white"></i> Home</a></li>
+                <li class="active"><a href="../example.html" class="active">Example</a></li>
+                <li><a href="../doc.html" >API &amp; Doc</a></li>
+                <li class="dropdown">
+                  <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-download-alt icon-white"></i>Download <b class="caret"></b></a>
+                  <ul class="dropdown-menu">
+                    <li><a id="last-release-link" href=""> </a></li>
+                    <li><a href="https://github.com/ecomfe/echarts/archive/master.zip">ZIP (Latest)</a></li>
+                  </ul>
+                </li>
+                <li class="dropdown">
+                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Link <b class="caret"></b></a>
+                  <ul class="dropdown-menu">
+                    <li><a href="https://github.com/ecomfe" target="_blank">Ecom-FE</a></li>
+                    <li><a href="http://fe.baidu.com/doc/ecom/tech/topic/dv/index.html" target="_blank">Data Visualization</a></li>
+                    <li class="divider"></li>
+                    <!--li class="nav-header">Library</li-->
+                    <li><a href="http://ecomfe.github.io/zrender/index.html" target="_blank">ZRender</a></li>
+                    
+                  </ul>
+                </li>
+              </ul>
+           </div><!--/.nav-collapse -->
+        </div><!-- /.container -->
+      </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">
+// 虚拟构造同横纵坐标的两组数据
+var sData1 = (function() {
+    var d = [];
+    var len = 40;
+    var value;
+    while (len--) {
+        d.push([
+            Math.round(Math.random()*10) * (Math.round(Math.random()*10) > 5 ? 1 : -1),
+            Math.round(Math.random()*10) * (Math.round(Math.random()*10) > 5 ? 1 : -1),
+            Math.round(Math.random()*20)
+        ]);
+    }
+    return d;
+})();
+var sData2 = (function() {
+    var d = [];
+    var len = sData1.length;
+    for (var i = 0; i < len; i++) {
+        d.push([
+            sData1[i][0],
+            sData1[i][1],
+            Math.round(Math.random()*15)
+        ]);
+    }
+    return d;
+})();
+
+option = {
+    color : ['rgba(255, 69, 0, 0.5)', 'rgba(30, 144, 255, 0.5)'],
+    title : {
+        text: '饼图代替散点',
+        subtext : '混搭'
+    },
+    tooltip : {
+        trigger: 'item',
+         formatter: "{b} : {c} ({d}%)"
+    },
+    legend : {
+        data : ['系列1', '系列2']
+    },
+    toolbox: {
+        show : true,
+        feature : {
+            mark : true,
+            dataView : {readOnly: false},
+            restore : true,
+            saveAsImage : true
+        }
+    },
+    xAxis : [
+        {
+            type : 'value',
+            splitNumber: 2,
+            splitArea: {show:true}
+        }
+    ],
+    yAxis : [
+        {
+            type : 'value',
+            splitNumber: 2,
+            splitArea : {show : true}
+        }
+    ],
+    animation: false,
+    series : [
+        {
+            type:'scatter',
+            symbol: 'none',
+            data: sData1
+        },
+        {
+            type:'scatter',
+            symbol: 'none',
+            data: sData2
+        }
+    ]
+};
+
+function buildPieSeries(){
+    var xAxis = myChart.compoent.xAxis.getAxis(0);
+    var yAxis = myChart.compoent.yAxis.getAxis(0);
+    var len = sData1.length;
+    option.series = option.series.slice(0,2);
+    while (len--) {
+        option.series.push({
+            type: 'pie',
+            itemStyle : {
+                normal : {
+                    label : {
+                        show : false
+                    },
+                    labelLine : {
+                        show : false
+                    }
+                }
+            },
+            radius : sData1[len][2] + sData2[len][2],
+            center: [
+                xAxis.getCoord(sData1[len][0]), 
+                yAxis.getCoord(sData1[len][1])
+            ],
+            data: [
+                {name: '系列1', value: sData1[len][2]},
+                {name: '系列2', value: sData2[len][2]}
+            ]
+        })
+    }
+    option.animation = true;
+    myChart.setOption(option);
+    window.onresize = buildPieSeries;
+}
+// 构造出一系列的饼图代替原来的散点，需要在散点画出来后才能获取到散点的坐标，setTimeout！
+setTimeout(buildPieSeries, 100);
+                    </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><!--/span-->
+        </div><!--/row-->
+        <hr>
+        <!-- FOOTER -->
+        <footer>
+          <p class="pull-right"><a href="#">Back to top</a></p>
+          <p>&copy; 2013 ECOM-FE &middot; <a href="https://github.com/ecomfe/echarts/blob/master/LICENSE.txt" target="_blank">License</a> &middot; <a href="../changelog.html" target="_blank">Changelog</a></p>
+        </footer>
+    </div><!--/.fluid-container-->
+
+    <script src="../asset/js/jquery.js"></script>
+    <script src="../asset/js/bootstrap-transition.js"></script>
+    <script src="../asset/js/bootstrap-alert.js"></script>
+    <script src="../asset/js/bootstrap-modal.js"></script>
+    <script src="../asset/js/bootstrap-dropdown.js"></script>
+    <script src="../asset/js/bootstrap-scrollspy.js"></script>
+    <script src="../asset/js/bootstrap-tab.js"></script>
+    <script src="../asset/js/bootstrap-tooltip.js"></script>
+    <script src="../asset/js/bootstrap-popover.js"></script>
+    <script src="../asset/js/bootstrap-button.js"></script>
+    <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>
+</body>
+</html>
\ No newline at end of file
