You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by ov...@apache.org on 2020/06/19 05:16:36 UTC
[incubator-echarts-handbook] branch master updated (b6a9b9b ->
463402c)
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a change to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-handbook.git.
from b6a9b9b docs: add bar contents
new d9fdfc9 doc: update contents
new 463402c merge
The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
Summary of changes:
contents/zh/application/cross-platform.md | 1 -
.../zh/application/cross-platform/baidu-app.md | 19 ++
contents/zh/application/cross-platform/server.md | 12 +
.../zh/application/cross-platform/wechat-app.md | 21 ++
contents/zh/basics/inspiration.md | 6 +
contents/zh/basics/resource.md | 12 +
contents/zh/best-practice/aria.md | 60 +++++
contents/zh/best-practice/canvas-vs-svg.md | 51 +++++
contents/zh/concepts/event.md | 253 +++++++++++++++++++++
contents/zh/posts.js | 74 +++---
10 files changed, 480 insertions(+), 29 deletions(-)
delete mode 100644 contents/zh/application/cross-platform.md
create mode 100644 contents/zh/application/cross-platform/baidu-app.md
create mode 100644 contents/zh/application/cross-platform/server.md
create mode 100644 contents/zh/application/cross-platform/wechat-app.md
create mode 100644 contents/zh/best-practice/aria.md
create mode 100644 contents/zh/best-practice/canvas-vs-svg.md
create mode 100644 contents/zh/concepts/event.md
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[incubator-echarts-handbook] 02/02: merge
Posted by ov...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-handbook.git
commit 463402c011375e0977fbe1a6d5cc949b8da7fb6f
Merge: d9fdfc9 b6a9b9b
Author: Ovilia <zw...@gmail.com>
AuthorDate: Fri Jun 19 13:16:19 2020 +0800
merge
.../chart-specificatio/bar/basic-bar.md | 45 ++++++++++++++++++++
.../chart-specificatio/bar/bi-directional-bar.md | 32 ++++++++++++++
.../chart-specificatio/bar/grouped-bar.md | 20 +++++++++
.../chart-specificatio/bar/stacked-bar.md | 22 ++++++++++
.../best-practice/chart-specificatio/line/area.md | 24 +++++++++++
.../chart-specificatio/line/basic-line.md | 36 ++++++++++++++++
.../chart-specificatio/line/stacked-area.md | 46 +++++++++++++++++++++
contents/zh/posts.js | 33 +++++++++++++++
pages/helper/contributors.ts | 23 ++++++++++-
static/images/design/bar/bar01.jpg | Bin 0 -> 84318 bytes
static/images/design/bar/bar02.jpg | Bin 0 -> 75564 bytes
static/images/design/bar/bar03.jpg | Bin 0 -> 91679 bytes
static/images/design/bar/bar04.jpg | Bin 0 -> 70479 bytes
.../bi-directional-bar/bi-directional-bar01.jpg | Bin 0 -> 75564 bytes
.../bi-directional-bar/bi-directional-bar02.jpg | Bin 0 -> 86140 bytes
static/images/design/line/line01.jpg | Bin 0 -> 89525 bytes
16 files changed, 280 insertions(+), 1 deletion(-)
diff --cc contents/zh/posts.js
index cb53e4a,18b5808..93bc8d0
--- a/contents/zh/posts.js
+++ b/contents/zh/posts.js
@@@ -163,16 -150,44 +163,49 @@@ export default [
title: '最佳实践',
dir: 'best-practice',
children: [{
- title: '移动端优化',
- dir: 'mobile'
- },{
+ title: '移动端优化',
+ dir: 'mobile'
+ }, {
+ title: 'Canvas vs. SVG',
+ dir: 'canvas-vs-svg'
+ }, {
+ title: '无障碍访问',
+ dir: 'aria'
+ }, {
title: '可视化设计原则',
dir: 'design'
- }, {
++ }, {
+ title: '可视化规范',
+ dir: 'chart-specificatio',
+ children: [{
+ title: '折线图',
- dir: 'line',
- children: [{
- title: '基础折线图',
- dir: 'basic-line'
- }, {
- title: '面积图',
- dir: 'area'
- }, {
- title: '堆叠面积图',
- dir: 'stacked-area'
- }]
- },
- {
- title: '柱状图',
- dir: 'bar',
- children: [{
- title: '基础柱状图',
- dir: 'basic-bar'
- }, {
++ dir: 'line',
++ children: [{
++ title: '基础折线图',
++ dir: 'basic-line'
++ }, {
++ title: '面积图',
++ dir: 'area'
++ }, {
++ title: '堆叠面积图',
++ dir: 'stacked-area'
++ }]
++ }, {
++ title: '柱状图',
++ dir: 'bar',
++ children: [{
++ title: '基础柱状图',
++ dir: 'basic-bar'
++ }, {
+ title: '堆叠柱状图',
+ dir: 'stacked-bar'
- }, {
++ }, {
+ title: '双向柱状图',
+ dir: 'bi-directiona-bar'
- }, {
++ }, {
+ title: '分组柱状图',
+ dir: 'grouped-bar'
+ }]
- },]
++ }]
}]
-}]
+}];
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[incubator-echarts-handbook] 01/02: doc: update contents
Posted by ov...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-handbook.git
commit d9fdfc9330781bcae6cf74f1846b37bdc1e41560
Author: Ovilia <zw...@gmail.com>
AuthorDate: Fri Jun 19 12:55:48 2020 +0800
doc: update contents
---
contents/zh/application/cross-platform.md | 1 -
.../zh/application/cross-platform/baidu-app.md | 19 ++
contents/zh/application/cross-platform/server.md | 12 +
.../zh/application/cross-platform/wechat-app.md | 21 ++
contents/zh/basics/inspiration.md | 6 +
contents/zh/basics/resource.md | 12 +
contents/zh/best-practice/aria.md | 60 +++++
contents/zh/best-practice/canvas-vs-svg.md | 51 +++++
contents/zh/concepts/event.md | 253 +++++++++++++++++++++
contents/zh/posts.js | 21 +-
10 files changed, 454 insertions(+), 2 deletions(-)
diff --git a/contents/zh/application/cross-platform.md b/contents/zh/application/cross-platform.md
deleted file mode 100644
index 3979538..0000000
--- a/contents/zh/application/cross-platform.md
+++ /dev/null
@@ -1 +0,0 @@
-# 跨平台方案
\ No newline at end of file
diff --git a/contents/zh/application/cross-platform/baidu-app.md b/contents/zh/application/cross-platform/baidu-app.md
new file mode 100644
index 0000000..55e13c1
--- /dev/null
+++ b/contents/zh/application/cross-platform/baidu-app.md
@@ -0,0 +1,19 @@
+# 在百度智能小程序中使用 ECharts
+
+[ECharts 图表-beta](http://smartprogram.baidu.com/docs/develop/framework/echarts/) 以小程序动态库的形式提供了在百度智能小程序中使用 ECharts 的方式。
+
+[aidu-smart-app-echarts-demo](https://github.com/baidu-smart-app/baidu-smart-app-echarts-demo) 项目是使用该动态库的一个示例工程，可以作为参考，一般情况下不需要引入自己的项目。
+
+如有使用上的问题，可以在 [baidu-smart-app-echarts-demo/issues](https://github.com/baidu-smart-app/baidu-smart-app-echarts-demo/issues) 中咨询。
+
+
+## 使用方式
+
+参见百度智能小程序文档 [ECharts 图表-beta](http://smartprogram.baidu.com/docs/develop/framework/echarts/)。
+
+
+## 注意事项
+
+百度智能小程序上的 ECharts 以动态库的形式开放，因此开发者的使用方式与[在微信小程序中使用 ECharts](./zh/application_cross-platform_wechat-app) 不太相同。尤其需要注意的是，前者需要在指定动态库名称的时候确定 ECharts 的版本号，而不能自行更换或使用自定义构建。这一点是由底层框架的技术实现决定的。具体来说，在指定百度智能小程序动态库名称的时候，需要通过 `provider` 指定动态库名称，具体参见[文档](http://smartprogram.baidu.com/docs/develop/framework/echarts/)的「在项目中引用动态库」章节。
+
+请务必查看[文档](http://smartprogram.baidu.com/docs/develop/framework/echarts/)的「兼容性说明」以了解各功能的实现方式。
diff --git a/contents/zh/application/cross-platform/server.md b/contents/zh/application/cross-platform/server.md
new file mode 100644
index 0000000..c0f7907
--- /dev/null
+++ b/contents/zh/application/cross-platform/server.md
@@ -0,0 +1,12 @@
+# ECharts 服务端渲染
+
+ECharts 可以在服务端进行渲染。例如[官方示例](${mainSitePath}/examples/zh/index.html)里的一个个小截图，就是在服务端预生成出来的。
+
+服务端渲染可以使用流行的 headless 环境，例如 [puppeteer](https://github.com/GoogleChrome/puppeteer)、[headless chrome](https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md)、[node-canvas](https://github.com/Automattic/node-canvas)、[jsdom](https://github.com/jsdom/jsdom)、[PhantomJS](http://phantomjs.org/) 等。
+
+这是一些社区贡献的 ECharts 服务端渲染方案：
+
+- [https://github.com/hellosean1025/node-echarts](https://github.com/hellosean1025/node-echarts)
+- [https://github.com/chfw/echarts-scrappeteer](https://github.com/chfw/echarts-scrappeteer)
+- [https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js](https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js)
+- [https://gist.github.com/pissang/4c32ee30e35c91336af72b129a1a4a73](https://gist.github.com/pissang/4c32ee30e35c91336af72b129a1a4a73)
diff --git a/contents/zh/application/cross-platform/wechat-app.md b/contents/zh/application/cross-platform/wechat-app.md
new file mode 100644
index 0000000..332d189
--- /dev/null
+++ b/contents/zh/application/cross-platform/wechat-app.md
@@ -0,0 +1,21 @@
+# 在微信小程序中使用 ECharts
+
+[echarts-for-weixin](https://github.com/ecomfe/echarts-for-weixin) 项目提供了一个小程序组件，用这种方式可以方便地使用 ECharts。
+
+
+## 使用方式
+
+1. 下载该项目
+2. 如有必要，将 `ec-canvas` 目录下的 `echarts.js` 替换为最新版的 ECharts。如果希望减小包体积大小，可以使用[自定义构建](${mainSitePath}/build.html)生成并替换 `echarts.js`
+3. `pages` 目录下是使用的示例文件，可以作为参考，或者删除不需要的页面。
+
+更详细的说明请参见 [echarts-for-weixin](https://github.com/ecomfe/echarts-for-weixin) 项目。
+
+
+## 注意事项
+
+最新版的 ECharts 微信小程序支持微信 Canvas 2d，当用户的基础库版本 >= 2.9.0 且没有设置 `force-use-old-canvas="true"` 的情况下，使用新的 Canvas 2d（默认）。
+
+使用新的 Canvas 2d 可以提升渲染性能，解决非同层渲染问题，强烈建议开启。
+
+更详细的说明请参见 [Canvas 2d 版本要求](https://github.com/ecomfe/echarts-for-weixin#canvas-2d-%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82)。
diff --git a/contents/zh/basics/inspiration.md b/contents/zh/basics/inspiration.md
index f96933e..9823ebd 100644
--- a/contents/zh/basics/inspiration.md
+++ b/contents/zh/basics/inspiration.md
@@ -1 +1,7 @@
# 获取灵感
+
+当你有“不知道图表应该设计成什么样”或者“不知道如何使用 ECharts 实现某种效果”的疑问的时候，以下列表可以提供一些思路。
+
+- [ECharts 官方实例](${mainSitePath}/examples/zh/index.html)
+- [ECharts Gallery](https://gallery.echartsjs.com/)
+- 本手册的“应用篇 - 常用图表类型”
diff --git a/contents/zh/basics/resource.md b/contents/zh/basics/resource.md
index 88fb670..2531681 100644
--- a/contents/zh/basics/resource.md
+++ b/contents/zh/basics/resource.md
@@ -1 +1,13 @@
# 资源列表
+
+## 官方
+
+- [API](${mainSitePath}api.html)
+- [配置项手册](${mainSitePath}option.html)
+- [官方实例](${mainSitePath}examples/zh/index.html)
+- [术语速查手册](${mainSitePath}cheat-sheet.html)
+
+## 社区
+
+- [ECharts Gallery](https://gallery.echartsjs.com/)：社区用户的作品集
+- [awesome-echarts](https://github.com/ecomfe/awesome-echarts)：各种 ECharts 相关的资源，包括 AngularJS、Vue 等框架的支持，Java、Python、R 等语言的 ECharts 版本，ECharts VSCode 插件等工具
diff --git a/contents/zh/best-practice/aria.md b/contents/zh/best-practice/aria.md
new file mode 100644
index 0000000..8d1d537
--- /dev/null
+++ b/contents/zh/best-practice/aria.md
@@ -0,0 +1,60 @@
+# 无障碍访问
+
+W3C 制定了无障碍富互联网应用规范集（[WAI-ARIA](https://www.w3.org/WAI/intro/aria)，the Accessible Rich Internet Applications Suite），致力于使得网页内容和网页应用能够被更多残障人士访问。ECharts 4.0 遵从这一规范，支持自动根据图表配置项智能生成描述，使得盲人可以在朗读设备的帮助下了解图表内容，让图表可以被更多人群访问。
+
+默认关闭，需要通过将 [aria.show](${optionPath}aria.show) 设置为 `true` 开启。开启后，会根据图表、数据、标题等情况，自动智能生成关于图表的描述，用户也可以通过配置项修改描述。
+
+对于配置项：
+
+```js
+option = {
+ aria: {
+ show: true
+ },
+ title: {
+ text: '某站点用户访问来源',
+ x: 'center'
+ },
+ series: [
+ {
+ name: '访问来源',
+ type: 'pie',
+ data: [
+ { value: 335, name: '直接访问' },
+ { value: 310, name: '邮件营销' },
+ { value: 234, name: '联盟广告' },
+ { value: 135, name: '视频广告' },
+ { value: 1548, name: '搜索引擎' }
+ ]
+ }
+ ]
+};
+```
+
+<iframe width="700" height="300" src="${galleryViewPath}doc-example/aria-pie&reset=1&edit=1"></iframe>
+
+生成的图表 DOM 上，会有一个 `aria-label` 属性，在朗读设备的帮助下，盲人能够了解图表的内容。其值为：
+
+```
+这是一个关于“某站点用户访问来源”的图表。图表类型是饼图，表示访问来源。其数据是——直接访问的数据是335，邮件营销的数据是310，联盟广告的数据是234，视频广告的数据是135，搜索引擎的数据是1548。
+```
+
+## 整体修改描述
+
+对于有些图表，默认生成的数据点的描述并不足以表现整体的信息。比如下图的散点图，默认生成的描述可以包含数据点的坐标值，但是知道几百几千个点的坐标并不能帮助我们有效地理解图表表达的信息。
+
+
+
+这时候，用户可以通过 [aria.description](${optionPath}aria.description) 配置项指定图表的整体描述。
+
+## 定制模板描述
+
+除了整体性修改描述之外，我们还提供了生成描述的模板，可以方便地进行细粒度的修改。
+
+生成描述的基本流程为，如果 [aria.show](${optionPath}aria.show) 设置为 `true`，则生成无障碍访问描述，否则不生成。如果定义了 [aria.description](${optionPath}aria.description)，则将其作为图表的完整描述，否则根据模板拼接生成描述。我们提供了默认的生成描述的算法，仅当生成的描述不太合适时，才需要修改这些模板，甚至使用 `aria.description` 完全覆盖。
+
+使用模板拼接时，先根据是否存在标题 [title.text](${optionPath}title.text) 决定使用 [aria.general.withTitle](${optionPath}aria.general.withTitle) 还是 [aria.general.withoutTitle](${optionPath}aria.general.withoutTitle) 作为整体性描述。其中，`aria.general.withTitle` 配置项包括模板变量 `'{title}'`，将会被替换成图表标题。也就是说，如果 `aria.general.withTitle` 被设置为 `'图表的标题是：{title}。'`，则如果包含标题 `'价格分布图'`，这部分的描述为 `'图表的标题是：价格分布图。'`。
+
+拼接完标题之后，会依次拼接系列的描述（[aria.series](${optionPath}aria.series)），和每个系列的数据的描述（[aria.data](${optionPath}aria.data)）。同样，每个模板都有可能包括模板变量，用以替换实际的值。
+
+完整的描述生成流程请参见 [ARIA 文档](${optionPath}aria)。
diff --git a/contents/zh/best-practice/canvas-vs-svg.md b/contents/zh/best-practice/canvas-vs-svg.md
new file mode 100644
index 0000000..c4568ec
--- /dev/null
+++ b/contents/zh/best-practice/canvas-vs-svg.md
@@ -0,0 +1,51 @@
+# 使用 Canvas 或者 SVG 渲染
+
+浏览器端图表库大多会选择 SVG 或者 Canvas 进行渲染。对于绘制图表来说，这两种技术往往是可替换的，效果相近。但是在一些场景中，他们的表现和能力又有一定差异。于是，对它们的选择取舍，就成为了一个一直存在的不易有标准答案的话题。
+
+ECharts 从初始一直使用 Canvas 绘制图表（除了对 IE8- 使用 VML）。而 [ECharts v4.0](https://github.com/apache/incubator-echarts/releases) 发布了 SVG 渲染器，从而提供了一种新的选择。只须在初始化一个图表实例时，设置 [renderer 参数](http://echarts.baidu.com/api.html#echarts.init) 为 `'canvas'` 或 `'svg'` 即可指定渲染器，比较方便。
+
+> SVG 和 Canvas 这两种使用方式差异很大的技术，能够做到同时被透明支持，主要归功于 ECharts 底层库 [ZRender](https://github.com/ecomfe/zrender) 的抽象和实现，形成可互换的 SVG 渲染器和 Canvas 渲染器。
+
+## 选择哪种渲染器
+
+一般来说，Canvas 更适合绘制图形元素数量非常大（这一般是由数据量大导致）的图表（如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等），也利于实现某些视觉 [特效](examples/editor.html?c=lines-bmap-effect)。但是，在不少场景中，SVG 具有重要的优势：它的内存占用更低（这对移动端尤其重要）、渲染性能略高、并且用户使用浏览器内置的缩放功能时不会模糊。例如，我们在一些硬件环境中分别使用 Canvas 渲染器和 SVG 渲染器绘制中等数据量的折、柱、饼，统计初始动画阶段的帧率，得到了一个性能对比图：
+
+<iframe width="600" height="400" src="${galleryViewPath}doc-example/canvas-vs-svg&reset=1&edit=1"></iframe>
+
+上图显示出，在这些场景中，SVG 渲染器相比 Canvas 渲染器在移动端的总体表现更好。当然，这个实验并非是全面的评测，在另一些数据量较大或者有图表交互动画的场景中，目前的 SVG 渲染器的性能还比不过 Canvas 渲染器。但是同时有这两个选项，为开发者们根据自己的情况优化性能提供了更广阔的空间。
+
+选择哪种渲染器，我们可以根据软硬件环境、数据量、功能需求综合考虑。
++ 在软硬件环境较好，数据量不大的场景下（例如 PC 端做商务报表），两种渲染器都可以适用，并不需要太多纠结。
++ 在环境较差，出现性能问题需要优化的场景下，可以通过试验来确定使用哪种渲染器。比如有这些经验：
+ + 在须要创建很多 ECharts 实例且浏览器易崩溃的情况下（可能是因为 Canvas 数量多导致内存占用超出手机承受能力），可以使用 SVG 渲染器来进行改善。大略得说，如果图表运行在低端安卓机，或者我们在使用一些特定图表如 [水球图](https://ecomfe.github.io/echarts-liquidfill/example/) 等，SVG 渲染器可能效果更好。
+ + 数据量很大、较多交互时，可以选用 Canvas 渲染器。
+
+我们强烈欢迎开发者们[反馈](https://github.com/apache/incubator-echarts/issues/new)给我们使用的体验和场景，帮助我们更好的做优化。
+
+
+注：除了某些特殊的渲染可能依赖 Canvas：如[炫光尾迹特效](option.html#series-lines.effect)、[带有混合效果的热力图](examples/editor.html?c=heatmap-bmap)等，绝大部分功能 SVG 都是支持的。此外，目前的 SVG 版中，富文本、材质功能尚未实现。
+
+
+## 如何使用渲染器
+
+ECharts 默认使用 Canvas 渲染。如果想使用 SVG 渲染，ECharts 代码中须包括有 SVG 渲染器模块。
+
+- ECharts 的[预构建文件](https://www.jsdelivr.com/package/npm/echarts) 中，[常用版](https://cdn.jsdelivr.net/npm/echarts/dist/echarts.common.min.js) 和 [完整版](https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js) 已经包含了 SVG 渲染器，可直接使用。而 [精简版](https://cdn.jsdelivr.net/npm/echarts/dist/echarts.simple.min.js) 没有包括。
+- 如果[在线自定义构建 ECharts](builder.html)，则需要勾上页面下方的 “SVG 渲染”。
+- 如果[线下自定义构建 ECharts](tutorial.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%9E%84%E5%BB%BA%20ECharts)，则须引入 SVG 渲染器模块，即：
+
+```js
+import 'zrender/lib/svg/svg';
+```
+
+然后，我们就可以在代码中，初始化图表实例时，[传入参数](api.html#echarts.init) 选择渲染器类型：
+
+```js
+// 使用 Canvas 渲染器（默认）
+var chart = echarts.init(containerDom, null, {renderer: 'canvas'});
+// 等价于：
+var chart = echarts.init(containerDom);
+
+// 使用 SVG 渲染器
+var chart = echarts.init(containerDom, null, {renderer: 'svg'});
+```
diff --git a/contents/zh/concepts/event.md b/contents/zh/concepts/event.md
new file mode 100644
index 0000000..4969816
--- /dev/null
+++ b/contents/zh/concepts/event.md
@@ -0,0 +1,253 @@
+# 事件与行为
+
+在 ECharts 的图表中用户的操作将会触发相应的事件。开发者可以监听这些事件，然后通过回调函数做相应的处理，比如跳转到一个地址，或者弹出对话框，或者做数据下钻等等。
+
+从 ECharts 3 开始，绑定事件跟 2 一样都是通过 [on](${mainSitePath}api.html#EChartsInstance.on) 方法，但是事件名称比 2 更加简单了。从 ECharts 3 开始，事件名称对应 DOM 事件名称，均为小写的字符串，如下是一个绑定点击操作的示例。
+
+```js
+myChart.on('click', function (params) {
+ // 控制台打印数据的名称
+ console.log(params.name);
+});
+```
+
+在 ECharts 中事件分为两种类型，一种是用户鼠标操作点击，或者 hover 图表的图形时触发的事件，还有一种是用户在使用可以交互的组件后触发的行为事件，例如在切换图例开关时触发的 ['legendselectchanged'](${mainSitePath}api.html#events.legendselectchanged) 事件（这里需要注意切换图例开关是不会触发 `'legendselected'` 事件的），数据区域缩放时触发的 ['datazoom'](${mainSitePath}api.html#events.legendselectchanged) 事件等等。
+
+## 鼠标事件的处理
+
+ECharts 支持常规的鼠标事件类型，包括 `'click'`、 `'dblclick'`、 `'mousedown'`、 `'mousemove'`、 `'mouseup'`、 `'mouseover'`、 `'mouseout'`、 `'globalout'`、 `'contextmenu'` 事件。下面先来看一个简单的点击柱状图后打开相应的百度搜索页面的示例。
+
+```js
+// 基于准备好的dom，初始化ECharts实例
+var myChart = echarts.init(document.getElementById('main'));
+
+// 指定图表的配置项和数据
+var option = {
+ xAxis: {
+ data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
+ },
+ yAxis: {},
+ series: [{
+ name: '销量',
+ type: 'bar',
+ data: [5, 20, 36, 10, 10, 20]
+ }]
+};
+// 使用刚指定的配置项和数据显示图表。
+myChart.setOption(option);
+// 处理点击事件并且跳转到相应的百度搜索页面
+myChart.on('click', function (params) {
+ window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
+});
+```
+
+所有的鼠标事件包含参数 `params`，这是一个包含点击图形的数据信息的对象，如下格式：
+
+```js
+{
+ // 当前点击的图形元素所属的组件名称，
+ // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
+ componentType: string,
+ // 系列类型。值可能为：'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。
+ seriesType: string,
+ // 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。
+ seriesIndex: number,
+ // 系列名称。当 componentType 为 'series' 时有意义。
+ seriesName: string,
+ // 数据名，类目名
+ name: string,
+ // 数据在传入的 data 数组中的 index
+ dataIndex: number,
+ // 传入的原始数据项
+ data: Object,
+ // sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data，
+ // dataType 的值会是 'node' 或者 'edge'，表示当前点击在 node 还是 edge 上。
+ // 其他大部分图表中只有一种 data，dataType 无意义。
+ dataType: string,
+ // 传入的数据值
+ value: number|Array
+ // 数据图形的颜色。当 componentType 为 'series' 时有意义。
+ color: string
+}
+```
+
+如何区分鼠标点击到了哪里：
+
+```js
+myChart.on('click', function (params) {
+ if (params.componentType === 'markPoint') {
+ // 点击到了 markPoint 上
+ if (params.seriesIndex === 5) {
+ // 点击到了 index 为 5 的 series 的 markPoint 上。
+ }
+ }
+ else if (params.componentType === 'series') {
+ if (params.seriesType === 'graph') {
+ if (params.dataType === 'edge') {
+ // 点击到了 graph 的 edge（边）上。
+ }
+ else {
+ // 点击到了 graph 的 node（节点）上。
+ }
+ }
+ }
+});
+```
+
+使用 `query` 只对指定的组件的图形元素的触发回调：
+
+```js
+chart.on(eventName, query, handler);
+```
+
+`query` 可为 `string` 或者 `Object`。
+
+如果为 `string` 表示组件类型。格式可以是 'mainType' 或者 'mainType.subType'。例如：
+
+```js
+chart.on('click', 'series', function () {...});
+chart.on('click', 'series.line', function () {...});
+chart.on('click', 'dataZoom', function () {...});
+chart.on('click', 'xAxis.category', function () {...});
+```
+
+如果为 `Object`，可以包含以下一个或多个属性，每个属性都是可选的：
+```js
+{
+ <mainType>Index: number // 组件 index
+ <mainType>Name: string // 组件 name
+ <mainType>Id: string // 组件 id
+ dataIndex: number // 数据项 index
+ name: string // 数据项 name
+ dataType: string // 数据项 type，如关系图中的 'node', 'edge'
+ element: string // 自定义系列中的 el 的 name
+}
+```
+
+例如：
+
+```js
+chart.setOption({
+ // ...
+ series: [{
+ name: 'uuu'
+ // ...
+ }]
+});
+chart.on('mouseover', {seriesName: 'uuu'}, function () {
+ // series name 为 'uuu' 的系列中的图形元素被 'mouseover' 时，此方法被回调。
+});
+```
+
+例如：
+
+```js
+chart.setOption({
+ // ...
+ series: [{
+ // ...
+ }, {
+ // ...
+ data: [
+ {name: 'xx', value: 121},
+ {name: 'yy', value: 33}
+ ]
+ }]
+});
+chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function () {
+ // series index 1 的系列中的 name 为 'xx' 的元素被 'mouseover' 时，此方法被回调。
+});
+```
+
+例如：
+
+```js
+chart.setOption({
+ // ...
+ series: [{
+ type: 'graph',
+ nodes: [{name: 'a', value: 10}, {name: 'b', value: 20}],
+ edges: [{source: 0, target: 1}]
+ }]
+});
+chart.on('click', {dataType: 'node'}, function () {
+ // 关系图的节点被点击时此方法被回调。
+});
+chart.on('click', {dataType: 'edge'}, function () {
+ // 关系图的边被点击时此方法被回调。
+});
+```
+
+例如：
+
+```js
+chart.setOption({
+ // ...
+ series: {
+ // ...
+ type: 'custom',
+ renderItem: function (params, api) {
+ return {
+ type: 'group',
+ children: [{
+ type: 'circle',
+ name: 'my_el',
+ // ...
+ }, {
+ // ...
+ }]
+ }
+ },
+ data: [[12, 33]]
+ }
+})
+chart.on('mouseup', {element: 'my_el'}, function () {
+ // name 为 'my_el' 的元素被 'mouseup' 时，此方法被回调。
+});
+```
+
+你可以在回调函数中获得这个对象中的数据名、系列名称后在自己的数据仓库中索引得到其它的信息候更新图表，显示浮层等等，如下示例代码：
+
+```js
+myChart.on('click', function (parmas) {
+ $.get('detail?q=' + params.name, function (detail) {
+ myChart.setOption({
+ series: [{
+ name: 'pie',
+ // 通过饼图表现单个柱子中的数据分布
+ data: [detail.data]
+ }]
+ });
+ });
+});
+```
+
+## 组件交互的行为事件
+
+在 ECharts 中基本上所有的组件交互行为都会触发相应的事件，常用的事件和事件对应参数在 [events](${mainSitePath}/api.html#events) 文档中有列出。
+
+下面是监听一个图例开关的示例：
+
+```js
+// 图例开关的行为只会触发 legendselectchanged 事件
+myChart.on('legendselectchanged', function (params) {
+ // 获取点击图例的选中状态
+ var isSelected = params.selected[params.name];
+ // 在控制台中打印
+ console.log((isSelected ? '选中了' : '取消选中了') + '图例' + params.name);
+ // 打印所有图例的状态
+ console.log(params.selected);
+});
+```
+
+## 代码触发 ECharts 中组件的行为
+
+上面提到诸如 `'legendselectchanged'` 事件会由组件交互的行为触发，那除了用户的交互操作，有时候也会有需要在程序里调用方法触发图表的行为，诸如显示 tooltip，选中图例。
+
+在 ECharts 2 是通过 `myChart.component.tooltip.showTip` 这种形式调用相应的接口触发图表行为，入口很深，而且涉及到内部组件的组织。相对地，在 ECharts 3 里改为通过调用 `myChart.dispatchAction({ type: '' })` 触发图表行为，统一管理了所有动作，也可以方便地根据需要去记录用户的行为路径。
+
+常用的动作和动作对应参数在 [action](${mainSitePath}/api.html#action) 文档中有列出。
+
+下面示例演示了如何通过 `dispatchAction` 去轮流高亮饼图的每个扇形。
+
+<iframe width="600" height="400" src="${galleryViewPath}doc-example/pie-highlight&reset=1&edit=1"></iframe>
diff --git a/contents/zh/posts.js b/contents/zh/posts.js
index 167bc90..cb53e4a 100644
--- a/contents/zh/posts.js
+++ b/contents/zh/posts.js
@@ -58,6 +58,9 @@ export default [{
}, {
title: '提示框',
dir: 'tooltip'
+ }, {
+ title: '事件与行为',
+ dir: 'event'
}]
}, {
title: '应用篇',
@@ -132,7 +135,17 @@ export default [{
dir: 'mobile'
}, {
title: '跨平台方案',
- dir: 'cross-platform'
+ dir: 'cross-platform',
+ children: [{
+ title: '百度智能小程序',
+ dir: 'baidu-app'
+ }, {
+ title: '微信小程序',
+ dir: 'wechat-app'
+ }, {
+ title: '服务端渲染',
+ dir: 'server'
+ }]
}, {
title: '自定义构建',
dir: 'custom-build'
@@ -153,6 +166,12 @@ export default [{
title: '移动端优化',
dir: 'mobile'
}, {
+ title: 'Canvas vs. SVG',
+ dir: 'canvas-vs-svg'
+ }, {
+ title: '无障碍访问',
+ dir: 'aria'
+ }, {
title: '可视化设计原则',
dir: 'design'
}]
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org