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 2022/01/19 03:06:56 UTC
[echarts-doc] branch dev updated: add valueFormatter doc. apache/echarts#16332
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/echarts-doc.git
The following commit(s) were added to refs/heads/dev by this push:
new 6965871 add valueFormatter doc. apache/echarts#16332
6965871 is described below
commit 69658712019774ed911c2b2eb4a6719877c7ca4e
Author: pissang <bm...@gmail.com>
AuthorDate: Wed Jan 19 11:03:11 2022 +0800
add valueFormatter doc. apache/echarts#16332
---
en/option/partial/formatter.md | 43 -------------------------------------
en/option/partial/select-common.md | 1 -
en/option/partial/tooltip-common.md | 29 +++++++++++++++----------
en/option/partial/zr-graphic.md | 5 ++---
public/lib/reset.css | 19 ++++++++--------
zh/option/partial/formatter.md | 5 ++---
zh/option/partial/tooltip-common.md | 32 ++++++++++++++++++---------
7 files changed, 54 insertions(+), 80 deletions(-)
diff --git a/en/option/partial/formatter.md b/en/option/partial/formatter.md
index cfd6147..e5707e2 100644
--- a/en/option/partial/formatter.md
+++ b/en/option/partial/formatter.md
@@ -35,46 +35,3 @@
// Color of data
color: string,
-{{ for: ${extra} as ${obj}, ${name} }}{{ if: ${extra}.hasOwnProperty(${name}) }}
- // ${obj.desc}
- ${name}: ${obj.type},
-{{ /if }}{{ /for }}
-
-}
-```
-
-Note: the usage of encode and dimensionNames can be:
-
-If data is:
-```ts
-dataset: {
- source: [
- ['Matcha Latte', 43.3, 85.8, 93.7],
- ['Milk Tea', 83.1, 73.4, 55.1],
- ['Cheese Cocoa', 86.4, 65.2, 82.5],
- ['Walnut Brownie', 72.4, 53.9, 39.1]
- ]
-}
-```
-We can get values that corresponding to y axis by:
-```ts
-params.value[params.encode.y[0]]
-```
-
-If data is:
-```ts
-dataset: {
- dimensions: ['product', '2015', '2016', '2017'],
- source: [
- {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
- {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
- {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
- {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
- ]
-}
-```
-We can get values that corresponding to y axis by:
-```ts
-params.value[params.dimensionNames[params.encode.y[0]]]
-```
-
diff --git a/en/option/partial/select-common.md b/en/option/partial/select-common.md
index 39272cd..93106e0 100644
--- a/en/option/partial/select-common.md
+++ b/en/option/partial/select-common.md
@@ -7,4 +7,3 @@
If data can be selected. Available when `selectedMode` is used. Can be used to disable selection for part of the data.
-
diff --git a/en/option/partial/tooltip-common.md b/en/option/partial/tooltip-common.md
index 06cc335..49c4e74 100644
--- a/en/option/partial/tooltip-common.md
+++ b/en/option/partial/tooltip-common.md
@@ -14,10 +14,6 @@ tooltip can be configured on different places:
+ Configured in each item of `series.data`: [series.data.tooltip](~series.data.tooltip)
----
-
-
-
{{ target: partial-tooltip-in-coords }}
## tooltip(Object)
@@ -30,8 +26,6 @@ tooltip can be configured on different places:
tooltip settings in the coordinate system component.
----
-
{{ use: partial-tooltip-introduction() }}
{{ use: partial-tooltip-coords-common(
@@ -48,7 +42,7 @@ tooltip settings in the coordinate system component.
{{ target: partial-tooltip-in-coords-item }}
-### tooltip(*)
+### tooltip(Object)
{{ if: ${version} }}
{{ use: partial-version(
@@ -72,7 +66,7 @@ tooltip settings in this ${componentItemDesc}.
{{ target: partial-tooltip-in-series }}
-## tooltip(*)
+## tooltip(Object)
tooltip settings in this series.
@@ -85,7 +79,7 @@ tooltip settings in this series.
{{ target: partial-tooltip-in-series-data }}
-### tooltip(*)
+### tooltip(Object)
tooltip settings in this series data.
@@ -99,9 +93,7 @@ tooltip settings in this series data.
{{ target: partial-tooltip-scope-tip }}
{{ if: ${scope} === 'series' }}
-<br>
> **Notice：**series.tooltip only works when [tooltip.trigger](~tooltip.trigger) is `'item'`.<br>
-
{{ elif: ${scope} === 'seriesData' }}
> **Notice：**series.data.tooltip only works when [tooltip.trigger](~tooltip.trigger) is `'item'`.<br>
{{ /if }}
@@ -345,6 +337,21 @@ formatter: function (params, ticket, callback) {
}
```
+#${prefix} valueFormatter(string)
+
+Callback function for formatting the value section in tooltip.
+
+Interface:
+```ts
+(value: number | string) => string
+```
+
+Example:
+```ts
+// Add $ prefix
+valueFormatter: (value) => '$' + value.toFixed(2)
+```
+
#${prefix} backgroundColor(Color) = 'rgba(50,50,50,0.7)'
{{ use: partial-tooltip-scope-tip(
diff --git a/en/option/partial/zr-graphic.md b/en/option/partial/zr-graphic.md
index 8d5b170..e21f92a 100644
--- a/en/option/partial/zr-graphic.md
+++ b/en/option/partial/zr-graphic.md
@@ -1107,7 +1107,6 @@ Optional values:
symbolDeclare = ${symbolDeclare}
) }}
-{{ if: ${usageType} === 'customSeries' }}
##${prefix} transition(string|Array) = ['x', 'y']
You can specify that all properties have transition animations turned on with `'all'', or you can specify a single property or an array of properties.
@@ -1140,7 +1139,6 @@ The properties can only be:
By default, `'x'` and `'y'` are transitioned. If you want to disable the default transition, just set it as: `transition: []`.
See this [example](${galleryEditorPath}doc-example/custom-transition-simple&edit=1&reset=1) please.
-{{ /if }}
{{ if: ${usageType} === 'customSeries' && ${enableMorph} }}
##${prefix} morph(boolean) = false
@@ -1148,7 +1146,6 @@ See this [example](${galleryEditorPath}doc-example/custom-transition-simple&edit
Whether to enable morphing animation.
If you enabled [universalTransition](~series-custom.universalTransition) and then the update has different types of shape, for example from `rect` to `circle`, it will apply the morph animation. Set this property to `false` to turn it off.
-
{{ /if }}
{{ if: ${usageType} === 'graphicComponent' }}
@@ -1520,6 +1517,7 @@ If [top](~${optionPath}.${hostName}${symbolVisit}${type}.top) or [bottom](~${opt
{{ target: partial-graphic-cpt-sub-prop-transition }}
+{{ if: ${usageType} === 'customSeries' }}
###${prefix} transition(string|Array) = undefined
Can be a single property name or an array of property names.
@@ -1549,6 +1547,7 @@ We can also specify all of the properties like this:
transition: '${hostProp}',
};
```
+{{ /if }}
diff --git a/public/lib/reset.css b/public/lib/reset.css
index 2d61c6b..3dc00a0 100644
--- a/public/lib/reset.css
+++ b/public/lib/reset.css
@@ -4,9 +4,11 @@ body {
}
#header {
- background: #162436;
- color: #fff;
- height: 40px;
+ background-color: #fff;
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+ position: relative;
+ z-index: 20;
+ height: 50px;
padding-left: 20px;
box-sizing: border-box;
@@ -15,12 +17,11 @@ body {
}
#header h1 {
- font-weight: 200;
- font-size: 20px;
- line-height: 40px;
+ color: #222;
+ line-height: 50px;
margin: 0;
+ font-size: 20px;
display: inline-block;
- vertical-align: middle;
}
#header .lang {
@@ -28,7 +29,7 @@ body {
position: absolute;
display: inline-block;
vertical-align: middle;
- line-height: 40px;
+ line-height: 50px;
margin-left: 50px;
}
@@ -36,7 +37,7 @@ body {
position: absolute;
left: 0;
right: 0;
- top: 40px;
+ top: 50px;
bottom: 0;
/* width: 1600px;
diff --git a/zh/option/partial/formatter.md b/zh/option/partial/formatter.md
index 33594d2..a16270b 100644
--- a/zh/option/partial/formatter.md
+++ b/zh/option/partial/formatter.md
@@ -33,10 +33,9 @@
// 仅在雷达图中使用。
dimensionIndex: number,
// 数据图形的颜色
- color: string,
-{{ for: ${extra} as ${obj}, ${name} }}{{ if: ${extra}.hasOwnProperty(${name}) }}
+ color: string{{ for: ${extra} as ${obj}, ${name} }}{{ if: ${extra}.hasOwnProperty(${name}) }},
// ${obj.desc}
- ${name}: ${obj.type},{{ /if }}{{ /for }}
+ ${name}: ${obj.type}{{ /if }}{{ /for }}
}
```
diff --git a/zh/option/partial/tooltip-common.md b/zh/option/partial/tooltip-common.md
index 9e9a179..863d94b 100644
--- a/zh/option/partial/tooltip-common.md
+++ b/zh/option/partial/tooltip-common.md
@@ -27,8 +27,6 @@
本坐标系特定的 tooltip 设定。
----
-
{{ use: partial-tooltip-introduction() }}
{{ use: partial-tooltip-coords-common(
@@ -45,7 +43,7 @@
{{ target: partial-tooltip-in-coords-item }}
-### tooltip(*)
+### tooltip(Object)
{{ if: ${version} }}
{{ use: partial-version(
@@ -82,7 +80,7 @@
{{ target: partial-tooltip-in-series-data }}
-### tooltip(*)
+### tooltip(Object)
本系列每个数据项中特定的 tooltip 设定。
@@ -147,8 +145,6 @@
> **注意：** `tooltip.axisPointer` 中诸配置项的优先级低于轴上的 axisPointer 的配置项。
----
-
{{ use: partial-axisPointer-introduction() }}
##${prefix} type(string) = 'line'
@@ -324,11 +320,11 @@ formatter: '{b0}: {c0}<br />{b1}: {c1}'
{{ use: partial-formatter-params-structure(
extra = {
- percent: {
- desc: '饼图的百分比',
- type = 'number'
+ percent: {
+ desc: '饼图，漏斗图的百分比',
+ type = 'number'
+ }
}
-}
) }}
在 [trigger](~tooltip.trigger) 为 `'axis'` 的时候，或者 tooltip 被 [axisPointer](~xAxis.axisPointer) 触发的时候，`params` 是多个系列的数据数组。其中每项内容格式同上，并且，
@@ -348,6 +344,22 @@ formatter: function (params, ticket, callback) {
}
```
+#${prefix} valueFormatter(string)
+
+tooltip 中数值显示部分的格式化回调函数。
+
+回调函数格式：
+
+```ts
+(value: number | string) => string
+```
+
+示例：
+
+```ts
+// 添加 $ 前缀
+valueFormatter: (value) => '$' + value.toFixed(2)
+```
#${prefix} backgroundColor(Color) = 'rgba(50,50,50,0.7)'
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org