why echarts~ 1.1.0 release

README.md

@@ -2,15 +2,15 @@ ECharts
 =======
 http://ecomfe.github.com/echarts
 
-基于Canvas，纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据统计图表。创新的拖拽重计算、数据视图等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
+基于Canvas，纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
 
 **———— 大数据时代，重新定义数据图表的时候到了**
 
 Architecture
 ------------
 ECharts (Enterprise Charts 商业产品图表库)
 
-提供商业产品常用图表库，底层基于ZRender，创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图（区域图）、柱状图（条状图）、饼图（环形图），同时支持任意维度的堆积和多图表混合展现。
+提供商业产品常用图表库，底层基于<a href="http://ecomfe.github.io/zrender/" target="_blank">ZRender</a>，创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、地图、力导向布局图，同时支持任意维度的堆积和多图表混合展现。
 
 <img src="doc/asset/img/device.png" />
 <img src="doc/asset/img/explorer.png" />
@@ -19,18 +19,24 @@ ECharts (Enterprise Charts 商业产品图表库)
 ![ECharts Architecture](doc/asset/img/architecture.png)
 
 特色
+
+我们诚挚邀请你翻阅这份在线文档 《 <a href="http://ecomfe.github.io/echarts/doc/slide/whyEcharts.html" target="_blank">Why ECharts ?</a> 》 你可以从中更直观的体验到ECharts的特性以及快速浏览到所有图表类型。
+
+*文档中展现的个别特性在IE8-中并没有得到支持，所以建议使用IE9+、chrome、safari、firefox或opear等高级浏览器阅读这份文档。
+
 ----
 ### 混搭
-标准图库支持3种基本图表类型及其任意混搭：
+混搭的图表会更具表现力也更有有趣味，ECharts提供的图表（共7类11种）支持任意混搭：
 
-折线图line（包含区域图）、柱状图bar（包含横向条状图）、饼图pie。（散点图scatter、雷达图radar，暂不提供）
+折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、
+饼图（环形图）、地图、力导布局图。
 
-混搭情况下一个标准图表：包含唯一图例模块，一个直角坐标系（可包含一条或多条类目轴线，一条或多条值轴线，最多上下左右四条）
+混搭情况下一个标准图表：包含唯一图例、工具箱、数据区域缩放、值域漫游模块，一个直角坐标系（可包含一条或多条类目轴线，一条或多条值轴线，最多上下左右四条）
 
 ![ECharts 混搭](doc/asset/img/mix.jpg)
 
 ### 拖拽重计算
-拖拽重计算特性（已申请专利）带来了数据统计图表从未有过的用户体验，允许用户对统计数据进行有效的提取、整合，甚至在多个图表间交换数据，赋予了用户对数据进行挖掘、整合的能力。
+拖拽重计算特性（专利）带来了数据统计图表从未有过的用户体验，允许用户对统计数据进行有效的提取、整合，甚至在多个图表间交换数据，赋予了用户对数据进行挖掘、整合的能力。
 
 ![ECharts 拖拽重计算](doc/asset/img/draggable.gif)
 
@@ -51,6 +57,8 @@ ECharts提供了动态类型切换，让用户随心所欲的切换到他所需
 ![ECharts 动态类型切换](doc/asset/img/magicType.gif)
 
 ### 图例开关
+多系列数据的同时展现呈现出丰富内容，但如何让用户切换到他所关心的个别系列上？
+
 ECharts提供了方便快捷的图例开关，可以随时切换到你所关心的数据系列。
 
 ![ECharts 图例开关](doc/asset/img/legendSelected.gif)
@@ -60,6 +68,20 @@ ECharts提供了方便快捷的图例开关，可以随时切换到你所关心
 
 ![ECharts 数据区域选择](doc/asset/img/datazoom.gif)
 
