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/05/31 03:58:59 UTC
[echarts-handbook] branch master updated: format code
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 558f507 format code
558f507 is described below
commit 558f507097e43633a8959df6baf032fa179e27a2
Author: pissang <bm...@gmail.com>
AuthorDate: Mon May 31 11:58:44 2021 +0800
format code
---
.eslintrc.js | 9 +-
components/partials/Navbar.vue | 9 +-
components/partials/Sidebar.vue | 239 ++++++++---------
contents/zh/concepts/axis.md | 22 +-
contents/zh/concepts/data-transform.md | 465 +++++++++++++++++----------------
contents/zh/posts.js | 281 +++++++++++++-------
pages/helper/post.ts | 35 +--
7 files changed, 596 insertions(+), 464 deletions(-)
diff --git a/.eslintrc.js b/.eslintrc.js
index b1aa417..df75115 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -4,7 +4,14 @@ module.exports = {
browser: true,
node: true
},
- extends: ['@nuxtjs/eslint-config-typescript', 'plugin:nuxt/recommended'],
+ extends: [
+ '@nuxtjs/eslint-config-typescript',
+ 'plugin:nuxt/recommended',
+ 'plugin:prettier/recommended',
+ 'prettier',
+ 'prettier/vue'
+ ],
+ plugins: ['prettier'],
// add your custom rules here
rules: {
'space-before-function-paren': 0
diff --git a/components/partials/Navbar.vue b/components/partials/Navbar.vue
index 364579d..1117d2e 100644
--- a/components/partials/Navbar.vue
+++ b/components/partials/Navbar.vue
@@ -8,16 +8,11 @@ import zhNav from './Navbar/zh'
import enNav from './Navbar/en'
export default Vue.extend({
- components: {
-
- },
+ components: {},
computed: {
navContent() {
- return this.$store.state.locale === 'zh'
- ? zhNav
- : enNav
+ return this.$store.state.locale === 'zh' ? zhNav : enNav
}
}
})
-
</script>
diff --git a/components/partials/Sidebar.vue b/components/partials/Sidebar.vue
index 6d4c6ab..2e05af0 100644
--- a/components/partials/Sidebar.vue
+++ b/components/partials/Sidebar.vue
@@ -2,17 +2,20 @@
<div class="bd-sidebar border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10">
<!-- active: {{ active }}. {{ posts }} -->
<div class="bd-docs-nav">
- <div class="bd-toc-item level0"
+ <div
+ class="bd-toc-item level0"
v-for="level0Post in $store.state.posts[this.$store.state.locale]"
:key="level0Post.dir"
>
- <a class="bd-toc-link"
+ <a
+ class="bd-toc-link"
:href="level0Post.children ? 'javascript:;' : level0Post.dir"
v-if="!level0Post.draft"
>
{{ level0Post.title }}
</a>
- <ul class="nav bd-sidenav level1"
+ <ul
+ class="nav bd-sidenav level1"
v-if="!level0Post.draft && level0Post.children"
>
<SidebarNavItem
@@ -30,21 +33,18 @@
</template>
<script lang="ts">
-
-import Vue from 'vue';
-import SidebarNavItem from './SidebarNavItem.vue';
-import scrollIntoView from 'scroll-into-view';
+import Vue from 'vue'
+import scrollIntoView from 'scroll-into-view'
+import SidebarNavItem from './SidebarNavItem.vue'
export default Vue.extend({
-
components: {
SidebarNavItem
},
mounted() {
-
setTimeout(() => {
- const $actived = this.$el.querySelector('.actived') as HTMLElement;
+ const $actived = this.$el.querySelector('.actived') as HTMLElement
if ($actived) {
scrollIntoView($actived, {
time: 200,
@@ -52,15 +52,16 @@ export default Vue.extend({
top: 0,
topOffset: 300
},
- isScrollable: function(target){
- return !!target.className && target.className.indexOf('bd-sidebar') >= 0;
+ isScrollable(target) {
+ return (
+ !!target.className && target.className.indexOf('bd-sidebar') >= 0
+ )
}
- });
+ })
}
- }, 0);
+ }, 0)
}
-});
-
+})
</script>
<style lang="scss">
@@ -74,130 +75,132 @@ export default Vue.extend({
border-right: 1px solid #eee;
}
- .bd-toc-item {
- margin-bottom: 10px;
- }
-
- .bd-sidenav {
- margin-top: 4px;
- margin-left: 10px;
- display: none;
- }
+.bd-toc-item {
+ margin-bottom: 10px;
+}
- .bd-toc-link {
- font-weight: bold;
- color: #333;
+.bd-sidenav {
+ margin-top: 4px;
+ margin-left: 10px;
+ display: none;
+}
- &[href="javascript:;"] {
- cursor: default;
+.bd-toc-link {
+ font-weight: bold;
+ color: #333;
- &:focus, &:hover {
- text-decoration: none;
- }
- }
+ &[href='javascript:;'] {
+ cursor: default;
- &:focus, &:hover {
- color: #151515;
- }
+ &:focus,
+ &:hover {
+ text-decoration: none;
}
+ }
- .page-content {
- padding-bottom: 0;
+ &:focus,
+ &:hover {
+ color: #151515;
+ }
+}
- .nav {
- display: block;
- }
+.page-content {
+ padding-bottom: 0;
- ul.nav {
- padding-left: 0;
- }
+ .nav {
+ display: block;
+ }
- .nav>li>a:focus, .nav>li>a:hover {
- background-color: transparent;
- }
+ ul.nav {
+ padding-left: 0;
+ }
- .nav .b-icon.bi {
- font-size: 90%;
- opacity: 0.6;
- position: relative;
- top: -2px;
- }
+ .nav > li > a:focus,
+ .nav > li > a:hover {
+ background-color: transparent;
+ }
- .glyphicon {
- padding: 5px;
- color: #ccc;
- cursor: pointer;
- transform: scale(0.8);
- top: 2px;
- left: -4px;
- margin: -5px 0;
- }
+ .nav .b-icon.bi {
+ font-size: 90%;
+ opacity: 0.6;
+ position: relative;
+ top: -2px;
+ }
- .nav-link .glyphicon-menu-up {
- display: none;
- }
+ .glyphicon {
+ padding: 5px;
+ color: #ccc;
+ cursor: pointer;
+ transform: scale(0.8);
+ top: 2px;
+ left: -4px;
+ margin: -5px 0;
+ }
- .active .nav-link .glyphicon-menu-up {
- display: inline-block;
- }
+ .nav-link .glyphicon-menu-up {
+ display: none;
+ }
- .active .nav-link .glyphicon-menu-down {
- display: none;
- }
+ .active .nav-link .glyphicon-menu-up {
+ display: inline-block;
+ }
- .level1 {
- margin-top: 4px;
- font-size: 14px;
+ .active .nav-link .glyphicon-menu-down {
+ display: none;
+ }
- .nav-link {
- padding: 5px 0;
- color: #707070;
+ .level1 {
+ margin-top: 4px;
+ font-size: 14px;
- &:hover {
- color: #151515;
- }
- }
- }
+ .nav-link {
+ padding: 5px 0;
+ color: #707070;
- .level2 {
- margin-top: 1px;
+ &:hover {
+ color: #151515;
+ }
+ }
+ }
- .level3 {
- margin-top: 0;
- }
+ .level2 {
+ margin-top: 1px;
- .nav-link {
- color: #666;
- padding: 0;
- }
- }
+ .level3 {
+ margin-top: 0;
+ }
- .nav.level3 {
- font-size: 12px;
- padding-left: 10px;
- margin-left: 0;
- display: none;
+ .nav-link {
+ color: #666;
+ padding: 0;
+ }
+ }
- li {
- display: list-item;
- list-style: disc;
- }
- }
-
- .level1 .nav-link {
- color: #444;
- }
-
- .nav.level2 {
- border-left: 1px solid #eee;
- padding-left: 10px;
- margin-left: 0;
- }
-
- .level2 .nav-link {
- margin: 2px 0;
- color: #888;
- }
+ .nav.level3 {
+ font-size: 12px;
+ padding-left: 10px;
+ margin-left: 0;
+ display: none;
+
+ li {
+ display: list-item;
+ list-style: disc;
}
+ }
+ .level1 .nav-link {
+ color: #444;
+ }
+
+ .nav.level2 {
+ border-left: 1px solid #eee;
+ padding-left: 10px;
+ margin-left: 0;
+ }
+
+ .level2 .nav-link {
+ margin: 2px 0;
+ color: #888;
+ }
+}
</style>
diff --git a/contents/zh/concepts/axis.md b/contents/zh/concepts/axis.md
index 7316718..b64cc58 100644
--- a/contents/zh/concepts/axis.md
+++ b/contents/zh/concepts/axis.md
@@ -1,14 +1,16 @@
# 坐标轴
+
直角坐标系中的 x/y 轴。
-## x轴、y轴
-x轴和y轴都由轴线、刻度、刻度标签、轴标题四个部分组成。部分图表中还会有网格线来帮助查看和计算数据
+## x 轴、y 轴
+
+x 轴和 y 轴都由轴线、刻度、刻度标签、轴标题四个部分组成。部分图表中还会有网格线来帮助查看和计算数据
<img max-width="830" width="100%" height="100%"
src="${rootPath}/images/design/axis/charts_axis_img02.jpg">
</img>
-普通的二维数据坐标系都有x轴和y轴，通常情况下，x轴显示在图表的底部，y轴显示在左侧，一般配置如下：
+普通的二维数据坐标系都有 x 轴和 y 轴，通常情况下，x 轴显示在图表的底部，y 轴显示在左侧，一般配置如下：
```js
option = {
@@ -22,7 +24,7 @@ option = {
};
```
-x轴常用来标示数据的维度，维度一般用来指数据的类别，是观察数据的角度，例如“销售时间” “销售地点” “产品名称”等。y轴常常用来标示数据的数值，数值是用来具体考察某一类数据的数量值，也是我们需要分析的指标，例如“销售数量”和“销售金额”等。
+x 轴常用来标示数据的维度，维度一般用来指数据的类别，是观察数据的角度，例如“销售时间” “销售地点” “产品名称”等。y 轴常常用来标示数据的数值，数值是用来具体考察某一类数据的数量值，也是我们需要分析的指标，例如“销售数量”和“销售金额”等。
```js
option = {
@@ -40,7 +42,7 @@ option = {
};
```
-当x轴（水平坐标轴）跨度很大，可以采用才区域缩放方式灵活显示数据内容。
+当 x 轴（水平坐标轴）跨度很大，可以采用才区域缩放方式灵活显示数据内容。
```js
option = {
@@ -59,7 +61,7 @@ option = {
};
```
-在二维数据中，轴也可以有多个。ECharts 中一般情况下单个 grid 组件最多只能放两个 x/y 轴，多于两个 x/y 轴需要通过配置 [offset](${optionPath}xAxis.offset) 属性防止同个位置多个轴的重叠。两个x轴显示在上下，两个y轴显示在左右两侧。
+在二维数据中，轴也可以有多个。ECharts 中一般情况下单个 grid 组件最多只能放两个 x/y 轴，多于两个 x/y 轴需要通过配置 [offset](${optionPath}xAxis.offset) 属性防止同个位置多个轴的重叠。两个 x 轴显示在上下，两个 y 轴显示在左右两侧。
```js
option = {
@@ -85,6 +87,7 @@ option = {
```
## 轴线
+
ECharts 提供了轴线 [axisLine](${optionPath}xAxis.axisLine) 相关的配置，我们可以根据实际情况调整，例如轴线两端的箭头，轴线的样式等。
```js
@@ -113,6 +116,7 @@ option = {
```
## 刻度
+
ECharts 提供了轴线 [axisTick](${optionPath}xAxis.axisTick) 相关的配置，我们可以根据实际情况调整，例如刻度线的长度，样式等。
```js
@@ -141,6 +145,7 @@ option = {
```
## 刻度标签
+
ECharts 提供了轴线 [axisLabel](${optionPath}xAxis.axisLabel) 相关的配置，我们可以根据实际情况调整，例如文字对齐方式，自定义刻度标签内容等。
```js
@@ -165,11 +170,12 @@ option = {
```
## 示例
-图左侧的y轴代表东京月平均气温，右侧的y轴表示东京降水量，x轴表示时间。两组y轴在一起，反映了平均气温和降水量间的趋势关系。
+
+图左侧的 y 轴代表东京月平均气温，右侧的 y 轴表示东京降水量，x 轴表示时间。两组 y 轴在一起，反映了平均气温和降水量间的趋势关系。
+
<!-- src 需要替换 -->
<iframe max-width="830" width="100%" height="400"
src="https://gallery.echartsjs.com/view-lite.html?cid=xrJYBh__4z">
</iframe>
-
这里简要介绍了坐标轴相关的常用配置项及用法，更多关于坐标轴配置项及用法请移步[官网](${optionPath}xAxis)。
diff --git a/contents/zh/concepts/data-transform.md b/contents/zh/concepts/data-transform.md
index 20aa5aa..78ea4f8 100644
--- a/contents/zh/concepts/data-transform.md
+++ b/contents/zh/concepts/data-transform.md
@@ -3,13 +3,13 @@
Apache ECharts<sup>TM</sup> 5 开始支持了“数据转换”（ data transform ）功能。在 echarts 中，“数据转换” 这个词指的是，给定一个已有的“数据集”（[dataset](${optionPath}#dataset)）和一个“转换方法”（[transform](${optionPath}#dataset.transform)），echarts 能生成一个新的“数据集”，然后可以使用这个新的“数据集”绘制图表。这些工作都可以声明式地完成。
抽象地来说，数据转换是这样一种公式：`outData = f(inputData)`。`f` 是转换方法，例如：`filter`、`sort`、`regression`、`boxplot`、`cluster`、`aggregate`(todo) 等等。有了数据转换能力后，我们就至少可以做到这些事情：
-+ 把数据分成多份用不同的饼图展现。
-+ 进行一些数据统计运算，并展示结果。
-+ 用某些数据可视化算法处理数据，并展示结果。
-+ 数据排序。
-+ 去除或直选择数据项。
-+ ...
+- 把数据分成多份用不同的饼图展现。
+- 进行一些数据统计运算，并展示结果。
+- 用某些数据可视化算法处理数据，并展示结果。
+- 数据排序。
+- 去除或直选择数据项。
+- ...
## 数据转换基础使用
@@ -17,77 +17,92 @@ Apache ECharts<sup>TM</sup> 5 开始支持了“数据转换”（ data transfor
```js
var option = {
- dataset: [{
- // 这个 dataset 的 index 是 `0`。
- source: [
- ['Product', 'Sales', 'Price', 'Year'],
- ['Cake', 123, 32, 2011],
- ['Cereal', 231, 14, 2011],
- ['Tofu', 235, 5, 2011],
- ['Dumpling', 341, 25, 2011],
- ['Biscuit', 122, 29, 2011],
- ['Cake', 143, 30, 2012],
- ['Cereal', 201, 19, 2012],
- ['Tofu', 255, 7, 2012],
- ['Dumpling', 241, 27, 2012],
- ['Biscuit', 102, 34, 2012],
- ['Cake', 153, 28, 2013],
- ['Cereal', 181, 21, 2013],
- ['Tofu', 395, 4, 2013],
- ['Dumpling', 281, 31, 2013],
- ['Biscuit', 92, 39, 2013],
- ['Cake', 223, 29, 2014],
- ['Cereal', 211, 17, 2014],
- ['Tofu', 345, 3, 2014],
- ['Dumpling', 211, 35, 2014],
- ['Biscuit', 72, 24, 2014],
- ],
- // id: 'a'
- }, {
- // 这个 dataset 的 index 是 `1`。
- // 这个 `transform` 配置，表示，此 dataset 的数据，来自于此 transform 的结果。
- transform: {
- type: 'filter',
- config: { dimension: 'Year', value: 2011 }
- },
- // 我们还可以设置这些可选的属性： `fromDatasetIndex` 或 `fromDatasetId`。
- // 这些属性，指定了，transform 的输入，来自于哪个 dataset。例如，
- // `fromDatasetIndex: 0` 表示输入来自于 index 为 `0` 的 dataset 。又例如，
- // `fromDatasetId: 'a'` 表示输入来自于 `id: 'a'` 的 dataset。
- // 当这些属性都不指定时，默认认为，输入来自于 index 为 `0` 的 dataset 。
- }, {
- // 这个 dataset 的 index 是 `2`。
- // 同样，这里因为 `fromDatasetIndex` 和 `fromDatasetId` 都没有被指定，
- // 那么输入默认来自于 index 为 `0` 的 dataset 。
- transform: {
- // 这个类型为 "filter" 的 transform 能够遍历并筛选出满足条件的数据项。
- type: 'filter',
- // 每个 transform 如果需要有配置参数的话，都须配置在 `config` 里。
- // 在这个 "filter" transform 中，`config` 用于指定筛选条件。
- // 下面这个筛选条件是：选出维度（ dimension ）'Year' 中值为 2012 的所有
- // 数据项。
- config: { dimension: 'Year', value: 2012 }
- }
- }, {
- // 这个 dataset 的 index 是 `3`。
- transform: {
- type: 'filter',
- config: { dimension: 'Year', value: 2013 }
- }
- }],
- series: [{
- type: 'pie', radius: 50, center: ['25%', '50%'],
- // 这个饼图系列，引用了 index 为 `1` 的 dataset 。也就是，引用了上述
- // 2011 年那个 "filter" transform 的结果。
- datasetIndex: 1
- }, {
- type: 'pie', radius: 50, center: ['50%', '50%'],
- datasetIndex: 2
- }, {
- type: 'pie', radius: 50, center: ['75%', '50%'],
- datasetIndex: 3
- }]
-};
+ dataset: [
+ {
+ // 这个 dataset 的 index 是 `0`。
+ source: [
+ ['Product', 'Sales', 'Price', 'Year'],
+ ['Cake', 123, 32, 2011],
+ ['Cereal', 231, 14, 2011],
+ ['Tofu', 235, 5, 2011],
+ ['Dumpling', 341, 25, 2011],
+ ['Biscuit', 122, 29, 2011],
+ ['Cake', 143, 30, 2012],
+ ['Cereal', 201, 19, 2012],
+ ['Tofu', 255, 7, 2012],
+ ['Dumpling', 241, 27, 2012],
+ ['Biscuit', 102, 34, 2012],
+ ['Cake', 153, 28, 2013],
+ ['Cereal', 181, 21, 2013],
+ ['Tofu', 395, 4, 2013],
+ ['Dumpling', 281, 31, 2013],
+ ['Biscuit', 92, 39, 2013],
+ ['Cake', 223, 29, 2014],
+ ['Cereal', 211, 17, 2014],
+ ['Tofu', 345, 3, 2014],
+ ['Dumpling', 211, 35, 2014],
+ ['Biscuit', 72, 24, 2014]
+ ]
+ // id: 'a'
+ },
+ {
+ // 这个 dataset 的 index 是 `1`。
+ // 这个 `transform` 配置，表示，此 dataset 的数据，来自于此 transform 的结果。
+ transform: {
+ type: 'filter',
+ config: { dimension: 'Year', value: 2011 }
+ }
+ // 我们还可以设置这些可选的属性： `fromDatasetIndex` 或 `fromDatasetId`。
+ // 这些属性，指定了，transform 的输入，来自于哪个 dataset。例如，
+ // `fromDatasetIndex: 0` 表示输入来自于 index 为 `0` 的 dataset 。又例如，
+ // `fromDatasetId: 'a'` 表示输入来自于 `id: 'a'` 的 dataset。
+ // 当这些属性都不指定时，默认认为，输入来自于 index 为 `0` 的 dataset 。
+ },
+ {
+ // 这个 dataset 的 index 是 `2`。
+ // 同样，这里因为 `fromDatasetIndex` 和 `fromDatasetId` 都没有被指定，
+ // 那么输入默认来自于 index 为 `0` 的 dataset 。
+ transform: {
+ // 这个类型为 "filter" 的 transform 能够遍历并筛选出满足条件的数据项。
+ type: 'filter',
+ // 每个 transform 如果需要有配置参数的话，都须配置在 `config` 里。
+ // 在这个 "filter" transform 中，`config` 用于指定筛选条件。
+ // 下面这个筛选条件是：选出维度（ dimension ）'Year' 中值为 2012 的所有
+ // 数据项。
+ config: { dimension: 'Year', value: 2012 }
+ }
+ },
+ {
+ // 这个 dataset 的 index 是 `3`。
+ transform: {
+ type: 'filter',
+ config: { dimension: 'Year', value: 2013 }
+ }
+ }
+ ],
+ series: [
+ {
+ type: 'pie',
+ radius: 50,
+ center: ['25%', '50%'],
+ // 这个饼图系列，引用了 index 为 `1` 的 dataset 。也就是，引用了上述
+ // 2011 年那个 "filter" transform 的结果。
+ datasetIndex: 1
+ },
+ {
+ type: 'pie',
+ radius: 50,
+ center: ['50%', '50%'],
+ datasetIndex: 2
+ },
+ {
+ type: 'pie',
+ radius: 50,
+ center: ['75%', '50%'],
+ datasetIndex: 3
+ }
+ ]
+}
```
下面是上述例子的效果，三个饼图分别显示了 2011、2012、2013 年的数据。
@@ -95,16 +110,16 @@ var option = {
<iframe width="800" height="300" src="${exampleViewPath}data-transform-multiple-pie&reset=1&edit=1"></iframe>
现在我们简单总结下，使用 transform 时的几个要点：
-+ 在一个空的 dataset 中声明 `transform`, `fromDatasetIndex`/`fromDatasetId` 来表示我们要生成新的数据。
-+ 系列引用这个 dataset 。
-
+- 在一个空的 dataset 中声明 `transform`, `fromDatasetIndex`/`fromDatasetId` 来表示我们要生成新的数据。
+- 系列引用这个 dataset 。
## 数据转换的进阶使用
#### 链式声明 transform
`transform` 可以被链式声明，这是一个语法糖。
+
```js
option: {
dataset: [{
@@ -130,8 +145,6 @@ option: {
> 注意：理论上，任何 transform 都可能有多个输入或多个输出。但是，如果一个 transform 被链式声明，它只能获取前一个 transform 的第一个输出作为输入（第一个 transform 除外），以及它只能把自己的第一个输出给到后一个 transform （最后一个 transform 除外）。
-
-
#### 一个 transform 输出多个 data
在大多数场景下，transform 只需输出一个 data 。但是也有一些场景，需要输出多个 data ，每个 data 可以被不同的 series 或者 dataset 所使用。
@@ -197,7 +210,6 @@ option = {
}
```
-
#### 在开发环境中 debug
使用 transform 时，有时候我们会配不对，显示不出来结果，并且不知道哪里错了。所以，这里提供了一个配置项 `transform.print` 方便 debug 。这个配置项只在开发环境中生效。如下例：
@@ -219,50 +231,52 @@ option = {
}
```
-
## 数据转换器 "filter"
echarts 内置提供了能起过滤作用的数据转换器。我们只需声明 `transform.type: "filter"`，以及给出数据筛选条件。如下例：
```js
option = {
- dataset: [{
- source: [
- ['Product', 'Sales', 'Price', 'Year'],
- ['Cake', 123, 32, 2011],
- ['Latte', 231, 14, 2011],
- ['Tofu', 235, 5, 2011],
- ['Milk Tee', 341, 25, 2011],
- ['Porridge', 122, 29, 2011],
- ['Cake', 143, 30, 2012],
- ['Latte', 201, 19, 2012],
- ['Tofu', 255, 7, 2012],
- ['Milk Tee', 241, 27, 2012],
- ['Porridge', 102, 34, 2012],
- ['Cake', 153, 28, 2013],
- ['Latte', 181, 21, 2013],
- ['Tofu', 395, 4, 2013],
- ['Milk Tee', 281, 31, 2013],
- ['Porridge', 92, 39, 2013],
- ['Cake', 223, 29, 2014],
- ['Latte', 211, 17, 2014],
- ['Tofu', 345, 3, 2014],
- ['Milk Tee', 211, 35, 2014],
- ['Porridge', 72, 24, 2014]
- ]
- }, {
- transform: {
- type: 'filter',
- config: { dimension: 'Year', '=': 2011 }
- // 这个筛选条件表示，遍历数据，筛选出维度（ dimension ）
- // 'Year' 上值为 2011 的所有数据项。
- }
- }],
- series: {
- type: 'pie',
- datasetIndex: 1
+ dataset: [
+ {
+ source: [
+ ['Product', 'Sales', 'Price', 'Year'],
+ ['Cake', 123, 32, 2011],
+ ['Latte', 231, 14, 2011],
+ ['Tofu', 235, 5, 2011],
+ ['Milk Tee', 341, 25, 2011],
+ ['Porridge', 122, 29, 2011],
+ ['Cake', 143, 30, 2012],
+ ['Latte', 201, 19, 2012],
+ ['Tofu', 255, 7, 2012],
+ ['Milk Tee', 241, 27, 2012],
+ ['Porridge', 102, 34, 2012],
+ ['Cake', 153, 28, 2013],
+ ['Latte', 181, 21, 2013],
+ ['Tofu', 395, 4, 2013],
+ ['Milk Tee', 281, 31, 2013],
+ ['Porridge', 92, 39, 2013],
+ ['Cake', 223, 29, 2014],
+ ['Latte', 211, 17, 2014],
+ ['Tofu', 345, 3, 2014],
+ ['Milk Tee', 211, 35, 2014],
+ ['Porridge', 72, 24, 2014]
+ ]
+ },
+ {
+ transform: {
+ type: 'filter',
+ config: { dimension: 'Year', '=': 2011 }
+ // 这个筛选条件表示，遍历数据，筛选出维度（ dimension ）
+ // 'Year' 上值为 2011 的所有数据项。
+ }
}
-};
+ ],
+ series: {
+ type: 'pie',
+ datasetIndex: 1
+ }
+}
```
<br>
@@ -271,29 +285,30 @@ option = {
<iframe width="600" height="350" src="${exampleViewPath}data-transform-filter&reset=1&edit=1"></iframe>
-
-
在 "filter" transform 中，有这些要素：
**关于维度（ dimension ）：**
`config.dimension` 指定了维度，能设成这样的值：
-+ 设定成声明在 dataset 中的维度名，例如 `config: { dimension: 'Year', '=': 2011 }`。不过， dataset 中维度名的声明并非强制，所以我们也可以
-+ 设定成 dataset 中的维度 index （index 值从 0 开始）例如 `config: { dimension: 3, '=': 2011 }`。
+
+- 设定成声明在 dataset 中的维度名，例如 `config: { dimension: 'Year', '=': 2011 }`。不过， dataset 中维度名的声明并非强制，所以我们也可以
+- 设定成 dataset 中的维度 index （index 值从 0 开始）例如 `config: { dimension: 3, '=': 2011 }`。
**关于关系比较操作符：**
关系操作符，可以设定这些：
`>`（`gt`）、`>=`（`gte`）、`<`（`lt`）、`<=`（`lte`）、`=`（`eq`）、`!=`（`ne`、`<>`）、`reg`。（小括号中的符号或名字，是别名，设置起来作用相同）。他们首先基本地能基于数值大小进行比较，然后也有些额外的功能特性：
-+ 多个关系操作符能声明在一个 {} 中，例如 `{ dimension: 'Price', '>=': 20, '<': 30 }`。这表示“与”的关系，即，筛选出价格大于等于 20 小雨 30 的数据项。
-+ data 里的值，不仅可以是数值（ number ），也可以是“类数值的字符串”（“ numeric string ”）。“类数值的字符串”本身是一个字符串，但是可以被转换为字面所描述的数值，例如 `' 123 '`。转换过程中，空格（全角半角空格）和换行符都能被消除（ trim ）。
-+ 如果我们需要对日期对象（JS `Date`）或者日期字符串（如 '2012-05-12'）进行比较，我们需要手动指定 `parser: 'time'`，例如 `config: { dimension: 3, lt: '2012-05-12', parser: 'time' }`。
-+ 纯字符串比较也被支持，但是只能用在 `=` 或 `!=` 上。而 `>`, `>=`, `<`, `<=` 并不支持纯字符串比较，也就是说，这四个操作符的右值，不能是字符串。
-+ `reg` 操作符能提供正则表达式比较。例如， `{ dimension: 'Name', reg: /\s+Müller\s*$/ }` 能在 `'Name'` 维度上选出姓 `'Müller'` 的数据项。
+
+- 多个关系操作符能声明在一个 {} 中，例如 `{ dimension: 'Price', '>=': 20, '<': 30 }`。这表示“与”的关系，即，筛选出价格大于等于 20 小雨 30 的数据项。
+- data 里的值，不仅可以是数值（ number ），也可以是“类数值的字符串”（“ numeric string ”）。“类数值的字符串”本身是一个字符串，但是可以被转换为字面所描述的数值，例如 `' 123 '`。转换过程中，空格（全角半角空格）和换行符都能被消除（ trim ）。
+- 如果我们需要对日期对象（JS `Date`）或者日期字符串（如 '2012-05-12'）进行比较，我们需要手动指定 `parser: 'time'`，例如 `config: { dimension: 3, lt: '2012-05-12', parser: 'time' }`。
+- 纯字符串比较也被支持，但是只能用在 `=` 或 `!=` 上。而 `>`, `>=`, `<`, `<=` 并不支持纯字符串比较，也就是说，这四个操作符的右值，不能是字符串。
+- `reg` 操作符能提供正则表达式比较。例如， `{ dimension: 'Name', reg: /\s+Müller\s*$/ }` 能在 `'Name'` 维度上选出姓 `'Müller'` 的数据项。
**关于逻辑比较：**
我们也支持了逻辑比较操作符 **与或非**（ `and` | `or` | `not` ）：
+
```js
option = {
dataset: [{
@@ -319,7 +334,9 @@ option = {
}
};
```
+
`and`/`or`/`not` 自然可以被嵌套，例如：
+
```js
transform: {
type: 'filter',
@@ -348,11 +365,13 @@ transform: {
**关于解析器（ parser ）：**
还可以指定“解析器”（ parser ）来对值进行解析后再做比较。现在支持的解析器有：
-+ `parser: 'time'`：把原始值解析成时间戳（ timestamp ）后再做比较。这个解析器的行为，和 `echarts.time.parse` 相同，即，当原始值为时间对象（ JS `Date` 实例），或者是时间戳，或者是描述时间的字符串（例如 `'2012-05-12 03:11:22'` ），都可以被解析为时间戳，然后就可以基于数值大小进行比较。如果原始数据是其他不可解析为时间戳的值，那么会被解析为 NaN。
-+ `parser: 'trim'`：如果原始数据是字符串，则把字符串两端的空格（全角半角）和换行符去掉。如果不是字符串，还保持为原始数据。
-+ `parser: 'number'`：强制把原始数据转成数值。如果不能转成有意义的数值，那么转成 `NaN`。在大多数场景下，我们并不需要这个解析器，因为按默认策略，“像数值的字符串”就会被转成数值。但是默认策略比较严格，这个解析器比较宽松，如果我们遇到含有尾缀的字符串（例如 `'33%'`, `12px`），我们需要手动指定 `parser: 'number'`，从而去掉尾缀转为数值才能比较。
+
+- `parser: 'time'`：把原始值解析成时间戳（ timestamp ）后再做比较。这个解析器的行为，和 `echarts.time.parse` 相同，即，当原始值为时间对象（ JS `Date` 实例），或者是时间戳，或者是描述时间的字符串（例如 `'2012-05-12 03:11:22'` ），都可以被解析为时间戳，然后就可以基于数值大小进行比较。如果原始数据是其他不可解析为时间戳的值，那么会被解析为 NaN。
+- `parser: 'trim'`：如果原始数据是字符串，则把字符串两端的空格（全角半角）和换行符去掉。如果不是字符串，还保持为原始数据。
+- `parser: 'number'`：强制把原始数据转成数值。如果不能转成有意义的数值，那么转成 `NaN`。在大多数场景下，我们并不需要这个解析器，因为按默认策略，“像数值的字符串”就会被转成数值。但是默认策略比较严格，这个解析器比较宽松，如果我们遇到含有尾缀的字符串（例如 `'33%'`, `12px`），我们需要手动指定 `parser: 'number'`，从而去掉尾缀转为数值才能比较。
这个例子显示了如何使用 `parser: 'time'`：
+
```js
option = {
dataset: [{
@@ -380,44 +399,45 @@ option = {
**形式化定义：**
最后，我们给出，数据转换器 "filter" 的 config 的形式化定义：
+
```ts
type FilterTransform = {
- type: 'filter';
- config: ConditionalExpressionOption;
-};
+ type: 'filter'
+ config: ConditionalExpressionOption
+}
type ConditionalExpressionOption =
- true | false | RelationalExpressionOption | LogicalExpressionOption;
+ | true
+ | false
+ | RelationalExpressionOption
+ | LogicalExpressionOption
type RelationalExpressionOption = {
- dimension: DimensionName | DimensionIndex;
- parser?: 'time' | 'trim' | 'number';
- lt?: DataValue; // less than
- lte?: DataValue; // less than or equal
- gt?: DataValue; // greater than
- gte?: DataValue; // greater than or equal
- eq?: DataValue; // equal
- ne?: DataValue; // not equal
- '<'?: DataValue; // lt
- '<='?: DataValue; // lte
- '>'?: DataValue; // gt
- '>='?: DataValue; // gte
- '='?: DataValue; // eq
- '!='?: DataValue; // ne
- '<>'?: DataValue; // ne (SQL style)
- reg?: RegExp | string; // RegExp
-};
+ dimension: DimensionName | DimensionIndex
+ parser?: 'time' | 'trim' | 'number'
+ lt?: DataValue // less than
+ lte?: DataValue // less than or equal
+ gt?: DataValue // greater than
+ gte?: DataValue // greater than or equal
+ eq?: DataValue // equal
+ ne?: DataValue // not equal
+ '<'?: DataValue // lt
+ '<='?: DataValue // lte
+ '>'?: DataValue // gt
+ '>='?: DataValue // gte
+ '='?: DataValue // eq
+ '!='?: DataValue // ne
+ '<>'?: DataValue // ne (SQL style)
+ reg?: RegExp | string // RegExp
+}
type LogicalExpressionOption = {
- and?: ConditionalExpressionOption[];
- or?: ConditionalExpressionOption[];
- not?: ConditionalExpressionOption;
-};
-type DataValue = string | number | Date;
-type DimensionName = string;
-type DimensionIndex = number;
+ and?: ConditionalExpressionOption[]
+ or?: ConditionalExpressionOption[]
+ not?: ConditionalExpressionOption
+}
+type DataValue = string | number | Date
+type DimensionName = string
+type DimensionIndex = number
```
-
-
-
## 数据转换器 "sort"
"sort" 是另一个内置的数据转换器，用于排序数据。目前主要能用于在类目轴（ `axis.type: 'category'` ）中显示排过序的数据。例如：
@@ -454,19 +474,19 @@ option = {
<iframe width="600" height="350" src="${exampleViewPath}data-transform-sort-bar&reset=1&edit=1"></iframe>
-
数据转换器 "sort" 还有一些额外的功能：
-+ 可以多重排序，多个维度一起排序。见下面的例子。
-+ 排序规则是这样的：
- + 默认按照数值大小排序。其中，“可转为数值的字符串”也被转换成数值，和其他数值一起按大小排序。
- + 对于其他“不能转为数值的字符串”，也能在它们之间按字符串进行排序。这个特性有助于这种场景：把相同标签的数据项排到一起，尤其是当多个维度共同排序时。见下面的例子。
- + 当“数值及可转为数值的字符串”和“不能转为数值的字符串”进行排序时，或者它们和“其他类型的值”进行比较时，它们本身是不知如何进行比较的。那么我们称呼“后者”为“incomparable”，并且可以设置 `incomparable: 'min' | 'max'` 来指定一个“incomparable”在这个比较中是最大还是最小，从而能使它们能产生比较结果。这个设定的用途，比如可以是，决定空值（例如 `null`, `undefined`, `NaN`, `''`, `'-'`）在排序的头还是尾。
-+ 过滤器 `filter: 'time' | 'trim' | 'number'` 可以被使用，和数据转换器 "filter" 中的情况一样。
- + 如果要对时间进行排序（例如，值为 JS `Date` 实例或者时间字符串如 `'2012-03-12 11:13:54'`），我们需要声明 `parser: 'time'`。
- + 如果需要对有后缀的数值进行排序（如 `'33%'`, `'16px'`）我们需要声明 `parser: 'number'`。
+- 可以多重排序，多个维度一起排序。见下面的例子。
+- 排序规则是这样的：
+ - 默认按照数值大小排序。其中，“可转为数值的字符串”也被转换成数值，和其他数值一起按大小排序。
+ - 对于其他“不能转为数值的字符串”，也能在它们之间按字符串进行排序。这个特性有助于这种场景：把相同标签的数据项排到一起，尤其是当多个维度共同排序时。见下面的例子。
+ - 当“数值及可转为数值的字符串”和“不能转为数值的字符串”进行排序时，或者它们和“其他类型的值”进行比较时，它们本身是不知如何进行比较的。那么我们称呼“后者”为“incomparable”，并且可以设置 `incomparable: 'min' | 'max'` 来指定一个“incomparable”在这个比较中是最大还是最小，从而能使它们能产生比较结果。这个设定的用途，比如可以是，决定空值（例如 `null`, `undefined`, `NaN`, `''`, `'-'`）在排序的头还是尾。
+- 过滤器 `filter: 'time' | 'trim' | 'number'` 可以被使用，和数据转换器 "filter" 中的情况一样。
+ - 如果要对时间进行排序（例如，值为 JS `Date` 实例或者时间字符串如 `'2012-03-12 11:13:54'`），我们需要声明 `parser: 'time'`。
+ - 如果需要对有后缀的数值进行排序（如 `'33%'`, `'16px'`）我们需要声明 `parser: 'number'`。
这是一个“多维度排序”的例子。
+
```js
option = {
dataset: [{
@@ -502,72 +522,77 @@ option = {
<iframe width="600" height="350" src="${exampleViewPath}doc-example/data-transform-multiple-sort-bar&reset=1&edit=1"></iframe>
-
-
最后，我们给出数据转换器 "sort" 的 config 的形式化定义。
+
```ts
type SortTransform = {
- type: 'filter';
- config: OrderExpression | OrderExpression[];
-};
+ type: 'filter'
+ config: OrderExpression | OrderExpression[]
+}
type OrderExpression = {
- dimension: DimensionName | DimensionIndex;
- order: 'asc' | 'desc';
- incomparable?: 'min' | 'max';
- parser?: 'time' | 'trim' | 'number';
-};
-type DimensionName = string;
-type DimensionIndex = number;
+ dimension: DimensionName | DimensionIndex
+ order: 'asc' | 'desc'
+ incomparable?: 'min' | 'max'
+ parser?: 'time' | 'trim' | 'number'
+}
+type DimensionName = string
+type DimensionIndex = number
```
-
## 使用外部的数据转换器
除了上述的内置的数据转换器外，我们也可以使用外部的数据转换器。外部数据转换器能提供或自己定制更丰富的功能。下面的例子中，我们使用第三方库 [ecStat](https://github.com/ecomfe/echarts-stat) 提供的数据转换器。
生成数据的回归线：
+
```js
// 首先要注册外部数据转换器。
-echarts.registerTransform(ecStatTransform(ecStat).regression);
+echarts.registerTransform(ecStatTransform(ecStat).regression)
```
+
```js
option = {
- dataset: [{
- source: rawData
- }, {
- transform: {
- // 引用注册的数据转换器。
- // 注意，每个外部的数据转换器，都有名空间（如 'ecStat:xxx'，'ecStat' 是名空间）。
- // 而内置数据转换器（如 'filter', 'sort'）没有名空间。
- type: 'ecStat:regression',
- config: {
- // 这里是此外部数据转换器所需的参数。
- method: 'exponential'
- }
+ dataset: [
+ {
+ source: rawData
+ },
+ {
+ transform: {
+ // 引用注册的数据转换器。
+ // 注意，每个外部的数据转换器，都有名空间（如 'ecStat:xxx'，'ecStat' 是名空间）。
+ // 而内置数据转换器（如 'filter', 'sort'）没有名空间。
+ type: 'ecStat:regression',
+ config: {
+ // 这里是此外部数据转换器所需的参数。
+ method: 'exponential'
}
- }],
- xAxis: { type: 'category' },
- yAxis: {},
- series: [{
- name: 'scatter',
- type: 'scatter',
- datasetIndex: 0
- }, {
- name: 'regression',
- type: 'line',
- symbol: 'none',
- datasetIndex: 1
- }]
-};
+ }
+ }
+ ],
+ xAxis: { type: 'category' },
+ yAxis: {},
+ series: [
+ {
+ name: 'scatter',
+ type: 'scatter',
+ datasetIndex: 0
+ },
+ {
+ name: 'regression',
+ type: 'line',
+ symbol: 'none',
+ datasetIndex: 1
+ }
+ ]
+}
```
一些使用 echarts-stat 的例子：
-+ [聚集 (Aggregate)](${exampleEditorPath}data-transform-aggregate&edit=1&reset=1)
-+ [直方图 (Histogram)](${exampleEditorPath}bar-histogram&edit=1&reset=1)
-+ [简单聚类 (Clustering)](${exampleEditorPath}scatter-clustering&edit=1&reset=1)
-+ [线性回归线 (Linear Regression)](${exampleEditorPath}scatter-linear-regression&edit=1&reset=1)
-+ [指数回归线 (Exponential Regression)](${exampleEditorPath}scatter-exponential-regression&edit=1&reset=1)
-+ [对数回归线 (Logarithmic Regression)](${exampleEditorPath}scatter-logarithmic-regression&edit=1&reset=1)
-+ [多项式回归线 (Polynomial Regression)](${exampleEditorPath}scatter-polynomial-regression&edit=1&reset=1)
-
+- [聚集 (Aggregate)](${exampleEditorPath}data-transform-aggregate&edit=1&reset=1)
+- [直方图 (Histogram)](${exampleEditorPath}bar-histogram&edit=1&reset=1)
+- [简单聚类 (Clustering)](${exampleEditorPath}scatter-clustering&edit=1&reset=1)
+- [线性回归线 (Linear Regression)](${exampleEditorPath}scatter-linear-regression&edit=1&reset=1)
+- [指数回归线 (Exponential Regression)](${exampleEditorPath}scatter-exponential-regression&edit=1&reset=1)
+- [对数回归线 (Logarithmic Regression)](${exampleEditorPath}scatter-logarithmic-regression&edit=1&reset=1)
+- [多项式回归线 (Polynomial Regression)](${exampleEditorPath}scatter-polynomial-regression&edit=1&reset=1)
diff --git a/contents/zh/posts.js b/contents/zh/posts.js
index 8daecd5..5819c61 100644
--- a/contents/zh/posts.js
+++ b/contents/zh/posts.js
@@ -3,253 +3,344 @@
* 这个文件决定了导航栏的数据，顺序即为以下元素定义的顺序。
* title 是导航栏中显示的标题，md 文件中的一级标题是正文标题，两者可以不同。
*/
-export default [{
+export default [
+ {
title: '快速上手',
dir: 'get-started'
-}, {
+ },
+ {
title: '入门篇',
dir: 'basics',
- children: [{
+ children: [
+ {
title: '下载',
dir: 'download'
- }, {
+ },
+ {
title: '资源列表',
dir: 'resource'
- }, {
+ },
+ {
title: '获取灵感',
dir: 'inspiration'
- }, {
+ },
+ {
title: '寻求帮助',
dir: 'help'
- }]
-}, {
+ }
+ ]
+ },
+ {
title: '概念篇',
dir: 'concepts',
- children: [{
+ children: [
+ {
title: '图表容器及大小',
dir: 'chart-size'
- }, {
+ },
+ {
title: '配置项',
dir: 'options',
draft: true
- }, {
+ },
+ {
title: '系列',
dir: 'series',
draft: true
- }, {
+ },
+ {
title: '数据集',
dir: 'dataset'
- }, {
+ },
+ {
title: '数据转换',
dir: 'data-transform'
- }, {
+ },
+ {
title: '坐标系',
dir: 'coordinate',
draft: true
- }, {
+ },
+ {
title: '坐标轴',
dir: 'axis'
- }, {
+ },
+ {
title: '视觉映射',
dir: 'visual-map'
- }, {
+ },
+ {
title: '图例',
dir: 'legend'
- }, {
+ },
+ {
title: '提示框',
dir: 'tooltip',
draft: true
- }, {
+ },
+ {
title: '事件与行为',
dir: 'event'
- }]
-}, {
+ }
+ ]
+ },
+ {
title: '应用篇',
dir: 'application',
- children: [{
+ children: [
+ {
title: '常用图表类型',
dir: 'chart-types',
- children: [{
+ children: [
+ {
title: '柱状图',
dir: 'bar',
- children: [{
+ children: [
+ {
title: '基础柱状图',
dir: 'basic-bar'
- }, {
+ },
+ {
title: '堆叠柱状图',
dir: 'stacked-bar'
- }, {
+ },
+ {
title: '动态排序柱状图',
dir: 'bar-race',
draft: true
- }, {
+ },
+ {
title: '极坐标系柱状图',
dir: 'polar-bar',
draft: true
- }, {
+ },
+ {
title: '瀑布图',
dir: 'waterfall',
draft: true
- }, {
+ },
+ {
title: '视觉映射的柱状图',
dir: 'visual-map',
draft: true
- }]
- }, {
+ }
+ ]
+ },
+ {
title: '折线图',
dir: 'line',
- children: [{
+ children: [
+ {
title: '基础折线图',
dir: 'basic-line'
- }, {
+ },
+ {
title: '堆叠折线图',
dir: 'stacked-line'
- }, {
+ },
+ {
title: '区域面积折线图',
dir: 'area-line'
- }, {
+ },
+ {
title: '平滑曲线图',
dir: 'smooth-line'
- }, {
+ },
+ {
title: '阶梯线图',
dir: 'step-line'
- }]
- }, {
+ }
+ ]
+ },
+ {
title: '饼图',
dir: 'pie',
- children: [{
+ children: [
+ {
title: '基础饼图',
dir: 'basic-pie'
- }, {
+ },
+ {
title: '环形图',
dir: 'ring'
- }, {
+ },
+ {
title: '南丁格尔图（玫瑰图）',
dir: 'rose'
- }]
- }, {
+ }
+ ]
+ },
+ {
title: '散点图',
dir: 'scatter',
- children: [{
+ children: [
+ {
title: '基础散点图',
dir: 'basic-scatter'
- }]
- }]
- }, {
+ }
+ ]
+ }
+ ]
+ },
+ {
title: '移动端优化',
dir: 'mobile',
draft: true
- }, {
+ },
+ {
title: '跨平台方案',
dir: 'cross-platform',
- children: [{
+ children: [
+ {
title: '百度智能小程序',
dir: 'baidu-app'
- }, {
+ },
+ {
title: '微信小程序',
dir: 'wechat-app'
- }, {
+ },
+ {
title: '服务端渲染',
dir: 'server'
- }]
- }, {
+ }
+ ]
+ },
+ {
title: '数据处理',
dir: 'data',
- children: [{
+ children: [
+ {
title: '动态的异步数据',
dir: 'dynamic-data'
- }, {
+ },
+ {
title: '数据下钻',
dir: 'drilldown',
draft: true
- }]
- }, {
+ }
+ ]
+ },
+ {
title: '无障碍访问',
dir: 'aria',
draft: true
- }, {
+ },
+ {
title: '多图联动',
dir: 'connect',
draft: true
- }]
-}, {
+ }
+ ]
+ },
+ {
title: '最佳实践',
dir: 'best-practice',
- children: [{
+ children: [
+ {
title: '移动端优化',
dir: 'mobile',
draft: true
- }, {
+ },
+ {
title: 'Canvas vs. SVG',
dir: 'canvas-vs-svg'
- }, {
+ },
+ {
title: '无障碍访问',
dir: 'aria'
- }, {
+ },
+ {
title: '可视化设计原则',
dir: 'design',
- children: [{
+ children: [
+ {
title: '用颜色增强可视化效果',
- dir: 'color-enhance',
- }]
- }, {
+ dir: 'color-enhance'
+ }
+ ]
+ },
+ {
title: '可视化规范',
dir: 'chart-specificatio',
- children: [{
+ children: [
+ {
title: '折线图',
dir: 'line',
- children: [{
+ children: [
+ {
title: '基础折线图',
dir: 'basic-line'
- }, {
+ },
+ {
title: '面积图',
dir: 'area'
- }, {
+ },
+ {
title: '堆叠面积图',
dir: 'stacked-area'
- }]
- }, {
+ }
+ ]
+ },
+ {
title: '柱状图',
dir: 'bar',
- children: [{
+ children: [
+ {
title: '基础柱状图',
dir: 'basic-bar'
- }, {
+ },
+ {
title: '堆叠柱状图',
dir: 'stacked-bar'
- }, {
+ },
+ {
title: '双向柱状图',
dir: 'bi-directional-bar'
- }, {
+ },
+ {
title: '分组柱状图',
dir: 'grouped-bar'
- }]
- }, {
+ }
+ ]
+ },
+ {
title: '饼图',
dir: 'pie',
- children: [{
+ children: [
+ {
title: '基础饼图',
dir: 'basic-pie'
- }]
- }, {
+ }
+ ]
+ },
+ {
title: '散点图',
dir: 'scatter',
- children: [{
+ children: [
+ {
title: '散点图',
dir: 'scatter'
- },{
+ },
+ {
title: '气泡图',
dir: 'bubble'
- }]
- },{
+ }
+ ]
+ },
+ {
title: '雷达图',
- dir: 'radar',
- }, {
+ dir: 'radar'
+ },
+ {
title: '漏斗图',
- dir: 'funnel',
- },{
+ dir: 'funnel'
+ },
+ {
title: '仪表盘',
- dir: 'gauger',
- },]
- }]
-}];
+ dir: 'gauger'
+ }
+ ]
+ }
+ ]
+ }
+]
diff --git a/pages/helper/post.ts b/pages/helper/post.ts
index 7e87384..802ff8f 100644
--- a/pages/helper/post.ts
+++ b/pages/helper/post.ts
@@ -1,21 +1,22 @@
import fm from 'front-matter'
import MarkdownIt from 'markdown-it'
import highlightjs from 'markdown-it-highlightjs'
-import anchor from 'markdown-it-anchor';
-import toc from 'markdown-it-toc-done-right';
+import anchor from 'markdown-it-anchor'
+import toc from 'markdown-it-toc-done-right'
import config from '../../configs/config'
import contributors from './contributors'
-export async function getPostData (path: string, lang: string) {
- const filePath = path.split('_').join('/');
- const fileContent = await import(`~/contents/${lang}/${filePath}.md`);
- let content = fileContent.default;
+export async function getPostData(path: string, lang: string) {
+ const filePath = path.split('_').join('/')
+ const fileContent = await import(`~/contents/${lang}/${filePath}.md`)
+ let content = fileContent.default
- const url = `${config.rootPath}/${lang}/${path}`;
+ const url = `${config.rootPath}/${lang}/${path}`
const md = new MarkdownIt({
html: true
- }).use(highlightjs, {})
+ })
+ .use(highlightjs, {})
.use(anchor, {
permalink: false,
permalinkAfter: true,
@@ -26,22 +27,26 @@ export async function getPostData (path: string, lang: string) {
containerId: 'toc',
level: 2,
hash: slug => {
- const hash = slug.split('#');
+ const hash = slug.split('#')
if (hash.length > 0) {
// Replace all spaces with '-' and encodeURI
- return encodeURI(hash[0].trim().toLowerCase().replace(new RegExp(' ', 'g'), '-'));
- }
- else {
- return url;
+ return encodeURI(
+ hash[0]
+ .trim()
+ .toLowerCase()
+ .replace(new RegExp(' ', 'g'), '-')
+ )
+ } else {
+ return url
}
}
- });
+ })
for (const attr in config) {
content = content.split(`\${${attr}}`).join((config as any)[attr])
}
- const res = fm(content);
+ const res = fm(content)
return {
attributes: res.attributes,
content: md.render('[[toc]]\n' + res.body),
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org