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:55 UTC
[incubator-echarts-handbook] branch wenli created (now 179be6e)
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a change to branch wenli
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-handbook.git.
at 179be6e feat: support level 4 nav
This branch includes the following new commits:
new 179be6e feat: support level 4 nav
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[incubator-echarts-handbook] 01/01: feat: support level 4 nav
Posted by ov...@apache.org.
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