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 10:39:27 UTC
[echarts-handbook] branch master updated: en: add rich-text and drag
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 cda06f1 en: add rich-text and drag
cda06f1 is described below
commit cda06f1b51e8cded3c343a0df93f79db86bcce6b
Author: pissang <bm...@gmail.com>
AuthorDate: Wed Jul 21 18:39:16 2021 +0800
en: add rich-text and drag
---
contents/en/application/interaction/drag.md | 269 +++++++++++++++++++++
contents/{zh => en}/application/label/rich-text.md | 243 +++++++++----------
contents/zh/application/interaction/drag.md | 57 +++--
contents/zh/application/label/rich-text.md | 14 +-
4 files changed, 421 insertions(+), 162 deletions(-)
diff --git a/contents/en/application/interaction/drag.md b/contents/en/application/interaction/drag.md
new file mode 100644
index 0000000..85a995f
--- /dev/null
+++ b/contents/en/application/interaction/drag.md
@@ -0,0 +1,269 @@
+# An Example: Implement Dragging
+
+This is a tiny example, introducing how to implement dragging of graphic elements in Apache ECharts<sup>TM</sup>. From this example, we will see how to make an application with rich intractivity based on echarts API.
+
+<md-example src="line-draggable" height="400"></md-example>
+
+This example mainly implements that dragging points of a curve and by which the curve is modified. Although it is simple example, but we can do more based on that, like edit charts viually. So let's get started from this simple example.
+
+## Implement basic dragging
+
+First of all, we create a basic [line chart (line series)](${optionPath}series-line):
+
+```js
+var symbolSize = 20;
+var data = [
+ [15, 0],
+ [-50, 10],
+ [-56.5, 20],
+ [-46.5, 30],
+ [-22.1, 40]
+];
+
+myChart.setOption({
+ xAxis: {
+ min: -100,
+ max: 80,
+ type: 'value',
+ axisLine: { onZero: false }
+ },
+ yAxis: {
+ min: -30,
+ max: 60,
+ type: 'value',
+ axisLine: { onZero: false }
+ },
+ series: [
+ {
+ id: 'a',
+ type: 'line',
+ smooth: true,
+ // Set a big symbolSize for dragging convenience.
+ symbolSize: symbolSize,
+ data: data
+ }
+ ]
+});
+```
+
+Since the symbols in line is not draggable, we make them draggable by using [graphic component](${optionPath}graphic) to add draggable circular elements to symbols respectively.
+
+```js
+myChart.setOption({
+ // Declare a graphic component, which contains some graphic elements
+ // with the type of 'circle'.
+ // Here we have used the method `echarts.util.map`, which has the same
+ // behavior as Array.prototype.map, and is compatible with ES5-.
+ graphic: echarts.util.map(data, function(dataItem, dataIndex) {
+ return {
+ // 'circle' means this graphic element is a shape of circle.
+ type: 'circle',
+
+ shape: {
+ // The radius of the circle.
+ r: symbolSize / 2
+ },
+ // Transform is used to located the circle. position:
+ // [x, y] means translate the circle to the position [x, y].
+ // The API `convertToPixel` is used to get the position of
+ // the circle, which will introduced later.
+ position: myChart.convertToPixel('grid', dataItem),
+
+ // Make the circle invisible (but mouse event works as normal).
+ invisible: true,
+ // Make the circle draggable.
+ draggable: true,
+ // Give a big z value, which makes the circle cover the symbol
+ // in line series.
+ z: 100,
+ // This is the event handler of dragging, which will be triggered
+ // repeatly while dragging. See more details below.
+ // A util method `echarts.util.curry` is used here to generate a
+ // new function the same as `onPointDragging`, except that the
+ // first parameter is fixed to be the `dataIndex` here.
+ ondrag: echarts.util.curry(onPointDragging, dataIndex)
+ };
+ })
+});
+```
+
+In the code above, API [convertToPixel](api.html#echartsInstance.convertToPixel) is used to convert data to its "pixel coodinate", based on which each graphic elements can be rendered on canvas. The term "pixel coodinate" means the coordinate is in canvas pixel, whose origin is the top-left of the canvas. In the sentence `myChart.convertToPixel('grid', dataItem)`, the first parameter `'grid'` indicates that `dataItem` should be converted in the first [grid component (cartesian)](${option [...]
+
+**Notice:** `convertToPixel` should not be called before the first time that `setOption` called. Namely, it can only be used after coordinate systems (grid/polar/...) initialized.
+
+Now points have been made draggable. Then we will bind event listeners on dragging to those points.
+
+```js
+// This function will be called repeatly while dragging.
+// The mission of this function is to update `series.data` based on
+// the new points updated by dragging, and to re-render the line
+// series based on the new data, by which the graphic elements of the
+// line series can be synchronized with dragging.
+function onPointDragging(dataIndex) {
+ // Here the `data` is declared in the code block in the beginning
+ // of this article. The `this` refers to the dragged circle.
+ // `this.position` is the current position of the circle.
+ data[dataIndex] = myChart.convertFromPixel('grid', this.position);
+ // Re-render the chart based on the updated `data`.
+ myChart.setOption({
+ series: [
+ {
+ id: 'a',
+ data: data
+ }
+ ]
+ });
+}
+```
+
+In the code above, API [convertFromPixel](api.html#echartsInstance.convertFromPixel) is used, which is the reversed process of [convertToPixel](api.html#echartsInstance.convertToPixel). `myChart.convertFromPixel('grid', this.position)` converts a pixel coordinate to data item in [grid (cartesian)](${optionPath}grid).
+
+Finally, add those code to make graphic elements responsive to change of canvas size.
+
+```js
+window.addEventListener('resize', function() {
+ // Re-calculate the position of each circle and update chart using `setOption`.
+ myChart.setOption({
+ graphic: echarts.util.map(data, function(item, dataIndex) {
+ return {
+ position: myChart.convertToPixel('grid', item)
+ };
+ })
+ });
+});
+```
+
+## Add tooltip component
+
+Now basic functionality have been implemented by parte 1. If we need the data can be displayed realtime when dragging, we can use [tooltip component](${optionPath}tooltip) to do that. Nevertheless, tooltip component has its default "show/hide rule", which is not applicable in this case. So we need to customize the "show/hide rule" for our case.
+
+Add these snippets to the code block above:
+
+```js
+myChart.setOption({
+ // ...,
+ tooltip: {
+ // Means disable default "show/hide rule".
+ triggerOn: 'none',
+ formatter: function(params) {
+ return (
+ 'X: ' +
+ params.data[0].toFixed(2) +
+ '<br>Y: ' +
+ params.data[1].toFixed(2)
+ );
+ }
+ }
+});
+```
+
+```js
+myChart.setOption({
+ graphic: data.map(function(item, dataIndex) {
+ return {
+ type: 'circle',
+ // ...,
+ // Customize "show/hide rule", show when mouse over, hide when mouse out.
+ onmousemove: echarts.util.curry(showTooltip, dataIndex),
+ onmouseout: echarts.util.curry(hideTooltip, dataIndex)
+ };
+ })
+});
+
+function showTooltip(dataIndex) {
+ myChart.dispatchAction({
+ type: 'showTip',
+ seriesIndex: 0,
+ dataIndex: dataIndex
+ });
+}
+
+function hideTooltip(dataIndex) {
+ myChart.dispatchAction({
+ type: 'hideTip'
+ });
+}
+```
+
+The API [dispatchAction](${mainSitePath}/api.html#echartsInstance.dispatchAction) is used to show/hide tooltip content, where actions [showTip](${mainSitePath}/api.html#action.tooltip.showTip) and [hideTip](api.html#action.tooltip.hideTip) is dispatched.
+
+## Full code
+
+Full code is shown as follow:
+
+```js
+import echarts from 'echarts';
+
+var symbolSize = 20;
+var data = [
+ [15, 0],
+ [-50, 10],
+ [-56.5, 20],
+ [-46.5, 30],
+ [-22.1, 40]
+];
+var myChart = echarts.init(document.getElementById('main'));
+myChart.setOption({
+ tooltip: {
+ triggerOn: 'none',
+ formatter: function(params) {
+ return (
+ 'X: ' +
+ params.data[0].toFixed(2) +
+ '<br />Y: ' +
+ params.data[1].toFixed(2)
+ );
+ }
+ },
+ xAxis: { min: -100, max: 80, type: 'value', axisLine: { onZero: false } },
+ yAxis: { min: -30, max: 60, type: 'value', axisLine: { onZero: false } },
+ series: [
+ { id: 'a', type: 'line', smooth: true, symbolSize: symbolSize, data: data }
+ ]
+});
+myChart.setOption({
+ graphic: echarts.util.map(data, function(item, dataIndex) {
+ return {
+ type: 'circle',
+ position: myChart.convertToPixel('grid', item),
+ shape: { r: symbolSize / 2 },
+ invisible: true,
+ draggable: true,
+ ondrag: echarts.util.curry(onPointDragging, dataIndex),
+ onmousemove: echarts.util.curry(showTooltip, dataIndex),
+ onmouseout: echarts.util.curry(hideTooltip, dataIndex),
+ z: 100
+ };
+ })
+});
+window.addEventListener('resize', function() {
+ myChart.setOption({
+ graphic: echarts.util.map(data, function(item, dataIndex) {
+ return { position: myChart.convertToPixel('grid', item) };
+ })
+ });
+});
+function showTooltip(dataIndex) {
+ myChart.dispatchAction({
+ type: 'showTip',
+ seriesIndex: 0,
+ dataIndex: dataIndex
+ });
+}
+function hideTooltip(dataIndex) {
+ myChart.dispatchAction({ type: 'hideTip' });
+}
+function onPointDragging(dataIndex, dx, dy) {
+ data[dataIndex] = myChart.convertFromPixel('grid', this.position);
+ myChart.setOption({
+ series: [
+ {
+ id: 'a',
+ data: data
+ }
+ ]
+ });
+}
+```
+
+With knowledge introduced above, more feature can be implemented. For example, [dataZoom component](${optionPath}dataZoom) can be added to cooperate with the cartesian, or we can make a plotting board on coordinate systems. Use your imagination ~
diff --git a/contents/zh/application/label/rich-text.md b/contents/en/application/label/rich-text.md
similarity index 50%
copy from contents/zh/application/label/rich-text.md
copy to contents/en/application/label/rich-text.md
index 728bc69..aeac2a3 100644
--- a/contents/zh/application/label/rich-text.md
+++ b/contents/en/application/label/rich-text.md
@@ -1,50 +1,51 @@
-# 富文本标签
+# Rich Text
-Apache ECharts<sup>TM</sup> 中的文本标签从 v3.7 开始支持富文本模式，能够：
+Rich text can be used in Apache ECharts<sup>TM</sup> labels of series, axis or other components since v3.7. Which supports:
-- 定制文本块整体的样式（如背景、边框、阴影等）、位置、旋转等。
-- 对文本块中个别片段定义样式（如颜色、字体、高宽、背景、阴影等）、对齐方式等。
-- 在文本中使用图片做小图标或者背景。
-- 特定组合以上的规则，可以做出简单表格、分割线等效果。
+- Box styles (background, border, shadow, etc.), rotation, position of a text block can be specified.
+- Styles (color, font, width/height, background, shadow, etc.) and alignment can be customzied on fragments of text.
+- Image can be used in text as icon or background.
+- Combine these configurations, some special effects can be made, such as simple table, horizontal rule (hr).
-开始下面的介绍之前，先说明一下下面会使用的两个名词的含义：
+At the beginning, the meanings of two terms that will be used below should be clarified:
-- 文本块（Text Block）：文本标签块整体。
-- 文本片段（Text fragment）：文本标签块中的部分文本。
+- Text Block: The whole block of label text.
+- Text fragment: Some piece of text in a text block.
-如下图示例：
-~[340x240](${galleryViewPath}doc-example/text-block-fragment&edit=1&reset=1)
+For example:
-## 文本样式相关的配置项
+<md-example src="doc-example/text-block-fragment" width="400" height="300"></md-example>
-echarts 提供了丰富的文本标签配置项，包括：
+## Options about Text
-- 字体基本样式设置：`fontStyle`、`fontWeight`、`fontSize`、`fontFamily`。
-- 文字颜色：`color`。
-- 文字描边：`textBorderColor`、`textBorderWidth`。
-- 文字阴影：`textShadowColor`、`textShadowBlur`、`textShadowOffsetX`、`textShadowOffsetY`。
-- 文本块或文本片段大小：`lineHeight`、`width`、`height`、`padding`。
-- 文本块或文本片段的对齐：`align`、`verticalAlign`。
-- 文本块或文本片段的边框、背景（颜色或图片）：`backgroundColor`、`borderColor`、`borderWidth`、`borderRadius`。
-- 文本块或文本片段的阴影：`shadowColor`、`shadowBlur`、`shadowOffsetX`、`shadowOffsetY`。
-- 文本块的位置和旋转：`position`、`distance`、`rotate`。
+echarts provides plenty of text options, including:
-可以在各处的 `rich` 属性中定义文本片段样式。例如 [series-bar.label.rich](option.html#series-bar.label.rich)
+- Basic font style: `fontStyle`, `fontWeight`, `fontSize`, `fontFamily`.
+- Fill of text: `color`.
+- Stroke of text: `textBorderColor`, `textBorderWidth`.
+- Shadow of text: `textShadowColor`, `textShadowBlur`, `textShadowOffsetX`, `textShadowOffsetY`.
+- Box size of text block or text fragment: `lineHeight`, `width`, `height`, `padding`.
+- Alignment of text block or text fragment: `align`, `verticalAlign`.
+- Border, background (color or image) of text block or text fragment: `backgroundColor`, `borderColor`, `borderWidth`, `borderRadius`.
+- Shadow of text block or text fragment: `shadowColor`, `shadowBlur`, `shadowOffsetX`, `shadowOffsetY`.
+- Position and rotation of text block: `position`, `distance`, `rotate`.
-例如：
+User can defined styles for text fragment in `rich` property. For example, [series-bar.label.rich](option.html#series-bar.label.rich)
+
+For example:
```js
labelOption = {
- // 在文本中，可以对部分文本采用 rich 中定义样式。
- // 这里需要在文本中使用标记符号：
- // `{styleName|text content text content}` 标记样式名。
- // 注意，换行仍是使用 '\n'。
+ // Styles defined in 'rich' can be applied to some fragments
+ // of text by adding some markers to those fragment, like
+ // `{styleName|text content text content}`.
+ // `'\n'` is the newline character.
formatter: [
- '{a|这段文本采用样式a}',
- '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'
+ '{a|Style "a" is applied to this fragment}',
+ '{b|Style "b" is applied to this fragment}This fragment use default style{x|use style "x"}'
].join('\n'),
- // 这里是文本块的样式设置：
+ // Styles for the whole text block are defined here:
color: '#333',
fontSize: 5,
fontFamily: 'Arial',
@@ -53,7 +54,7 @@ labelOption = {
padding: [3, 10, 10, 5],
lineHeight: 20,
- // rich 里是文本片段的样式设置：
+ // Styles for text fragments are defined here:
rich: {
a: {
color: 'red',
@@ -71,23 +72,24 @@ labelOption = {
borderColor: '#449933',
borderRadius: 4
}
+ // ...
}
};
```
-> 注意：如果不定义 `rich`，不能指定文字块的 `width` 和 `height`。
+> Notice: `width` 和 `height` only work when `rich` specified.
-## 文本、文本框、文本片段的基本样式和装饰
+## Basic Styles of Text, Text Block and Text Fragment
-每个文本可以设置基本的字体样式：`fontStyle`、`fontWeight`、`fontSize`、`fontFamily`。
+Basic font style can be set to text: `fontStyle`, `fontWeight`, `fontSize`, `fontFamily`.
-可以设置文字的颜色 `color` 和边框的颜色 `textBorderColor`、`textBorderWidth`。
+Fill color and stroke color can be set to text: `color`, `textBorderColor`, `textBorderWidth`.
-文本框可以设置边框和背景的样式：`borderColor`、`borderWidth`、`backgroundColor`、`padding`。
+Border style and background style can be set to text block: `borderColor`, `borderWidth`, `backgroundColor`, `padding`.
-文本片段也可以设置边框和背景的样式：`borderColor`、`borderWidth`、`backgroundColor`、`padding`。
+Border style and background style can be set to text fragment too: `borderColor`, `borderWidth`, `backgroundColor`, `padding`.
-例如：
+For example:
```js [live]
option = {
@@ -166,29 +168,23 @@ option = {
}
],
xAxis: {
- axisLabel: { show: false },
- axisLine: { show: false },
- splitLine: { show: false },
- axisTick: { show: false },
+ show: false,
min: -1,
max: 1
},
yAxis: {
- axisLabel: { show: false },
- axisLine: { show: false },
- splitLine: { show: false },
- axisTick: { show: false },
+ show: false,
min: -1,
max: 1
}
};
```
-## 标签的位置
+## Label Position
-对于折线图、柱状图、散点图等，均可以使用 `label` 来设置标签。标签的相对于图形元素的位置，一般使用 [label.position](option.html#series-scatter.label.position)、[label.distance](option.html#series-scatter.label.distance) 来配置。
+`label` option can be use in charts like `bar`, `line`, `scatter`, etc. The position of a label, can be specified by [label.position](option.html#series-scatter.label.position)、[label.distance](option.html#series-scatter.label.distance).
-试试在下面例子中修改`position`和`distance` 属性：
+Try to modify the `position` and `distance` option in the following example:
```js [live]
option = {
@@ -200,8 +196,7 @@ option = {
data: [[1, 1]],
label: {
normal: {
- // 修改 position 和 distance 的值试试
- // 支持：'left', 'right', 'top', 'bottom', 'inside', 'insideTop', 'insideLeft', 'insideRight', 'insideBottom', 'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
+ // Options: 'left', 'right', 'top', 'bottom', 'inside', 'insideTop', 'insideLeft', 'insideRight', 'insideBottom', 'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
position: 'top',
distance: 10,
@@ -233,11 +228,11 @@ option = {
};
```
-> 注意：`position` 在不同的图中可取值有所不同。`distance` 并不是在每个图中都支持。详情请参见 [option 文档](option.html)。
+> Notice, there are different optional values of `position` by different chart types. And `distance` is not supported in every chart. More detailed info can be checked in [option doc](${mainSitePath}option.html).
-## 标签的旋转
+## Label Rotation
-某些图中，为了能有足够长的空间来显示标签，需要对标签进行旋转。例如：
+Sometimes label is needed to be rotated. For example:
```js [live-lr]
const labelOption = {
@@ -286,41 +281,41 @@ option = {
};
```
-这种场景下，可以结合 [align](option.html#series-bar.label.align) 和 [verticalAlign](option.html#series-bar.label.verticalAlign) 来调整标签位置。
+[align](option.html#series-bar.label.align) and[verticalAlign](option.html#series-bar.label.verticalAlign) can be used to adjust location of label in this scenario.
-注意，逻辑是，先使用 `align` 和 `verticalAlign` 定位，再旋转。
+Notice, `align` and `verticalAlign` are applied firstly, then rotate.
-## 文本片段的排版和对齐
+## Layout and Alignment of Text fragment
-关于排版方式，每个文本片段，可以想象成 CSS 中的 `inline-block`，在文档流中按行放置。
+To understand the layout rule, every text fragment can be imagined as a `inline-block` dom element in CSS.
-每个文本片段的内容盒尺寸（`content box size`），默认是根据文字大小决定的。但是，也可以设置 `width`、`height` 来强制指定，虽然一般不会这么做（参见下文）。文本片段的边框盒尺寸（`border box size`），由上述本身尺寸，加上文本片段的 `padding` 来得到。
+`content box size` of a text fragment is determined by its font size by default. It can also be specified directly by `width` and `height`, although they are rarely set. `border box size` of a text fragment is calculated by adding the `border box size` and `padding`.
-只有 `'\n'` 是换行符，能导致换行。
+Only `'\n'` is the newline character, which breaks a line.
-一行内，会有多个文本片段。每行的实际高度，由 `lineHeight` 最大的文本片段决定。文本片段的 `lineHeight` 可直接在 `rich` 中指定，也可以在 `rich` 的父层级中统一指定而采用到 `rich` 的所有项中，如果都不指定，则取文本片段的边框盒尺寸（`border box size`）。
+Multiple text fragment exist in a single line. The height of a line is determined by the biggest `lineHeight` of text fragments. `lineHeight` of a text fragment can be specified in `rich`, or in the parent level of `rich`, otherwise using `box size` of the text fragment.
-在一行的 `lineHeight` 被决定后，一行内，文本片段的竖直位置，由文本片段的 `verticalAlign` 来指定（这里和 CSS 中的规则稍有不同）：
+Having `lineHeight` determined, the vertical position of text fragments can be determined by `verticalAlign` (there is a little different from the rule in CSS):
-- `'bottom'`：文本片段的盒的底边贴住行底。
-- `'top'`：文本片段的盒的顶边贴住行顶。
-- `'middle'`：居行中。
+- `'bottom'`: The bottom edge of the text fragment sticks to the bottom edge of the line.
+- `'top'`: The top edge of the text fragment sticks to the top edge of the line.
+- `'middle'`: In the middle of the line.
-文本块的宽度，可以直接由文本块的 `width` 指定，否则，由最长的行决定。宽度决定后，在一行中进行文本片段的放置。文本片段的 `align` 决定了文本片段在行中的水平位置：
+The width of a text block can be specified by `width`, otherwise, by the longest line. Having the width determined, text fragment can be placed in each line, where the horizontal position of text fragments can be determined by its `align`.
-- 首先，从左向右连续紧靠放置 `align` 为 `'left'` 的文本片段盒。
-- 然后，从右向左连续紧靠放置 `align` 为 `'right'` 的文本片段盒。
-- 最后，剩余的没处理的文本片段盒，紧贴着，在中间剩余的区域中居中放置。
+- Firstly, place text fragments whose `align` is `'left'` from left to right continuously.
+- Secondly, place text fragments whose `align` is `'right'` from right to left continuously.
+- Finally, the text fragments remained will be sticked and placed in the center of the rest of space.
-关于文字在文本片段盒中的位置：
+The position of text in a text fragment:
-- 如果 `align` 为 `'center'`，则文字在文本片段盒中是居中的。
-- 如果 `align` 为 `'left'`，则文字在文本片段盒中是居左的。
-- 如果 `align` 为 `'right'`，则文字在文本片段盒中是居右的。
+- If `align` is `'center'`, text aligns at the center of the text fragment box.
+- If `align` is `'left'`, text aligns at the left of the text fragment box.
+- If `align` is `'right'`, text aligns at the right of the text fragment box.
-## 特殊效果：图标、分割线、标题块、简单表格
+## Effects: Icon, Horizontal Rule, Title Block, Simple Table
-看下面的例子：
+See example:
```js [live-lr]
option = {
@@ -450,75 +445,69 @@ option = {
};
```
-文本片段的 `backgroundColor` 可以指定为图片后，就可以在文本中使用图标了：
+Icon is implemented by using image in `backgroundColor`.
```js
-labelOption = {
- rich: {
+rich: {
Sunny: {
- // 这样设定 backgroundColor 就可以是图片了。
- backgroundColor: {
- image: './data/asset/img/weather/sunny_128.png'
- },
- // 可以只指定图片的高度，从而图片的宽度根据图片的长宽比自动得到。
- height: 30
+ backgroundColor: {
+ image: './data/asset/img/weather/sunny_128.png'
+ },
+ // Can only height specified, but leave width auto obtained
+ // from the image, where the aspect ratio kept.
+ height: 30
}
- }
-};
+}
```
-分割线实际是用 border 实现的：
+Horizontal rule (like HTML <hr> tag) can be implemented by border:
```js
-labelOption = {
- rich: {
+rich: {
hr: {
- borderColor: '#777',
- // 这里把 width 设置为 '100%'，表示分割线的长度充满文本块。
- // 注意，这里是文本块内容盒（content box）的 100%，而不包含 padding。
- // 虽然这和 CSS 相关的定义有所不同，但是在这类场景中更加方便。
- width: '100%',
- borderWidth: 0.5,
- height: 0
+ borderColor: '#777',
+ // width is set as '100%' to fullfill the text block.
+ // Notice, the percentage is based on the content box, without
+ // padding. Although it is a little different from CSS rule,
+ // it is convinent in most cases.
+ width: '100%',
+ borderWidth: 0.5,
+ height: 0
}
- }
-};
+}
```
-标题块是使用 `backgroundColor` 实现的：
+Title block can be implemented by `backgroundColor`:
```js
-labelOption = {
- // 标题文字居左
- formatter: '{titleBg|Left Title}',
- rich: {
+// Title is at left.
+formatter: '{titleBg|Left Title}',
+rich: {
titleBg: {
- backgroundColor: '#000',
- height: 30,
- borderRadius: [5, 5, 0, 0],
- padding: [0, 10, 0, 10],
- width: '100%',
- color: '#eee'
+ backgroundColor: '#000',
+ height: 30,
+ borderRadius: [5, 5, 0, 0],
+ padding: [0, 10, 0, 10],
+ width: '100%',
+ color: '#eee'
}
- }
-};
+}
-// 标题文字居中。
-// 这个实现有些 tricky，但是，能够不引入更复杂的排版规则而实现这个效果。
-labelOption = {
- formatter: '{tc|Center Title}{titleBg|}',
- rich: {
+// Title is in the center of the line.
+// This implementation is a little tricky, but is works
+// without more complicated layout mechanism involved.
+formatter: '{tc|Center Title}{titleBg|}',
+rich: {
titleBg: {
- align: 'right',
- backgroundColor: '#000',
- height: 30,
- borderRadius: [5, 5, 0, 0],
- padding: [0, 10, 0, 10],
- width: '100%',
- color: '#eee'
+ align: 'right',
+ backgroundColor: '#000',
+ height: 30,
+ borderRadius: [5, 5, 0, 0],
+ padding: [0, 10, 0, 10],
+ width: '100%',
+ color: '#eee'
}
- }
-};
+}
```
-简单表格的设定，其实就是给不同行上纵向对应的文本片段设定同样的宽度就可以了。
+Simple table can be implemented by specify the same width to text fragments that are in the same column of different lines. See the [example](${exampleEditorPath}pie-rich-text).
diff --git a/contents/zh/application/interaction/drag.md b/contents/zh/application/interaction/drag.md
index 157e727..8b32dc4 100644
--- a/contents/zh/application/interaction/drag.md
+++ b/contents/zh/application/interaction/drag.md
@@ -2,6 +2,8 @@
本篇通过介绍一个实现拖拽的小例子来介绍如何在 Apache ECharts<sup>TM</sup> 中实现复杂的交互。
+<md-example src="line-draggable" height="400"></md-example>
+
这个例子主要做到了这样一件事，用鼠标可以拖拽曲线的点，从而改变曲线的形状。例子很简单，但是有了这个基础我们还可以做更多的事情，比如在图中进行可视化得编辑。所以我们从这个简单的例子开始。
echarts 本身没有提供封装好的“拖拽改变图表”这样比较业务定制的功能。但是这个功能开发者可以通过 API 扩展实现。
@@ -107,7 +109,7 @@ function onPointDragging(dataIndex) {
}
```
-上面的代码中，使用了 [convertFromPixel](api.html#echartsInstance.convertFromPixel) 这个 API。它是 [convertToPixel](api.html#echartsInstance.convertToPixel) 的逆向过程。`myChart.convertFromPixel('grid', this.position)` 表示把当前像素坐标转换成 [grid](${optionPath}grid) 组件中直角坐标系的 dataItem 值。
+上面的代码中，使用了 [convertFromPixel](${mainSitePath}/api.html#echartsInstance.convertFromPixel) 这个 API。它是 [convertToPixel](${mainSitePath}/api.html#echartsInstance.convertToPixel) 的逆向过程。`myChart.convertFromPixel('grid', this.position)` 表示把当前像素坐标转换成 [grid](${optionPath}grid) 组件中直角坐标系的 dataItem 值。
最后，为了使 dom 尺寸改变时，图中的元素能自适应得变化，加上这些代码：
@@ -132,42 +134,47 @@ window.addEventListener('resize', function() {
```js
myChart.setOption({
- ...,
- tooltip: {
- // 表示不使用默认的“显示”“隐藏”触发规则。
- triggerOn: 'none',
- formatter: function (params) {
- return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);
- }
+ // ...,
+ tooltip: {
+ // 表示不使用默认的“显示”“隐藏”触发规则。
+ triggerOn: 'none',
+ formatter: function(params) {
+ return (
+ 'X: ' +
+ params.data[0].toFixed(2) +
+ '<br>Y: ' +
+ params.data[1].toFixed(2)
+ );
}
+ }
});
```
```js
myChart.setOption({
- graphic: echarts.util.map(data, function (item, dataIndex) {
- return {
- type: 'circle',
- ...,
- // 在 mouseover 的时候显示，在 mouseout 的时候隐藏。
- onmousemove: echarts.util.curry(showTooltip, dataIndex),
- onmouseout: echarts.util.curry(hideTooltip, dataIndex),
- };
- })
+ graphic: data.map(function(item, dataIndex) {
+ return {
+ type: 'circle',
+ // ...,
+ // 在 mouseover 的时候显示，在 mouseout 的时候隐藏。
+ onmousemove: echarts.util.curry(showTooltip, dataIndex),
+ onmouseout: echarts.util.curry(hideTooltip, dataIndex)
+ };
+ })
});
function showTooltip(dataIndex) {
- myChart.dispatchAction({
- type: 'showTip',
- seriesIndex: 0,
- dataIndex: dataIndex
- });
+ myChart.dispatchAction({
+ type: 'showTip',
+ seriesIndex: 0,
+ dataIndex: dataIndex
+ });
}
function hideTooltip(dataIndex) {
- myChart.dispatchAction({
- type: 'hideTip'
- });
+ myChart.dispatchAction({
+ type: 'hideTip'
+ });
}
```
diff --git a/contents/zh/application/label/rich-text.md b/contents/zh/application/label/rich-text.md
index 728bc69..9c361c1 100644
--- a/contents/zh/application/label/rich-text.md
+++ b/contents/zh/application/label/rich-text.md
@@ -166,18 +166,12 @@ option = {
}
],
xAxis: {
- axisLabel: { show: false },
- axisLine: { show: false },
- splitLine: { show: false },
- axisTick: { show: false },
+ show: false,
min: -1,
max: 1
},
yAxis: {
- axisLabel: { show: false },
- axisLine: { show: false },
- splitLine: { show: false },
- axisTick: { show: false },
+ show: false,
min: -1,
max: 1
}
@@ -233,7 +227,7 @@ option = {
};
```
-> 注意：`position` 在不同的图中可取值有所不同。`distance` 并不是在每个图中都支持。详情请参见 [option 文档](option.html)。
+> 注意：`position` 在不同的图中可取值有所不同。`distance` 并不是在每个图中都支持。详情请参见 [option 文档](${mainSitePath}option.html)。
## 标签的旋转
@@ -521,4 +515,4 @@ labelOption = {
};
```
-简单表格的设定，其实就是给不同行上纵向对应的文本片段设定同样的宽度就可以了。
+简单表格的设定，其实就是给不同行上纵向对应的文本片段设定同样的宽度就可以了。见 [该例子](${exampleEditorPath}pie-rich-text)
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org