+### 值域漫游
+基于坐标的图表（如地图、散点图）通过色彩变化表现数值的大小能直观形象的展示数据分布。
+
+但如何聚焦到我所关心的数值上？我们创造了称为值域漫游的功能，让你可以轻松进行数值筛选。
+
+![ECharts 数据区域选择](doc/asset/img/dataRange.gif)
+
+### 大规模散点图
+如何展现成千上百万的离散数据从而找出他们的分布和聚类？貌似除了用专业的统计工具（如MATLAB）外别无选择？
+
+不，ECharts发明了基于像素的大规模散点图（专利），一个900 x 400的散点区域就能够毫不重复的呈现35万组数据，这对于常规的应用，用现代浏览器就足以轻松展现百万级的散点数据！
+
+![ECharts 数据区域选择](doc/asset/img/scatter.gif)
+
 ### 标线辅助
 趋势线？平均线？未来走势？修正值？有需求用户自然知道用意~
 

doc/asset/js/echartsExample.js

@@ -65,7 +65,7 @@ require.config({
         {
             name: 'zrender',
             location: 'http://ecomfe.github.io/zrender/src',
-            location: '../../../zrender/src',
+            //location: '../../../zrender/src',
             main: 'zrender'
         }
     ]

doc/changelog.html

@@ -96,6 +96,7 @@ <h3>1.1.0</h3>
                     <li>饼图升级selected Mode，label支持formatter</li>
                     <li>图例升级为icon，折线图例有更形象的展现和更易点击</li>
                     <li>数值轴升级scale模式，可以脱离0值，聚焦到数值变化区间</li>
+                    <li>默认动画缓动效果从'BounceOut'改为'ExponentialOut'</li>
                 </ul>
             </div>
             <div>

doc/doc.html

@@ -153,7 +153,7 @@
                 </p>
                 <div id="doc">
                     <h3>简介<a name="简介"> </a></h3>
-                    <p>ECharts，纯Javascript图表库，基于Canvas，底层依赖<a href="http://ecomfe.github.io/zrender/" target="_blank">ZRender</a>，商业产品常用图表库，提供直观，生动，可交互，可个性化定制的数据统计图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。图表类型支持折线图（区域图）、柱状图（条状图）、饼图（环形图），同时支持任意维度的堆积和多图表混合展现。</P>
+                    <p>ECharts，纯Javascript图表库，基于Canvas，底层依赖<a href="http://ecomfe.github.io/zrender/" target="_blank">ZRender</a>，商业产品常用图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。图表类型支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、地图、力导向布局图，同时支持任意维度的堆积和多图表混合展现。</P>
                     <img src="asset/img/architecture.png" />
                     <h3>名词解析<a name="名词解析"> </a></h3>
                     <p>基本名词</p>
@@ -223,24 +223,24 @@ <h3>名词解析<a name="名词解析"> </a></h3>
                         </tr>
                         <tr>
                             <td> scatter </td>
-                            <td> 散点图，气泡图</td>
+                            <td> 散点图，气泡图，大规模散点图</td>
                         </tr>
                         <tr>
                             <td> k </td>
-                            <td> K线图</td>
+                            <td> K线图，蜡烛图，</td>
                         </tr>
                         <tr>
                             <td> pie </td>
                             <td> 饼图，圆环图 </td>
                         </tr>
-                        <tr>
-                            <td> radar </td>
-                            <td> 雷达图，填充雷达图（暂不支持） </td>
-                        </tr>
                         <tr>
                             <td> map </td>
                             <td> 地图（暂时仅支持中国地图） </td>
                         </tr>
+                        <tr>
+                            <td> force </td>
+                            <td> 力导布局图 </td>
+                        </tr>
                     </table>
                     <h3>图表类型<a name="图表类型"> </a></h3>
                     <P> 图表库标准包含单图表类型的标准图表以及多图表类型混合的混搭图表：</P>
@@ -727,11 +727,11 @@ <h4>toolbox<a name="Toolbox"> </a></h4>
                     <div class="code">
                     <pre>
 feature : {
-    mark : true,                    // 辅助线标志
-    dataZoom : true,                // 框选区域缩放，自动与存在的dataZoom控件同步
-    dataView : true,                // 数据视图
-    magicType:['line', 'bar'],      // 图表类型切换，当前仅支持直角系下的折线图、柱状图转换
-    restore : true                  // 还原，复位原始图表
+    mark : true,                    // 辅助线标志，上图icon左数1/2/3，分别是启用，删除上一条，删除全部
+    dataZoom : true,                // 框选区域缩放，自动与存在的dataZoom控件同步，上图icon左数4/5，分别是启用，缩放后退
+    magicType:['line', 'bar'],      // 图表类型切换，当前仅支持直角系下的折线图、柱状图转换，上图icon左数6/7，分别是切换折线图，切换柱形图
+    dataView : true,                // 数据视图，上图icon左数8，打开数据视图
+    restore : true                  // 还原，复位原始图表，上图icon左数9，还原
 }
                     </pre>
                     </div>
@@ -865,7 +865,7 @@ <h4>tooltip<a name="Tooltip"> </a></h4>
                     </table>
 
                     <h4>dataZoom<a name="DataZoom"> </a></h4>
-                    <P> 数据区域缩放。仅对直角坐标系图表有效。<a href="example/dataZoom.html" target="_blank">try this »</a></P>
+                    <P> 数据区域缩放。与toolbox.feature.dataZoom同步，仅对直角坐标系图表有效。<a href="example/dataZoom.html" target="_blank">try this »</a></P>
                     <table cellspacing="0" class="ADoc_table full">
                         <tr>
                             <th> 名称 </th>
@@ -953,6 +953,7 @@ <h4>dataZoom<a name="DataZoom"> </a></h4>
                             <td> 数据缩放锁，默认为false，当设置为true时选择区域不能伸缩，即(end - start)值保持不变，仅能做数据漫游。</td>
                         </tr>
                     </table>
+                    <p><img src="./asset/img/doc/dataZoom.png" title="" alt="工具箱"/></P>
 
                     <h4>grid<a name="Grid"> </a></h4>
                     <P> 直角坐标系内绘图网格</P>

doc/slide/css/echarts-slide.css

@@ -0,0 +1,189 @@
+table {
+  max-width: 100%;
+  background-color: transparent;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+.table {
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.table th,
+.table td {
+  padding: 8px;
+  line-height: 20px;
+  text-align: left;
+  vertical-align: top;
+  border-top: 1px solid #fff;
+}
+
+.table th {
+  font-weight: bold;
+}
+
+.table thead th {
+  vertical-align: bottom;
+}
+
+.table caption + thead tr:first-child th,
+.table caption + thead tr:first-child td,
+.table colgroup + thead tr:first-child th,
+.table colgroup + thead tr:first-child td,
+.table thead:first-child tr:first-child th,
+.table thead:first-child tr:first-child td {
+  border-top: 0;
+}
+
+.table tbody + tbody {
+  border-top: 2px solid #fff;
+}
+
+.table .table {
+  background-color: #666;
+}
+
+.table-condensed th,
+.table-condensed td {
+  padding: 4px 5px;
+}
+
+.table-bordered {
+  border: 1px solid #fff !important;
+  border-collapse: separate;
+  *border-collapse: collapse;
+  border-left: 0;
+  -webkit-border-radius: 4px;
+     -moz-border-radius: 4px;
+          border-radius: 4px;
+}
+
+.table-bordered th,
+.table-bordered td {
+  border-left: 1px solid #fff;
+}
+
+.table-bordered caption + thead tr:first-child th,
+.table-bordered caption + tbody tr:first-child th,
+.table-bordered caption + tbody tr:first-child td,
+.table-bordered colgroup + thead tr:first-child th,
+.table-bordered colgroup + tbody tr:first-child th,
+.table-bordered colgroup + tbody tr:first-child td,
+.table-bordered thead:first-child tr:first-child th,
+.table-bordered tbody:first-child tr:first-child th,
+.table-bordered tbody:first-child tr:first-child td {
+  border-top: 0;
+}
+
+.table-bordered thead:first-child tr:first-child > th:first-child,
+.table-bordered tbody:first-child tr:first-child > td:first-child,
+.table-bordered tbody:first-child tr:first-child > th:first-child {
+  -webkit-border-top-left-radius: 4px;
+          border-top-left-radius: 4px;
+  -moz-border-radius-topleft: 4px;
+}
+
+.table-bordered thead:first-child tr:first-child > th:last-child,
+.table-bordered tbody:first-child tr:first-child > td:last-child,
+.table-bordered tbody:first-child tr:first-child > th:last-child {
+  -webkit-border-top-right-radius: 4px;
+          border-top-right-radius: 4px;
+  -moz-border-radius-topright: 4px;
+}
+
+.table-bordered thead:last-child tr:last-child > th:first-child,
+.table-bordered tbody:last-child tr:last-child > td:first-child,
+.table-bordered tbody:last-child tr:last-child > th:first-child,
+.table-bordered tfoot:last-child tr:last-child > td:first-child,
+.table-bordered tfoot:last-child tr:last-child > th:first-child {
+  -webkit-border-bottom-left-radius: 4px;
+          border-bottom-left-radius: 4px;
+  -moz-border-radius-bottomleft: 4px;
+}
+
+.table-bordered thead:last-child tr:last-child > th:last-child,
+.table-bordered tbody:last-child tr:last-child > td:last-child,
+.table-bordered tbody:last-child tr:last-child > th:last-child,
+.table-bordered tfoot:last-child tr:last-child > td:last-child,
+.table-bordered tfoot:last-child tr:last-child > th:last-child {
+  -webkit-border-bottom-right-radius: 4px;
+          border-bottom-right-radius: 4px;
+  -moz-border-radius-bottomright: 4px;
+}
+
+.table-bordered tfoot + tbody:last-child tr:last-child td:first-child {
+  -webkit-border-bottom-left-radius: 0;
+          border-bottom-left-radius: 0;
+  -moz-border-radius-bottomleft: 0;
+}
+
+.table-bordered tfoot + tbody:last-child tr:last-child td:last-child {
+  -webkit-border-bottom-right-radius: 0;
+          border-bottom-right-radius: 0;
+  -moz-border-radius-bottomright: 0;
+}
+
+.table-bordered caption + thead tr:first-child th:first-child,
+.table-bordered caption + tbody tr:first-child td:first-child,
+.table-bordered colgroup + thead tr:first-child th:first-child,
+.table-bordered colgroup + tbody tr:first-child td:first-child {
+  -webkit-border-top-left-radius: 4px;
+          border-top-left-radius: 4px;
+  -moz-border-radius-topleft: 4px;
+}
+
+.table-bordered caption + thead tr:first-child th:last-child,
+.table-bordered caption + tbody tr:first-child td:last-child,
+.table-bordered colgroup + thead tr:first-child th:last-child,
+.table-bordered colgroup + tbody tr:first-child td:last-child {
+  -webkit-border-top-right-radius: 4px;
+          border-top-right-radius: 4px;
+  -moz-border-radius-topright: 4px;
+}
+
+.table-striped tbody > tr:nth-child(odd) > td,
+.table-striped tbody > tr:nth-child(odd) > th {
+  background-color: #666;
+}
+
+.table-hover tbody tr:hover > td,
+.table-hover tbody tr:hover > th {
+  background-color: #333;
+}
+
+.table tbody tr.success > td, .table tbody tr td.success {
+  background-color: #dff0d8;
+  color: #666;
+}
+
+.table tbody tr.error > td, .table tbody tr td.error {
+  background-color: #f2dede;
+  color: #666;
+}
+
+.table tbody tr.warning > td,.table tbody tr td.warning {
+  background-color: #fcf8e3;
+  color: #666;
+}
+
+.table tbody tr.info > td, .table tbody tr td.info {
+  background-color: #d9edf7;
+  color: #666;
+}
+
+.table-hover tbody tr.success:hover > td {
+  background-color: #d0e9c6;
+}
+
+.table-hover tbody tr.error:hover > td {
+  background-color: #ebcccc;
+}
+
+.table-hover tbody tr.warning:hover > td {
+  background-color: #faf2cc;
+}
+
+.table-hover tbody tr.info:hover > td {
+  background-color: #c4e3f3;
+}