You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by ov...@apache.org on 2020/06/18 09:24:56 UTC
[incubator-echarts-handbook] 01/01: feat: support level 4 nav
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch wenli
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-handbook.git
commit 179be6ed316e4ea8c1e3e6d7de6b1f0c0e00b7df
Author: Ovilia <zw...@gmail.com>
AuthorDate: Thu Jun 18 17:18:41 2020 +0800
feat: support level 4 nav
---
components/partials/Sidebar.vue | 37 ++++--
contents/zh/{cookbook => application}/aria.md | 0
.../chart-types/bar/bar-race.md} | 0
.../chart-types/bar/basic-bar.md} | 0
.../{ => application}/chart-types/bar/polar-bar.md | 0
.../chart-types/bar/stacked-bar.md | 0
.../chart-types/bar/visual-map.md | 0
.../{ => application}/chart-types/bar/waterfall.md | 0
.../zh/application/chart-types/line/area-line.md | 27 +++++
.../zh/application/chart-types/line/basic-line.md | 128 +++++++++++++++++++++
.../zh/application/chart-types/line/smooth-line.md | 18 +++
.../application/chart-types/line/stacked-line.md | 45 ++++++++
.../zh/application/chart-types/line/step-line.md | 38 ++++++
contents/zh/{cookbook => application}/connect.md | 0
.../zh/{cookbook => application}/cross-platform.md | 0
contents/zh/{cookbook => application}/down-play.md | 0
contents/zh/{cookbook => application}/downplay.md | 0
contents/zh/{cookbook => application}/mobile.md | 0
contents/zh/chart-types/line.md | 26 -----
contents/zh/chart-types/xxx.md | 0
contents/zh/posts.js | 79 +++++++------
21 files changed, 330 insertions(+), 68 deletions(-)
diff --git a/components/partials/Sidebar.vue b/components/partials/Sidebar.vue
index fd1bed2..9e94e0a 100644
--- a/components/partials/Sidebar.vue
+++ b/components/partials/Sidebar.vue
@@ -8,14 +8,21 @@
class="bd-toc-link">{{ level0Post.title }}</a>
<ul class="nav bd-sidenav level1" v-if="!level0Post.draft && level0Post.children">
<li class="nav-item" v-for="level1Post in level0Post.children">
- <a :href="level1Post.children ? 'javascript:;' : rootPath + level0Post.dir + '_' + level1Post.dir"
+ <a :href="level1Post.children ? 'javascript:;' : rootPath + level0Post.dir + '_' + level1Post.dir"
v-if="!level1Post.draft"
class="nav-link">{{ level1Post.title }}</a>
<ul class="nav bd-sidenav level2" v-if="!level1Post.draft && level1Post.children">
<li class="nav-item" v-for="level2Post in level1Post.children">
- <a :href="rootPath + level0Post.dir + '_' + level1Post.dir + '_' + level2Post.dir"
+ <a :href="rootPath + level0Post.dir + '_' + level1Post.dir + '_' + level2Post.dir"
v-if="!level2Post.draft"
class="nav-link">{{ level2Post.title }}</a>
+ <ul class="nav bd-sidenav level3" v-if="!level2Post.draft && level2Post.children">
+ <li class="nav-item" v-for="level3Post in level2Post.children">
+ <a :href="rootPath + level0Post.dir + '_' + level1Post.dir + '_' + level2Post.dir + '_' + level3Post.dir"
+ v-if="!level3Post.draft"
+ class="nav-link">{{ level3Post.title }}</a>
+ </li>
+ </ul>
</li>
</ul>
</li>
@@ -49,16 +56,13 @@ export default Vue.extend({
.bd-sidenav {
margin-top: 5px;
+ margin-left: 10px;
display: none;
}
- .bd-sidenav.level2 {
- margin: 0 0 0 15px;
- }
-
.bd-toc-link {
font-weight: bold;
- color: #444;
+ color: #222;
}
.nav {
@@ -67,15 +71,30 @@ export default Vue.extend({
.nav-link {
padding: 5px;
- color: #666;
+ color: #444;
}
.level1 .nav-link {
padding: 5px 0;
}
+ .level2, .level3 {
+ margin-top: 0;
+ }
+
.level2 .nav-link {
- color: #444;
+ color: #666;
+ }
+
+ .level3 {
+ border-left: 1px solid #eee;
+ padding-left: 10px;
+ margin-left: 0;
+ }
+
+ .level3 .nav-link {
+ margin: 2px 0;
+ color: #888;
}
.nav-link:hover {
diff --git a/contents/zh/cookbook/aria.md b/contents/zh/application/aria.md
similarity index 100%
rename from contents/zh/cookbook/aria.md
rename to contents/zh/application/aria.md
diff --git a/contents/zh/chart-types/bar/bar-racing.md b/contents/zh/application/chart-types/bar/bar-race.md
similarity index 100%
rename from contents/zh/chart-types/bar/bar-racing.md
rename to contents/zh/application/chart-types/bar/bar-race.md
diff --git a/contents/zh/chart-types/bar/simple-bar.md b/contents/zh/application/chart-types/bar/basic-bar.md
similarity index 100%
rename from contents/zh/chart-types/bar/simple-bar.md
rename to contents/zh/application/chart-types/bar/basic-bar.md
diff --git a/contents/zh/chart-types/bar/polar-bar.md b/contents/zh/application/chart-types/bar/polar-bar.md
similarity index 100%
rename from contents/zh/chart-types/bar/polar-bar.md
rename to contents/zh/application/chart-types/bar/polar-bar.md
diff --git a/contents/zh/chart-types/bar/stacked-bar.md b/contents/zh/application/chart-types/bar/stacked-bar.md
similarity index 100%
rename from contents/zh/chart-types/bar/stacked-bar.md
rename to contents/zh/application/chart-types/bar/stacked-bar.md
diff --git a/contents/zh/chart-types/bar/visual-map.md b/contents/zh/application/chart-types/bar/visual-map.md
similarity index 100%
rename from contents/zh/chart-types/bar/visual-map.md
rename to contents/zh/application/chart-types/bar/visual-map.md
diff --git a/contents/zh/chart-types/bar/waterfall.md b/contents/zh/application/chart-types/bar/waterfall.md
similarity index 100%
rename from contents/zh/chart-types/bar/waterfall.md
rename to contents/zh/application/chart-types/bar/waterfall.md
diff --git a/contents/zh/application/chart-types/line/area-line.md b/contents/zh/application/chart-types/line/area-line.md
new file mode 100644
index 0000000..921fc33
--- /dev/null
+++ b/contents/zh/application/chart-types/line/area-line.md
@@ -0,0 +1,27 @@
+# 区域面积折线图
+
+区域面积折线图将折线到坐标轴的空间设置背景色，用区域面积表达数据。相比普通的折线图，区域面积折线图的视觉效果更加饱满丰富，在系列不多的场景下尤其适用。
+
+<!-- embed -->
+```js
+option = {
+ xAxis: {
+ data: ['A', 'B', 'C', 'D', 'E']
+ },
+ yAxis: {},
+ series: [{
+ data: [10, 22, 28, 23, 19],
+ type: 'line',
+ areaStyle: {}
+ }, {
+ data: [25, 14, 23, 35, 10],
+ type: 'line',
+ areaStyle: {
+ color: '#ff0',
+ opacity: 0.5
+ }
+ }]
+};
+```
+
+通过 [`areaStyle`](${optionPath}series-line.areaStyle) 设置折线图的填充区域样式，将其设为为 `{}` 表示使用默认样式，即使用系列的颜色以半透明的方式填充区域。如果想指定特定的样式，可以通过设置 `areaStyle` 下的配置项覆盖，如第二个系列将填充区域的颜色设为不透明度为 0.5 的黄色。
diff --git a/contents/zh/application/chart-types/line/basic-line.md b/contents/zh/application/chart-types/line/basic-line.md
new file mode 100644
index 0000000..9419e62
--- /dev/null
+++ b/contents/zh/application/chart-types/line/basic-line.md
@@ -0,0 +1,128 @@
+# 基础折线图
+
+柱状图（或称条形图）是一种通过柱形的长度来表现数据大小的一种常用图表类型。
+
+## 最简单的折线图
+
+如果我们想建立一个横坐标是类目型（category）、纵坐标是数值型（value）的折线图，我们可以使用这样的方式：
+
+<!-- embed -->
+```js
+option = {
+ xAxis: {
+ type: 'category',
+ data: ['A', 'B', 'C']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [{
+ data: [120, 200, 150],
+ type: 'line'
+ }]
+};
+```
+
+在这个例子中，我们通过 `xAxis` 将横坐标设为类目型，并指定了对应的值；通过 `type` 将 `yAxis` 的类型设定为数值型。在 `series` 中，我们将系列类型设为 `line`，并且通过 `data` 指定了折线图三个点的取值。这样，就能得到一个最简单的折线图了。
+
+> 这里 `xAxis` 和 `yAxis` 的 `type` 属性都可以隐去不写。因为坐标轴的默认类型是数值型，而 `xAxis` 指定了类目型的 `data`，所以 `ECharts` 也能识别出这是类目型的坐标轴。为了让大家更容易理解，我们特意写了 `type`。在实际的应用中，如果是 `'value'` 类型，也可以省略不写。
+
+
+## 笛卡尔坐标系中的折线图
+
+如果我们希望折线图在横坐标和纵坐标上都是连续的，即在笛卡尔坐标系中，应该如何实现呢？答案也很简单，只要把 `series` 的 `data` 每个数据用一个包含两个元素的数组表示就行了。
+
+<!-- embed -->
+```js
+option = {
+ xAxis: {},
+ yAxis: {},
+ series: [{
+ data: [[20, 120], [50, 200], [40, 50]],
+ type: 'line'
+ }]
+};
+```
+
+
+## 折线图样式设置
+
+### 折线的样式
+
+折线图中折线的样式可以通过 `lineStyle` 设置。可以为其指定颜色、线宽、折线类型、阴影、不透明度等等，具体的可以参考配置项手册 [`series.lineStyle`](${optionPath}series-line.lineStyle) 了解。这里，我们以设置颜色（color）、线宽（width）和折线类型（type）为例说明。
+
+<!-- embed -->
+```js
+option = {
+ xAxis: {
+ data: ['A', 'B', 'C', 'D', 'E']
+ },
+ yAxis: {},
+ series: [{
+ data: [10, 22, 28, 23, 19],
+ type: 'line',
+ lineStyle: {
+ normal: {
+ color: 'green',
+ width: 4,
+ type: 'dashed'
+ }
+ }
+ }]
+};
+```
+
+这里设置折线宽度时，数据点描边的宽度是不会跟着改变的，而应该在数据点的配置项中另外设置。
+
+### 数据点的样式
+
+数据点的样式可以通过 [`series.itemStyle`](${optionPath}series-line.itemStyle) 指定填充颜色（color）、描边颜色（borderWidth）、描边宽度（borderWidth）、描边颜色（borderColor）、阴影（shadowColor）、不透明度（opacity）等。与折线样式的设置十分相似，这里不再展开说明。
+
+
+## 在数据点处显示数值
+
+在系列中，这数据点的通过 [`series.label`](${optionPath}series-line.label) 属性指定。如果将 `label` 下的 `show` 指定为`true`，则表示该数值默认时就显示；如果为 `false`，而 [`series.emphasis.label.show`](${optionPath}series-line.emphasis.label.show) 为 `true`，则表示只有在鼠标移动到该数据时，才显示数值。
+
+<!-- embed -->
+```js
+option = {
+ xAxis: {
+ data: ['A', 'B', 'C', 'D', 'E']
+ },
+ yAxis: {},
+ series: [{
+ data: [10, 22, 28, 23, 19],
+ type: 'line',
+ label: {
+ show: true,
+ position: 'bottom',
+ textStyle: {
+ fontSize: 20
+ }
+ }
+ }]
+};
+```
+
+
+## 空数据
+
+在一个系列中，可能一个横坐标对应的取值是“空”的，将其设为 0 有时并不能满足我们的期望--空数据不应被其左右的数据连接。
+
+在 ECharts 中，我们使用字符串 `'-'` 表示空数据，这对其他系列的数据也是适用的。
+
+<!-- embed -->
+```js
+option = {
+ xAxis: {
+ data: ['A', 'B', 'C', 'D', 'E']
+ },
+ yAxis: {},
+ series: [{
+ data: [0, 22, '-', 23, 19],
+ type: 'line'
+ }]
+};
+```
+
+> 注意区别这个例子中，“空”数据与取值为 0 的数据。
diff --git a/contents/zh/application/chart-types/line/smooth-line.md b/contents/zh/application/chart-types/line/smooth-line.md
new file mode 100644
index 0000000..387cefc
--- /dev/null
+++ b/contents/zh/application/chart-types/line/smooth-line.md
@@ -0,0 +1,18 @@
+# 平滑曲线图
+
+平滑曲线图也是折线图的一种变形，这种更柔和的样式也是一种不错的视觉选择。使用时，只需要将折线图系列的 `smooth` 属性设置为 `true` 即可。
+
+<!-- embed -->
+```js
+option = {
+ xAxis: {
+ data: ['A', 'B', 'C', 'D', 'E']
+ },
+ yAxis: {},
+ series: [{
+ data: [10, 22, 28, 23, 19],
+ type: 'line',
+ smooth: true
+ }]
+};
+```
diff --git a/contents/zh/application/chart-types/line/stacked-line.md b/contents/zh/application/chart-types/line/stacked-line.md
new file mode 100644
index 0000000..b022056
--- /dev/null
+++ b/contents/zh/application/chart-types/line/stacked-line.md
@@ -0,0 +1,45 @@
+# 堆叠折线图
+
+与[堆叠柱状图](./zh/application_chart-types_bar_stacked-bar)类似，堆叠折线图也是用系列的 `stack` 设置哪些系列堆叠在一起。
+
+<!-- embed -->
+```js
+option = {
+ xAxis: {
+ data: ['A', 'B', 'C', 'D', 'E']
+ },
+ yAxis: {},
+ series: [{
+ data: [10, 22, 28, 43, 49],
+ type: 'line',
+ stack: 'x'
+ }, {
+ data: [5, 4, 3, 5, 10],
+ type: 'line',
+ stack: 'x'
+ }]
+};
+```
+
+但是不同的是，如果不加说明的话，我们很难判断出这是一个堆叠折线图，还是一个普通的折线图。所以，对于堆叠折线图而言，一般建议使用区域填充色以表明堆叠的情况。
+
+<!-- embed -->
+```js
+option = {
+ xAxis: {
+ data: ['A', 'B', 'C', 'D', 'E']
+ },
+ yAxis: {},
+ series: [{
+ data: [10, 22, 28, 43, 49],
+ type: 'line',
+ stack: 'x',
+ areaStyle: {}
+ }, {
+ data: [5, 4, 3, 5, 10],
+ type: 'line',
+ stack: 'x',
+ areaStyle: {}
+ }]
+};
+```
diff --git a/contents/zh/application/chart-types/line/step-line.md b/contents/zh/application/chart-types/line/step-line.md
new file mode 100644
index 0000000..4758ce1
--- /dev/null
+++ b/contents/zh/application/chart-types/line/step-line.md
@@ -0,0 +1,38 @@
+# 阶梯线图
+
+阶梯线图又称方波图，它使用水平和垂直的线来连接两个数据点，而普通折线图则直接将两个点连接起来。阶梯线图能够很好地表达数据的突变。
+
+在 ECharts 中，系列的 `step` 属性用来表征阶梯线图的连接类型，它共有三种取值：`'start'`、`'middle'` 和 `'end'`，分别表示在当前点，当前点与下个点的中间点，下个点拐弯。
+
+<!-- embed -->
+```js
+option = {
+ xAxis: {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [{
+ name:'Step Start',
+ type:'line',
+ step: 'start',
+ data:[120, 132, 101, 134, 90, 230, 210]
+ },
+ {
+ name:'Step Middle',
+ type:'line',
+ step: 'middle',
+ data:[220, 282, 201, 234, 290, 430, 410]
+ },
+ {
+ name:'Step End',
+ type:'line',
+ step: 'end',
+ data:[450, 432, 401, 454, 590, 530, 510]
+ }]
+};
+```
+
+> 请注意这个例子中不同的 `step` 取值对应的数据点和连线的区别。
diff --git a/contents/zh/cookbook/connect.md b/contents/zh/application/connect.md
similarity index 100%
rename from contents/zh/cookbook/connect.md
rename to contents/zh/application/connect.md
diff --git a/contents/zh/cookbook/cross-platform.md b/contents/zh/application/cross-platform.md
similarity index 100%
rename from contents/zh/cookbook/cross-platform.md
rename to contents/zh/application/cross-platform.md
diff --git a/contents/zh/cookbook/down-play.md b/contents/zh/application/down-play.md
similarity index 100%
rename from contents/zh/cookbook/down-play.md
rename to contents/zh/application/down-play.md
diff --git a/contents/zh/cookbook/downplay.md b/contents/zh/application/downplay.md
similarity index 100%
rename from contents/zh/cookbook/downplay.md
rename to contents/zh/application/downplay.md
diff --git a/contents/zh/cookbook/mobile.md b/contents/zh/application/mobile.md
similarity index 100%
rename from contents/zh/cookbook/mobile.md
rename to contents/zh/application/mobile.md
diff --git a/contents/zh/chart-types/line.md b/contents/zh/chart-types/line.md
deleted file mode 100644
index f2977ec..0000000
--- a/contents/zh/chart-types/line.md
+++ /dev/null
@@ -1,26 +0,0 @@
-# 柱状图
-
-柱状通过柱形的高度来表现数据的大小，用于有至少一个类目轴或时间轴的直角坐标系上。
-
-## 最简单的柱状图
-
-设置柱状图的方式，是将 `series.name` 设为 `"bar"`。最简单的柱状图可以这样设置：
-
-```js
-option = {
- xAxis: {
- data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
- },
- yAxis: {},
- series: [{
- type: 'bar',
- data: [23, 24, 18, 25, 27, 28, 25]
- }]
-};
-```
-
-引用图片的方法：（这个图片实际存放地址在 `static/images/demo.png`）
-
-
-
-sss
diff --git a/contents/zh/chart-types/xxx.md b/contents/zh/chart-types/xxx.md
deleted file mode 100644
index e69de29..0000000
diff --git a/contents/zh/posts.js b/contents/zh/posts.js
index 9f21d44..d3b2511 100644
--- a/contents/zh/posts.js
+++ b/contents/zh/posts.js
@@ -61,8 +61,53 @@ export default [{
}]
}, {
title: '应用篇',
- dir: 'cookbook',
+ dir: 'application',
children: [{
+ title: '常用图表类型',
+ dir: 'chart-types',
+ children: [{
+ title: '柱状图',
+ dir: 'bar',
+ children: [{
+ title: '基础折线图',
+ dir: 'basic-bar'
+ }, {
+ title: '堆叠柱状图',
+ dir: 'stacked-bar'
+ }, {
+ title: '动态排序柱状图',
+ dir: 'bar-race'
+ }, {
+ title: '极坐标系柱状图',
+ dir: 'polar-bar'
+ }, {
+ title: '瀑布图',
+ dir: 'waterfall'
+ }, {
+ title: '视觉映射的柱状图',
+ dir: 'visual-map'
+ }]
+ }, {
+ title: '折线图',
+ dir: 'line',
+ children: [{
+ title: '基础折线图',
+ dir: 'basic-line'
+ }, {
+ title: '堆叠折线图',
+ dir: 'stacked-line'
+ }, {
+ title: '区域面积折线图',
+ dir: 'area-line'
+ }, {
+ title: '平滑曲线图',
+ dir: 'smooth-line'
+ }, {
+ title: '阶梯线图',
+ dir: 'step-line'
+ }]
+ }]
+ }, {
title: '移动端优化',
dir: 'mobile'
}, {
@@ -88,36 +133,4 @@ export default [{
title: '可视化设计原则',
dir: 'design'
}]
-}, {
- title: '常用图表类型',
- dir: 'chart-types',
- children: [{
- title: '柱状图',
- dir: 'bar',
- children: [{
- title: '基本柱状图',
- dir: 'simple-bar'
- }, {
- title: '堆叠柱状图',
- dir: 'stacked-bar'
- }, {
- title: '动态排序柱状图',
- dir: 'bar-racing'
- }, {
- title: '极坐标系柱状图',
- dir: 'polar-bar'
- }, {
- title: '瀑布图',
- dir: 'waterfall'
- }, {
- title: '视觉映射的柱状图',
- dir: 'visual-map'
- }]
- }, {
- title: '折线图',
- dir: 'line'
- }, {
- title: '……',
- dir: 'xxx'
- }]
}];
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org