文档、图片大小优化、雷达图例子更新

eastmacro · Sep 11, 2013 · dcbe976 · dcbe976
1 parent 5357148
commit dcbe976
Show file tree

Hide file tree

Showing 30 changed files with 331 additions and 83 deletions.
diff --git a/doc/asset/css/flexslider.css b/doc/asset/css/flexslider.css
@@ -82,4 +82,6 @@ img.flex-active {border-bottom:10px solid #c3e7fd}
     font-weight: bolder;
     text-align:center;
     background-color:#c3e7fd;
+    height:30px;
+    line-height:30px;
 }
diff --git a/doc/asset/img/architecture.png b/doc/asset/img/architecture.png
diff --git a/doc/asset/img/dataView.gif b/doc/asset/img/dataView.gif
diff --git a/doc/asset/img/datazoom.gif b/doc/asset/img/datazoom.gif
diff --git a/doc/asset/img/doc/charts.jpg b/doc/asset/img/doc/charts.jpg
diff --git a/doc/asset/img/draggable.gif b/doc/asset/img/draggable.gif
diff --git a/doc/asset/img/example/dynamicLineBar.png b/doc/asset/img/example/dynamicLineBar.png
diff --git a/doc/asset/img/example/dynamicPieRadar.png b/doc/asset/img/example/dynamicPieRadar.png
diff --git a/doc/asset/img/example/dynamicScatterK.png b/doc/asset/img/example/dynamicScatterK.png
diff --git a/doc/asset/img/example/radar.png b/doc/asset/img/example/radar.png
diff --git a/doc/asset/img/example/radar1.jpg b/doc/asset/img/example/radar1.jpg
diff --git a/doc/asset/img/example/radar1.png b/doc/asset/img/example/radar1.png
diff --git a/doc/asset/img/example/radar2.jpg b/doc/asset/img/example/radar2.jpg
diff --git a/doc/asset/img/example/radar2.png b/doc/asset/img/example/radar2.png
diff --git a/doc/asset/img/example/radar3.png b/doc/asset/img/example/radar3.png
diff --git a/doc/asset/img/legendSelected.gif b/doc/asset/img/legendSelected.gif
diff --git a/doc/asset/img/magicType.gif b/doc/asset/img/magicType.gif
diff --git a/doc/asset/img/mark.gif b/doc/asset/img/mark.gif
diff --git a/doc/asset/img/mix.jpg b/doc/asset/img/mix.jpg
diff --git a/doc/asset/img/scatter.gif b/doc/asset/img/scatter.gif
diff --git a/doc/asset/img/slide-01.png b/doc/asset/img/slide-01.png
diff --git a/doc/asset/img/slide-02.png b/doc/asset/img/slide-02.png
diff --git a/doc/asset/img/slide-03.png b/doc/asset/img/slide-03.png
diff --git a/doc/doc.html b/doc/doc.html
@@ -321,8 +321,8 @@ <h4>单图表类型：radar（暂不支持）<a name="Radar"> </a></h4>
                             <th> 填充雷达图 </th>
                         </tr>
                         <tr>
-                            <td><img src="./asset/img/example/radar1.jpg" title="" alt="雷达图"/></td>
-                            <td><img src="./asset/img/example/radar2.jpg" title="" alt="填充雷达图"/></td>
+                            <td><img src="./asset/img/example/radar1.png" title="" alt="雷达图"/></td>
+                            <td><img src="./asset/img/example/radar2.png" title="" alt="填充雷达图"/></td>
                         </tr>
                     </table>
 

diff --git a/doc/example.html b/doc/example.html
@@ -202,6 +202,33 @@ <h1>饼图</h1>
                     </div>
                   </section>
             </div>
+            <div class="span6">
+                <h1>雷达图</h1>
+                <section class="slider">
+                    <div class="flexslider thumb4">
+                        <ul class="slides">
+                            <li data-thumb="asset/img/example/cache.png">
+                              <a href="example/radar1.html"><img src="asset/img/example/cache.png"></a>
+                              <p>标准雷达图</p>
+                            </li><!--/li-->
+                            <li data-thumb="asset/img/example/cache.png">
+                              <a href="example/radar2.html"><img src="asset/img/example/cache.png"></a>
+                              <p>标准填充雷达图</p>
+                            </li><!--/li-->
+                            <li data-thumb="asset/img/example/cache.png">
+                              <a href="example/radar3.html"><img src="asset/img/example/cache.png"></a>
+                              <p>多雷达图</p>
+                            </li><!--/li-->
+                            <li data-thumb="asset/img/example/cache.png">
+                              <a href="example/radar.html"><img src="asset/img/example/cache.png"></a>
+                              <p>雷达图：【个性化】线条，拐点，填充样式</p>
+                            </li><!--/li-->
+                        </ul>
+                    </div>
+                  </section>
+            </div>
+        </div>
+        <div class="row-fluid">
             <div class="span6">
                 <h1>地图</h1>
                 <section class="slider">
