You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2021/07/21 11:14:56 UTC
[echarts-handbook] branch master updated: en: fix dynamic-data and
event
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/echarts-handbook.git
The following commit(s) were added to refs/heads/master by this push:
new f036b7e en: fix dynamic-data and event
f036b7e is described below
commit f036b7e512c261728f54835f75eb7b0db8a05b30
Author: pissang <bm...@gmail.com>
AuthorDate: Wed Jul 21 19:14:41 2021 +0800
en: fix dynamic-data and event
---
contents/en/application/data/dynamic-data.md | 118 ++++----
contents/en/concepts/event.md | 405 ++++++++++++++++-----------
contents/zh/application/data/dynamic-data.md | 8 +-
contents/zh/concepts/event.md | 8 +-
4 files changed, 317 insertions(+), 222 deletions(-)
diff --git a/contents/en/application/data/dynamic-data.md b/contents/en/application/data/dynamic-data.md
index a4b96d6..7529b11 100644
--- a/contents/en/application/data/dynamic-data.md
+++ b/contents/en/application/data/dynamic-data.md
@@ -1,35 +1,36 @@
# Asynchronous Data Loading and Dynamic Update
-
## Asynchronous Loading
-Data in [Getting Started Example](~getting-started) is directly updated by using `setOption`. But in many cases, data need to be filled by asynchronous loading frequently. `ECharts` can implement asynchronous loading in a simple way. You can get data asynchronously through a function such as jQuery and use `setOption` to fill in data and configs after the chart initialized.
+Data in [Getting Started Example](${lang}/get-started) is directly updated by using `setOption`. But in many cases, data need to be filled by asynchronous loading frequently. `ECharts` can implement asynchronous loading in a simple way. You can get data asynchronously through a function such as jQuery and use `setOption` to fill in data and configs after the chart initialized.
```js
var myChart = echarts.init(document.getElementById('main'));
-$.get('data.json').done(function (data) {
- // Structure of data:
- // {
- // categories: ["Shirt","Wool sweater","Chiffon shirt","Pants","High-heeled shoes","socks"],
- // values: [5, 20, 36, 10, 10, 20]
- // }
- myChart.setOption({
- title: {
- text: 'Asynchronous Loading Example'
- },
- tooltip: {},
- legend: {},
- xAxis: {
- data: data.categories
- },
- yAxis: {},
- series: [{
- name: 'Sales',
- type: 'bar',
- data: data.values
- }]
- });
+$.get('data.json').done(function(data) {
+ // Structure of data:
+ // {
+ // categories: ["Shirt","Wool sweater","Chiffon shirt","Pants","High-heeled shoes","socks"],
+ // values: [5, 20, 36, 10, 10, 20]
+ // }
+ myChart.setOption({
+ title: {
+ text: 'Asynchronous Loading Example'
+ },
+ tooltip: {},
+ legend: {},
+ xAxis: {
+ data: data.categories
+ },
+ yAxis: {},
+ series: [
+ {
+ name: 'Sales',
+ type: 'bar',
+ data: data.values
+ }
+ ]
+ });
});
```
@@ -39,53 +40,56 @@ Or display empty axes with all styles defined before fill in the data:
var myChart = echarts.init(document.getElementById('main'));
// Show title, legends and empty axes
myChart.setOption({
- title: {
- text: 'Asynchronous Loading Example'
- },
- tooltip: {},
- legend: {
- data:['Sales']
- },
- xAxis: {
- data: []
- },
- yAxis: {},
- series: [{
- name: 'Sales',
- type: 'bar',
- data: []
- }]
+ title: {
+ text: 'Asynchronous Loading Example'
+ },
+ tooltip: {},
+ legend: {
+ data: ['Sales']
+ },
+ xAxis: {
+ data: []
+ },
+ yAxis: {},
+ series: [
+ {
+ name: 'Sales',
+ type: 'bar',
+ data: []
+ }
+ ]
});
// Asynchronous Data Loading
-$.get('data.json').done(function (data) {
- // Fill in the data
- myChart.setOption({
- xAxis: {
- data: data.categories
- },
- series: [{
- // Find series by name
- name: 'Sales',
- data: data.data
- }]
- });
+$.get('data.json').done(function(data) {
+ // Fill in the data
+ myChart.setOption({
+ xAxis: {
+ data: data.categories
+ },
+ series: [
+ {
+ // Find series by name
+ name: 'Sales',
+ data: data.data
+ }
+ ]
+ });
});
```
For example:
-<iframe src="${exampleViewPath}doc-example/tutorial-async&edit=1&reset=1" width="400" height="300"></iframe>
+<md-example src="doc-example/tutorial-async"></md-example>
You need to use `name` to "navigate" ECharts when updating data. In the previous example, the chart can update normally depending on the order of series, but we recommend you to add the `name` data while updating data.
-## loading animation
+## loading Animation
When it takes a long time to load the data, the user is facing the empty chart with only axes will wonder if there are bugs appear.
ECharts have a simple loading animation by default. You can call [showLoading](api.html#echartsInstance.showLoading) to display. When the data loading was completed, call [hideLoading](api.html#echartsInstance.hideLoading) to hide the animation.
-
```js
myChart.showLoading();
$.get('data.json').done(function (data) {
@@ -96,7 +100,7 @@ $.get('data.json').done(function (data) {
Here is the effect:
-<iframe src="${exampleViewPath}doc-example/tutorial-loading&edit=1&reset=1" width="400" height="300"></iframe>
+<md-example src="doc-example/tutorial-loading"></md-example>
## Dynamic Update
@@ -106,4 +110,4 @@ All data's update was implemented by [setOption](~api.html#echartsInstance.setOp
Check the following example.
-<iframe src="${exampleViewPath}doc-example/tutorial-dynamic-data&edit=1&reset=1" width="400" height="300"></iframe>
\ No newline at end of file
+<md-example src="doc-example/tutorial-dynamic-data"></md-example>
diff --git a/contents/en/concepts/event.md b/contents/en/concepts/event.md
index 6c8866b..66cd1e4 100644
--- a/contents/en/concepts/event.md
+++ b/contents/en/concepts/event.md
@@ -1,22 +1,21 @@
-# Event and Behavior
+# Event and Action
-Users can trigger corresponding events by their operation. The developer can handle the callback function by mentoring these events, such as jump to a new website, pop-up a dialog box, or drill down the data.
+Users can trigger corresponding events by their operation. The developer can handle the callback function by listening to these events, such as jump to a new website, pop-up a dialog box, or drill down the data.
-In ECharts 3, you should use [on](${mainSitePath}api.html#EChartsInstance.on) method to bond events as same as in ECharts 2. However, the event name is simpler than in ECharts 2. The name of the event and the DOM event is both non-capitalized string. Here is an example of bonding `Click` function.
+The name of the event and the DOM event is both lowercase string. Here is an example of binding listening to `click` event.
```js
-myChart.on('click', function (params) {
- // Print name in console
- console.log(params.name);
+myChart.on('click', function(params) {
+ // Print name in console
+ console.log(params.name);
});
```
-There are two kinds of event in ECharts, one happened when the user clicks the mouse or hover the shape in charts, the other happened while the user triggered some interactive language. Such as ['legendselectchanged'](${mainSitePath}api.html#events.legendselectchanged) triggered while changing the legend selected (please notice that ['legendselectchanged'](${mainSitePath}api.html#events.legendselectchanged in this situation), ['datazoom'](${mainSitePath}api.html#events.legendselectchange [...]
-
+There are two kinds of event in ECharts, one happened when the user clicks the mouse or hover the elements in charts, the other happened while the user triggered some interactive actions. Such as ['legendselectchanged'](${mainSitePath}api.html#events.legendselectchanged) triggered while changing the legend selected (please notice that `legendselected` won't be triggered in this situation), ['datazoom'](${mainSitePath}api.html#events.legendselectchanged) triggered while zooming the data area.
## Handling the Mouse Events
-ECharts support general mouse event type included: `'click'`, `'dblclick'`, `'mousedown'`, `'mousemove'`, `'mouseup'`, `'mouseover'`, `'mouseout'`, `'globalout'`, `'contextmenu'`. This is an example of opening the Baidu search website after clicking the bar chart.
+ECharts support general mouse events: `'click'`, `'dblclick'`, `'mousedown'`, `'mousemove'`, `'mouseup'`, `'mouseover'`, `'mouseout'`, `'globalout'`, `'contextmenu'`. This is an example of opening the search result page after clicking the bar chart.
```js
// Init the ECharts base on DOM
@@ -24,79 +23,89 @@ var myChart = echarts.init(document.getElementById('main'));
// Config
var option = {
- xAxis: {
- data: ["Shirt","Wool sweater","Chiffon shirt","Pants","High-heeled shoes","socks"]
- },
- yAxis: {},
- series: [{
- name: 'Sales',
- type: 'bar',
- data: [5, 20, 36, 10, 10, 20]
- }]
+ xAxis: {
+ data: [
+ 'Shirt',
+ 'Wool sweater',
+ 'Chiffon shirt',
+ 'Pants',
+ 'High-heeled shoes',
+ 'socks'
+ ]
+ },
+ yAxis: {},
+ series: [
+ {
+ name: 'Sales',
+ type: 'bar',
+ data: [5, 20, 36, 10, 10, 20]
+ }
+ ]
};
// Use the option and data to display the chart
myChart.setOption(option);
// Click and jump to Baidu search website
-myChart.on('click', function (params) {
- window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
+myChart.on('click', function(params) {
+ window.open(
+ 'https://www.google.com/search?q=' + encodeURIComponent(params.name)
+ );
});
```
All mouse events included `params` which contained the data of the object.
Format:
+
```js
-{
- // The component name clicked,
- // component type, could be 'series'、'markLine'、'markPoint'、'timeLine', etc..
- componentType: string,
- // series type, could be 'line'、'bar'、'pie', etc.. Works when componentType is 'series'.
- seriesType: string,
- // the index in option.series. Works when componentType is 'series'.
- seriesIndex: number,
- // series name, works when componentType is 'series'.
- seriesName: string,
- // name of data (categories).
- name: string,
- // the index in 'data' array.
- dataIndex: number,
- // incoming raw data item
- data: Object,
- // charts like 'sankey' and 'graph' included nodeData and edgeData as the same time.
- // dataType can be 'node' or 'edge', indicates whether the current click is on node or edge.
- // most of charts have one kind of data, the dataType is meaningless
- dataType: string,
- // incoming data value
- value: number|Array,
- // color of the shape, works when componentType is 'series'.
- color: string
-}
+type EventParams = {
+ // The component name clicked,
+ // component type, could be 'series'、'markLine'、'markPoint'、'timeLine', etc..
+ componentType: string,
+ // series type, could be 'line'、'bar'、'pie', etc.. Works when componentType is 'series'.
+ seriesType: string,
+ // the index in option.series. Works when componentType is 'series'.
+ seriesIndex: number,
+ // series name, works when componentType is 'series'.
+ seriesName: string,
+ // name of data (categories).
+ name: string,
+ // the index in 'data' array.
+ dataIndex: number,
+ // incoming raw data item
+ data: Object,
+ // charts like 'sankey' and 'graph' included nodeData and edgeData as the same time.
+ // dataType can be 'node' or 'edge', indicates whether the current click is on node or edge.
+ // most of charts have one kind of data, the dataType is meaningless
+ dataType: string,
+ // incoming data value
+ value: number | Array,
+ // color of the shape, works when componentType is 'series'.
+ color: string
+};
```
Identify where the mouse clicked.
```js
-myChart.on('click', function (params) {
- if (params.componentType === 'markPoint') {
- // Clicked on the markPoint
- if (params.seriesIndex === 5) {
- // clicked on the markPoint of the series with index = 5
- }
+myChart.on('click', function(params) {
+ if (params.componentType === 'markPoint') {
+ // Clicked on the markPoint
+ if (params.seriesIndex === 5) {
+ // clicked on the markPoint of the series with index = 5
}
- else if (params.componentType === 'series') {
- if (params.seriesType === 'graph') {
- if (params.dataType === 'edge') {
- // clicked at the edge of graph.
- }
- else {
- // clicked at the node of graph.
- }
- }
+ } else if (params.componentType === 'series') {
+ if (params.seriesType === 'graph') {
+ if (params.dataType === 'edge') {
+ // clicked at the edge of graph.
+ } else {
+ // clicked at the node of graph.
+ }
}
+ }
});
```
-Use `query` to trigger callback for shapes of the specified component:
+Use `query` to trigger callback of the specified component:
```js
chart.on(eventName, query, handler);
@@ -114,15 +123,16 @@ chart.on('click', 'xAxis.category', function () {...});
```
If it is `Object`, `query` can include more than one attribute:
+
```js
{
- <mainType>Index: number // component index
- <mainType>Name: string // component name
- <mainType>Id: string // component id
- dataIndex: number // data item index
- name: string // data item name
- dataType: string // date item type, such as 'node', 'edge'
- element: string // name of element in custom series.
+ ${mainType}Index: number // component index
+ ${mainType}Name: string // component name
+ ${mainType}Id: string // component id
+ dataIndex: number // data item index
+ name: string // data item name
+ dataType: string // date item type, such as 'node', 'edge'
+ element: string // name of element in custom series.
}
```
@@ -130,14 +140,16 @@ Such as:
```js
chart.setOption({
- // ...
- series: [{
- name: 'uuu'
- // ...
- }]
+ // ...
+ series: [
+ {
+ name: 'uuu'
+ // ...
+ }
+ ]
});
-chart.on('mouseover', {seriesName: 'uuu'}, function () {
- // when shapes in series named 'uuu' triggered 'mouseover', callback this method.
+chart.on('mouseover', { seriesName: 'uuu' }, function() {
+ // when elements in series named 'uuu' triggered 'mouseover'
});
```
@@ -145,19 +157,22 @@ For example:
```js
chart.setOption({
- // ...
- series: [{
- // ...
- }, {
- // ...
- data: [
- {name: 'xx', value: 121},
- {name: 'yy', value: 33}
- ]
- }]
+ // ...
+ series: [
+ {
+ // ...
+ },
+ {
+ // ...
+ data: [
+ { name: 'xx', value: 121 },
+ { name: 'yy', value: 33 }
+ ]
+ }
+ ]
});
-chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function () {
- // when el named 'xx' in series index 1 triggered 'mouseover', callback this method.
+chart.on('mouseover', { seriesIndex: 1, name: 'xx' }, function() {
+ // when data named 'xx' in series index 1 triggered 'mouseover'.
});
```
@@ -165,18 +180,23 @@ For example:
```js
chart.setOption({
- // ...
- series: [{
- type: 'graph',
- nodes: [{name: 'a', value: 10}, {name: 'b', value: 20}],
- edges: [{source: 0, target: 1}]
- }]
+ // ...
+ series: [
+ {
+ type: 'graph',
+ nodes: [
+ { name: 'a', value: 10 },
+ { name: 'b', value: 20 }
+ ],
+ edges: [{ source: 0, target: 1 }]
+ }
+ ]
});
-chart.on('click', {dataType: 'node'}, function () {
- // callback this method while the node of charts was clicked.
+chart.on('click', { dataType: 'node' }, function() {
+ // call this method while the node of graph was clicked.
});
-chart.on('click', {dataType: 'edge'}, function () {
- // callback this method while the edge of charts was clicked.
+chart.on('click', { dataType: 'edge' }, function() {
+ // call this method while the edge of graph was clicked.
});
```
@@ -184,99 +204,170 @@ For example:
```js
chart.setOption({
+ // ...
+ series: {
// ...
- 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 () {
- // when element named 'my_el' triggered 'mouseup', callback this function.
+ 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() {
+ // when data named 'my_el' triggered 'mouseup'.
});
```
-You can display the floating layer, update the charts using the information found in your database by the data name or series name in the callback function. Here is an example:
+You can display a popup, update the charts using the query result from your database by the data name or series name in the callback function. Here is an example:
```js
-myChart.on('click', function (parmas) {
- $.get('detail?q=' + params.name, function (detail) {
- myChart.setOption({
- series: [{
- name: 'pie',
- // using pie chart to show the data distribution in one column.
- data: [detail.data]
- }]
- });
+myChart.on('click', function(parmas) {
+ $.get('detail?q=' + params.name, function(detail) {
+ myChart.setOption({
+ series: [
+ {
+ name: 'pie',
+ // using pie chart to show the data distribution in one column.
+ data: [detail.data]
+ }
+ ]
});
+ });
});
```
-## Behavioral Events of Component Interaction
+## Event of Component Interaction
-All Component Interaction in ECharts will trigger a corresponding event. Normal events and parameters listed in [events](${mainSitePath}/api.html#events) document.
+All Component Interaction in ECharts will trigger a corresponding event. Normal events and parameters are listed in the [events](${mainSitePath}/api.html#events) document.
-Here is an example of monitoring a legend:
+Here is an example of listening to legend event:
```js
// Show/hide the legend only trigger legendselectchanged event
-myChart.on('legendselectchanged', function (params) {
- // State if legend is selected.
- var isSelected = params.selected[params.name];
- // print in the console.
- console.log((isSelected ? 'Selected' : 'Not Selected') + 'legend' + params.name);
- // print for all legends.
- console.log(params.selected);
+myChart.on('legendselectchanged', function(params) {
+ // State if legend is selected.
+ var isSelected = params.selected[params.name];
+ // print in the console.
+ console.log(
+ (isSelected ? 'Selected' : 'Not Selected') + 'legend' + params.name
+ );
+ // print for all legends.
+ console.log(params.selected);
});
```
-## Use Code to Trigger Component Behavior
+## Writing Code to Trigger Component Action Manually
-You can trigger events such as `'legendselectchanged'` not only by the user but also by the program itself. It can be used to display the tooltip, select the legend.
+You can trigger events such as `'legendselectchanged'` not only by the user but also with code manually. It can be used to display the tooltip, select the legend.
-In ECharts 2, we use the method of `myChart.component.tooltip.showTip` to trigger the chart behavior. It is not good because the entry is deep, and involved many internal components. In ECharts 3, it changed to `myChart.dispatchAction({ type: '' })` to trigger the behavior. The new method manage all actions uniformly and can record the behavior path conveniently.
+In ECharts `myChart.dispatchAction({ type: '' })` is used to trigger the behavior. This manages all actions and can record the behaviors conveniently.
-Commonly used behavior and corresponding parameters were listed in [action](${mainSitePath}/api.html#action).
+Commonly used behavior and corresponding parameters are listed in [action](${mainSitePath}/api.html#action).
The following example shows how to highlight each sector one by one in the pie chart using `dispatchAction`.
-<iframe width="600" height="400" src="${exampleViewPath}doc-example/pie-highlight&reset=1&edit=1"></iframe>
+```js [live]
+option = {
+ tooltip: {
+ trigger: 'item',
+ formatter: '{a} <br/>{b} : {c} ({d}%)'
+ },
+ legend: {
+ orient: 'vertical',
+ left: 'left',
+ data: [
+ 'Direct Access',
+ 'Email Marketing',
+ 'Affiliate Ads',
+ 'Video Ads',
+ 'Search Engines'
+ ]
+ },
+ series: [
+ {
+ name: 'Access Source',
+ type: 'pie',
+ radius: '55%',
+ center: ['50%', '60%'],
+ data: [
+ { value: 335, name: 'Direct Access' },
+ { value: 310, name: 'Email Marketing' },
+ { value: 234, name: 'Affiliate Ads' },
+ { value: 135, name: 'Video Ads' },
+ { value: 1548, name: 'Search Engines' }
+ ],
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
+ }
+ }
+ }
+ ]
+};
+
+let currentIndex = -1;
+
+setInterval(function() {
+ var dataLen = option.series[0].data.length;
+ myChart.dispatchAction({
+ type: 'downplay',
+ seriesIndex: 0,
+ dataIndex: currentIndex
+ });
+ currentIndex = (currentIndex + 1) % dataLen;
+ myChart.dispatchAction({
+ type: 'highlight',
+ seriesIndex: 0,
+ dataIndex: currentIndex
+ });
+ myChart.dispatchAction({
+ type: 'showTip',
+ seriesIndex: 0,
+ dataIndex: currentIndex
+ });
+}, 1000);
+```
+## Listen to Events on the Blank Area
-## Listen to events from the blank
+Sometimes developers need to listen to the events that are triggered from the blank of the canvas. For example, need to reset the chart when users click on the blank area.
-Sometimes developers need to listen to the events that are triggered from the blank of the canvas. For example, need to reset the chart when users click on the blank.
+Before we talk about this feature, we need to clarify two kinds of events: zrender events and echarts events.
-Before we talk about this feature, we need to clarify two kinds of events: `zrender events` and `echarts events`.
```js
-myChart.getZr().on('click', function (event) {
- // This listener is listening to a `zrender event`.
+myChart.getZr().on('click', function(event) {
+ // This listener is listening to a `zrender event`.
});
-myChart.on('click', function (event) {
- // This listener is listening to a `echarts event`.
+myChart.on('click', function(event) {
+ // This listener is listening to a `echarts event`.
});
```
-`zrender events` are different from `echarts events`. The former one are triggered when mouse/pointer is at everywhere, while the latter one can only be triggered when mouse/pointer is at the graphic elements. In fact, `echarts events` are implemented based on `zrender events`, that is, when a `zrender events` is triggered at a graphic element, `echarts` will trigger a `echarts event`.
-Having `zrender events`, we can implement "listen to events from the blank" as follows:
+zrender events are different from echarts events. The former one are triggered when mouse/pointer is at everywhere, while the latter one can only be triggered when mouse/pointer is at the graphic elements. In fact, echarts events are implemented based on zrender events, that is, when a zrender events is triggered at a graphic element, echarts will trigger a echarts event.
+
+Having zrender events, we can implement listen to events from the blank as follows:
+
```js
-myChart.getZr().on('click', function (event) {
- // No "target" means that mouse/pointer is not on
- // any of the graphic elements, which is "blank".
- if (!event.target) {
- // Click on blank. Do something.
- }
+myChart.getZr().on('click', function(event) {
+ // No "target" means that mouse/pointer is not on
+ // any of the graphic elements, which is "blank".
+ if (!event.target) {
+ // Click on blank. Do something.
+ }
});
```
diff --git a/contents/zh/application/data/dynamic-data.md b/contents/zh/application/data/dynamic-data.md
index e38bb90..7b706e3 100644
--- a/contents/zh/application/data/dynamic-data.md
+++ b/contents/zh/application/data/dynamic-data.md
@@ -2,7 +2,7 @@
## 异步加载
-[入门示例](~getting-started)中的数据是在初始化后`setOption`中直接填入的，但是很多时候可能数据需要异步加载后再填入。`ECharts` 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 `setOption` 填入数据和配置项就行。
+[入门示例](${lang}/get-started)中的数据是在初始化后`setOption`中直接填入的，但是很多时候可能数据需要异步加载后再填入。`ECharts` 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 `setOption` 填入数据和配置项就行。
```js
var myChart = echarts.init(document.getElementById('main'));
@@ -80,7 +80,7 @@ $.get('data.json').done(function(data) {
如下：
-<md-example src="doc-example/tutorial-async&edit=1"></md-example>
+<md-example src="doc-example/tutorial-async"></md-example>
ECharts 中在更新数据的时候需要通过`name`属性对应到相应的系列，上面示例中如果`name`不存在也可以根据系列的顺序正常更新，但是更多时候推荐更新数据的时候加上系列的`name`数据。
@@ -100,7 +100,7 @@ $.get('data.json').done(function (data) {
效果如下：
-<md-example src="doc-example/tutorial-loading&edit=1"></md-example>
+<md-example src="doc-example/tutorial-loading"></md-example>
## 数据的动态更新
@@ -110,4 +110,4 @@ ECharts 由数据驱动，数据的改变驱动图表展现的改变，因此动
具体可以看下面示例：
-<md-example src="doc-example/tutorial-dynamic-data&edit=1"></md-example>
+<md-example src="doc-example/tutorial-dynamic-data"></md-example>
diff --git a/contents/zh/concepts/event.md b/contents/zh/concepts/event.md
index 21ddddd..2156fc7 100644
--- a/contents/zh/concepts/event.md
+++ b/contents/zh/concepts/event.md
@@ -260,7 +260,7 @@ myChart.on('legendselectchanged', function(params) {
上面提到诸如 `'legendselectchanged'` 事件会由组件交互的行为触发，那除了用户的交互操作，有时候也会有需要在程序里调用方法触发图表的行为，诸如显示 tooltip，选中图例。
-在 ECharts 2 是通过 `myChart.component.tooltip.showTip` 这种形式调用相应的接口触发图表行为，入口很深，而且涉及到内部组件的组织。相对地，在 ECharts 3 里改为通过调用 `myChart.dispatchAction({ type: '' })` 触发图表行为，统一管理了所有动作，也可以方便地根据需要去记录用户的行为路径。
+在 ECharts 通过调用 `myChart.dispatchAction({ type: '' })` 触发图表行为，统一管理了所有动作，也可以方便地根据需要去记录用户的行为路径。
常用的动作和动作对应参数在 [action](${mainSitePath}/api.html#action) 文档中有列出。
@@ -335,7 +335,7 @@ setInterval(function() {
有时候，开发者需要监听画布的“空白处”所触发的事件。比如，当需要在用户点击“空白处”的时候重置图表时。
-在讨论这个功能之前，我们需要先明确两种事件。`zrender 事件`和`echarts 事件`。
+在讨论这个功能之前，我们需要先明确两种事件。zrender 事件和 echarts 事件。
```js
myChart.getZr().on('click', function(event) {
@@ -346,9 +346,9 @@ myChart.on('click', function(event) {
});
```
-`zrender 事件`与`echarts 事件`不同。前者是当鼠标在任何地方都会被触发，而后者是只有当鼠标在图形元素上时才能被触发。事实上，`echarts 事件` 是在 `zrender 事件` 的基础上实现的，也就是说，当一个 `zrender 事件` 在图形元素上被触发时，`echarts` 将触发一个 `echarts 事件` 给开发者。
+zrender 事件与 echarts 事件不同。前者是当鼠标在任何地方都会被触发，而后者是只有当鼠标在图形元素上时才能被触发。事实上，echarts 事件是在 zrender 事件的基础上实现的，也就是说，当一个 zrender 事件在图形元素上被触发时，echarts 将触发一个 echarts 事件给开发者。
-有了 `zrender事件`，我们就可以实现 “监听空白处的事件”，具体如下：
+有了 zrender 事件，我们就可以实现监听空白处的事件，具体如下：
```js
myChart.getZr().on('click', function(event) {
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org