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 <zwl.s...@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`) - -![图片说明](${rootPath}/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-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org