echarts单文件引入文档及例子更新

doc/asset/js/echartsExample.js

@@ -51,7 +51,7 @@ function refresh(isBtnRefresh){
     myChart.setOption(option, true);
     domMessage.innerHTML = '';
 }
-
+/*
 require.config({
     packages: [
         {
@@ -67,11 +67,19 @@ require.config({
         }
     ]
 });
+*/
+
+require.config({
+    paths:{ 
+        echarts:'./www/js/echarts'
+    }
+});
+
 
 var echarts;
 require(
     [
-        'echarts',
+        'echarts'   /*,
         'echarts/chart/line',
         'echarts/chart/bar',
         'echarts/chart/scatter',
@@ -79,6 +87,7 @@ require(
         'echarts/chart/pie',
         'echarts/chart/map',
         'echarts/chart/force'
+        */
     ],
     function(ec) {
         echarts = ec;

doc/doc.html

@@ -85,6 +85,7 @@
                                 <li><a href="#Map">map</a></li>
                                 <li><a href="#Force">force</a></li>
                             </ul>
+                            <li><a href="#引入ECharts">引入ECharts</a></li>
                             <li><a href="#初始化">初始化</a></li>
                             <li><a href="#方法">方法</a></li>
                             <li><a href="#选项">选项</a></li>
@@ -343,6 +344,46 @@
                             <td><img src="./asset/img/example/webkit-dep.png" title="" alt="中国地图"/></td>
                         </tr>
                     </table>
+                    
+                    <h3>引入ECharts<a name="引入ECharts"> </a></h3>
+                    <P>如果你的项目本身就是模块化的，那引入echarts将很简单，只需要配置好packet路径指向src即可，而且你还可以实现图表的按需加载，由于echarts依赖底层zrender，建议你同时下载<a href="https://github.com/ecomfe/zrender" target="_blank">zrender</a>到本地，可参考<a href="example/demo.html" target="_blank">demo</a>，你需要配置如下</P>
+                    <div class="code">
+                        <pre>//from echarts example
+require.config({
+    packages: [
+        {
+            name: 'echarts',
+            location: '../../src',      
+            main: 'echarts'
+        },
+        {
+            name: 'zrender',
+            location: '../../../zrender/src', // zrender与echarts在同一级目录
+            main: 'zrender'
+        }
+    ]
+});
+</pre>
+                    </div>
+                    <P>你也可以使用单一文件引入，node环境下安装<a href="http://requirejs.org/docs/optimization.html" target="_blank">require.js</a>，build文件夹内为你准备好配置项，可根据你的项目需求修改并压缩生成单一文件。</P>
+                    <p>如你所发现的，build文件夹下已经生成了两个单一文件（包含全部图表），echarts.js经过压缩，如需调试，可以用echarts-original.js，采用单一文件使用例子见<a href="example/www/index.html" target="_blank">ECharts单一文件引入</a>，存放在example/www下，你需要配置如下</p>
+                    <div class="code">
+                        <pre>//初始化实例时传入选项
+require.config({
+    paths:{ 
+        echarts:'./js/echarts'
+    }
+});
+</pre>
+                    </div>
+                    <p>不管如何引入ECharts，你都需要如下4步：</p>
+                    <ol>
+                        <li>引入一个模块加载器，如<a href="https://github.com/ecomfe/esl" target="_blank">esl.js</a>或者<a href="http://requirejs.org" target="_blank">require.js</a></li>
+                        <li>为ECharts准备一个具备大小（宽高）的Dom（当然可以是动态生成的）</li>
+                        <li>为模块加载器配置echarts的路径，从当前页面链接到echarts.js，见上述说明</li>
+                        <li>动态加载echarts然后在回调函数中开始使用</li>
+                    </ol>
+
                     <h3>初始化<a name="初始化"> </a></h3>
                     <P> 图表库实现为多实例的，实例选项在新建时传入，同时也可在实例新建后通过实例方法setOption（见<a href="#方法" title="">方法</a>）传入，两种初始化方式最终产出效果是等价的，即如下两组代码产出效果相同。</P>
                     <div class="code">
@@ -2064,7 +2105,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>，或者使用这个<a href="example/demo.html" target="_blank">demo</a>作为你的模板</p>
+                    <p>查看更多实例 <a href="example.html" target="_blank">example</a>，或者使用这个<a href="example/demo.html" target="_blank">demo</a> 或 <a href="example/www/index.html" target="_blank">ECharts单一文件引入</a>作为你的模板</p>
                     <div class="code">
                         <pre>// 图表实例化------------------
 var echarts = require('echarts');

doc/example/loading.html

@@ -180,7 +180,7 @@ loadingTicket = setTimeout(function(){
             //    domMessage.innerHTML = e;
            // }
         }
-
+        /*
         require.config({
             packages: [
                 {
@@ -196,12 +196,16 @@ loadingTicket = setTimeout(function(){
                 }
             ]
         });
+        */
+        require.config({
+            paths:{ 
+                echarts:'./www/js/echarts'
+            }
+        });
 
         require(
             [
-                'echarts/echarts',
-                'echarts/chart/line',
-                'echarts/chart/bar'
+                'echarts'
             ],
             function(echarts) {
                 if (myChart && myChart.dispose) {

doc/example/www/index.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>ECharts</title>
+    <!--Step:1 Import a module loader, such as esl.js or require.js-->
+    <!--Step:1 引入一个模块加载器，如esl.js或者require.js-->
+    <script src="js/esl.js"></script>
+</head>
+
+<body>
+    <!--Step:2 Prepare a dom for ECharts which (must) has size (width & hight)-->
+    <!--Step:2 为ECharts准备一个具备大小（宽高）的Dom-->
+    <div id="main" style="width:100%;height:500px;border:1px solid #ccc"></div>
+    
+    <script type="text/javascript">
+    // Step:3 conifg ECharts's path, link to echarts.js from current page.
+    // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js
+    require.config({
+        paths:{ 
+            echarts:'./js/echarts'
+        }
+    });
+    
+    // Step:4 require echarts and use it in the callback.
+    // Step:4 动态加载echarts然后在回调函数中开始使用
+    require(
+        ['echarts'],
+        function(ec) {
+            var myChart = ec.init(document.getElementById('main'));
+            var option = {
+                tooltip : {
+                    trigger: 'axis'
+                },
+                legend: {
+                    data:['蒸发量','降水量']
+                },
+                toolbox: {
+                    show : true,
+                    feature : {
+                        mark : true,
+                        dataView : {readOnly: false},
+                        magicType:['line', 'bar'],
+                        restore : true,
+                        saveAsImage : 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]
+                    }
+                ]
+            };
+            
+            myChart.setOption(option);
+        }
+    );
+    </script>
+</body>
+</html>
\ No newline at end of file

doc/slide/js/whyEcharts.js

+/*
 require.config({
     packages: [
         {
@@ -13,20 +14,20 @@ require.config({
         }
     ]
 });
+*/
+require.config({
+    paths:{ 
+        echarts:'../../build/echarts',
+        webkitDep : '../../doc/example/webkit-dep',
+    }
+});
 
 var echarts;
 var webkitDepData;
 require(
     [
         'echarts',
-        '../../doc/example/webkit-dep',
-        'echarts/chart/line',
-        'echarts/chart/bar',
-        'echarts/chart/scatter',
-        'echarts/chart/k',
-        'echarts/chart/pie',
-        'echarts/chart/map',
-        'echarts/chart/force',
+        'webkitDep',
     ],
     function(ec, wd) {
         echarts = ec;
@@ -588,7 +589,7 @@ var optionMap = {
                 large: true,
                 data: (function() {
                     var d = [];
-                    var len = 5000;
+                    var len = 3000;
                     var x = 0;
                     while (len--) {
                         x = (Math.random() * 10).toFixed(3) - 0;
@@ -607,7 +608,7 @@ var optionMap = {
                 large: true,
                 data: (function() {
                     var d = [];
-                    var len = 5000;
+                    var len = 3000;
                     var x = 0;
                     while (len--) {
                         x = (Math.random() * 10).toFixed(3) - 0;