@@ -227,8 +254,6 @@ <h1>地图</h1>
                     </div>
                   </section>
             </div>
-        </div>
-        <div class="row-fluid">
             <div class="span6">
                 <h1>力导向布局图</h1>
                 <section class="slider">
@@ -246,27 +271,6 @@ <h1>力导向布局图</h1>
                     </div>
                   </section>
             </div>
-            <div class="span6">
-                <h1>其他</h1>
-                <section class="slider">
-                    <div class="flexslider thumb3">
-                        <ul class="slides">
-                            <li data-thumb="asset/img/example/cache.png">
-                              <a href="example/loading.html"><img src="asset/img/example/cache.png"></a>
-                              <p>加载中（Loading）</p>
-                            </li><!--/li-->
-                            <li data-thumb="asset/img/example/cache.png">
-                              <a href="example/event.html"><img src="asset/img/example/cache.png"></a>
-                              <p>事件</p>
-                            </li><!--/li-->
-                            <li data-thumb="asset/img/example/import.png">
-                              <a href="example/www/index.html"><img src="asset/img/example/import.png"></a>
-                              <p>单文件引入ECharts</p>
-                            </li><!--/li-->
-                        </ul>
-                    </div>
-                  </section>
-            </div>
         </div>
         <div class="row-fluid">
             <div class="span6">
@@ -336,6 +340,41 @@ <h1>组件</h1>
                   </section>
             </div>
         </div>
+        <div class="row-fluid">
+            <div class="span6">
+                <h1>其他</h1>
+                <section class="slider">
+                    <div class="flexslider thumb3">
+                        <ul class="slides">
+                            <li data-thumb="asset/img/example/cache.png">
+                              <a href="example/dynamicLineBar.html"><img src="asset/img/example/cache.png"></a>
+                              <p>动态数据（折线图、柱状图）</p>
+                            </li><!--/li-->
+                            <li data-thumb="asset/img/example/cache.png">
+                              <a href="example/dynamicScatterK.html"><img src="asset/img/example/cache.png"></a>
+                              <p>动态数据（散点图、K线图）</p>
+                            </li><!--/li-->
+                            <li data-thumb="asset/img/example/cache.png">
+                              <a href="example/dynamicPieRadar.html"><img src="asset/img/example/cache.png"></a>
+                              <p>动态数据（饼图、雷达图）</p>
+                            </li><!--/li-->
+                            <li data-thumb="asset/img/example/cache.png">
+                              <a href="example/loading.html"><img src="asset/img/example/cache.png"></a>
+                              <p>加载中（Loading）</p>
+                            </li><!--/li-->
+                            <li data-thumb="asset/img/example/cache.png">
+                              <a href="example/event.html"><img src="asset/img/example/cache.png"></a>
+                              <p>事件交互，可以捕获的用户交互和数据变化事件实现图表与外界的联动。</p>
+                            </li><!--/li-->
+                            <li data-thumb="asset/img/example/import.png">
+                              <a href="example/www/index.html"><img src="asset/img/example/import.png"></a>
+                              <p>单文件引入ECharts</p>
+                            </li><!--/li-->
+                        </ul>
+                    </div>
+                  </section>
+            </div>
+        </div>
         <hr>
         <footer>
           <p class="pull-right"><a href="#">Back to top</a></p>

diff --git a/doc/example/dynamicPieRadar.html b/doc/example/dynamicPieRadar.html
@@ -123,20 +123,13 @@
         {
             name: 'radar',
             type: 'radar',
+            itemStyle: {normal: {areaStyle: {type: 'default'}}},
             data: (function(){
                 var res = [];
-                var color = [
-                    'rgba(111,111,22, 0.5)',
-                    'rgba(200,0,0,0.5)',
-                    'rgba(20,100,100,0.5)'
-                ];
                 var len = 0;
                 while (len++ < 3) {
                     res.push({
                         name: 'data' + len,
-                        itemStyle : {
-                            normal : { color: color[len - 1]}
-                        },
                         value: [
                             Math.round(Math.random()*100),
                             Math.round(Math.random()*100),

diff --git a/doc/example/radar.html b/doc/example/radar.html
@@ -69,7 +69,7 @@
                     <textarea id="code" name="code">
 option = {
     tooltip : {
-        trigger: 'item'
+        trigger: 'axis'
     },
     legend: {
         x : 'left',
@@ -115,12 +115,6 @@
             name: '雷达图',
             type: 'radar',
             itemStyle: {
-                normal: {
-                    // color: 各异,
-                    lineStyle: {
-                        width: 2
-                    }
-                },
                 emphasis: {
                     // color: 各异,
                     lineStyle: {
@@ -139,22 +133,31 @@
                             lineStyle: {
                                 type: 'dashed'
                             }
-                        },
-                        emphasis: {
-                            lineStyle: {
-                                type: 'solid'
-                            }
                         }
                     }
                 },
                 {
                     value : [10, 3, 0.20, -100, 1000],
-                    name : '图二'
+                    name : '图二',
+                    itemStyle: {
+                        normal: {
+                            areaStyle: {
+                                type: 'default'
+                            }
+                        }
+                    }
                 },
                 {
                     value : [20, 3, 0.3, -13.5, 3000],
                     name : '图三',
-                    symbol: 'none'         // 拐点图形类型，非标准参数
+                    symbol: 'none',         // 拐点图形类型，非标准参数
+                    itemStyle: {
+                        normal: {
+                            lineStyle: {
+                                type: 'dotted'
+                            }
+                        }
+                    }
                 }
             ]
         },
@@ -172,11 +175,32 @@
             data : [
                 {
                     value : [120, 118, 130, 100, 99, 70],
-                    name : '张三'
+                    name : '张三',
+                    itemStyle: {
+                        normal: {
+                            areaStyle: {
+                                color: (function(){
+                                    var zrColor = require('zrender/tool/color');
+                                    var x = document.getElementById('main').offsetWidth - 250;
+                                    return zrColor.getRadialGradient(
+                                        x, 210, 0, x, 200, 150,
+                                        [[0, 'rgba(255,255,0,0.3)'],[1, 'rgba(255,0,0,0.5)']]
+                                    )
+                                })()
+                            }
+                        }
+                    }
                 },
                 {
                     value : [90, 113, 140, 30, 70, 60],
-                    name : '李四'
+                    name : '李四',
+                    itemStyle: {
+                        normal: {
+                            lineStyle: {
+                                type: 'dashed'
+                            }
+                        }
+                    }
                 }
             ]
         }

diff --git a/doc/example/radar1.html b/doc/example/radar1.html
@@ -74,7 +74,7 @@
         subtext: '纯属虚构'
     },
     tooltip : {
-        trigger: 'item'
+        trigger: 'axis'
     },
     legend: {
         orient : 'vertical',
@@ -103,10 +103,6 @@
             ]
         }
     ],
-    color : [
-        'rgba(111,111,22, 0.5)',
-        'rgba(200,0,0,0.5)'
-    ],
     calculable : true,
     series : [
         {

diff --git a/doc/example/radar2.html b/doc/example/radar2.html
@@ -67,25 +67,16 @@
                 <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">
-indicator = [
-    {name : '进攻', max  : 100},
-    {name : '防守', max  : 100},
-    {name : '体能', max  : 100},
-    {name : '速度', max  : 100},
-    {name : '力量', max  : 100},
-    {name : '技巧', max  : 100}
-];
 option = {
     title : {
         text: '罗纳尔多 vs 舍普琴科',
         subtext: '完全实况球员数据'
     },
     tooltip : {
-        trigger: 'item'
+        trigger: 'axis'
     },
     legend: {
-        x : '320',
-        y : '50',
+        x : 'center',
         data:['罗纳尔多','舍普琴科']
     },
     toolbox: {
@@ -97,37 +88,39 @@
             saveAsImage : true
         }
     },
-    color : [
-        'rgba(111,111,22, 0.5)',
-        'rgba(200,0,0,0.5)',
-        'rgba(20,100,100,0.5)'
-    ],
     calculable : true,
     polar : [
         {
-            radius : 100,
-            center : [200, 200],
-            indicator : indicator
-        },
-        {
-            radius : 100,
-            center : [600, 200],
-            indicator : indicator
+            indicator : [
+                {name : '进攻', max  : 100},
+                {name : '防守', max  : 100},
+                {name : '体能', max  : 100},
+                {name : '速度', max  : 100},
+                {name : '力量', max  : 100},
+                {name : '技巧', max  : 100}
+            ],
+            radius : 130
         }
     ],
     series : [
         {
             name: '完全实况球员数据',
             type: 'radar',
+            itemStyle: {
+                normal: {
+                    areaStyle: {
+                        type: 'default'
+                    }
+                }
+            },
             data : [
                 {
-                    value : [97, 32, 74, 95, 88, 92],
-                    name : '罗纳尔多'
+                    value : [97, 42, 88, 94, 90, 86],
+                    name : '舍普琴科'
                 },
                 {
-                    value : [97, 42, 88, 94, 90, 86],
-                    name : '舍普琴科',
-                    polarIndex : 1
+                    value : [97, 32, 74, 95, 88, 92],
+                    name : '罗纳尔多'
                 }
             ]
         }