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/17 11:17:09 UTC
[incubator-echarts-handbook] 05/11: docs: add example contents
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-handbook.git
commit 2d57243be5344553a6a4f7ae8080040bceebfe6b
Author: Ovilia <zw...@gmail.com>
AuthorDate: Wed Apr 8 15:22:46 2020 +0800
docs: add example contents
---
components/partials/Sidebar.vue | 13 +++-
contents/zh/basics/configuration.md | 1 +
contents/zh/basics/help.md | 1 +
contents/zh/basics/inspiration.md | 1 +
contents/zh/basics/installation.md | 1 +
contents/zh/basics/resource.md | 1 +
contents/zh/best-practice/design.md | 0
contents/zh/best-practice/mobile.md | 0
contents/zh/chart-types/bar/polar-bar.md | 0
contents/zh/chart-types/bar/stacked-bar.md | 1 +
contents/zh/chart-types/bar/visual-map.md | 0
contents/zh/chart-types/bar/waterfall.md | 0
contents/zh/concepts/axis.md | 0
contents/zh/concepts/coordinate.md | 0
contents/zh/concepts/options.md | 0
contents/zh/concepts/series.md | 0
contents/zh/concepts/tooltip.md | 0
contents/zh/concepts/visual-map.md | 0
contents/zh/cookbook/aria.md | 0
contents/zh/cookbook/connect.md | 0
contents/zh/cookbook/cross-platform.md | 1 +
contents/zh/cookbook/down-play.md | 0
contents/zh/get-started.md | 91 +++++++++++++++++++++++
contents/zh/meta/get-started.md | 40 ++++++++++
contents/zh/meta/writing.md | 22 ++++++
contents/zh/posts.js | 114 +++++++++++++++++++++++++++--
layouts/default.vue | 11 +++
pages/zh/_post.vue | 4 +-
28 files changed, 292 insertions(+), 10 deletions(-)
diff --git a/components/partials/Sidebar.vue b/components/partials/Sidebar.vue
index 61d0162..fd1bed2 100644
--- a/components/partials/Sidebar.vue
+++ b/components/partials/Sidebar.vue
@@ -3,14 +3,19 @@
<!-- active: {{ active }}. {{ posts }} -->
<div class="bd-docs-nav">
<div class="bd-toc-item level0" v-for="level0Post in $store.state.posts.zh">
- <a class="bd-toc-link">{{ level0Post.title }}</a>
- <ul class="nav bd-sidenav level1" v-if="level0Post.children">
+ <a :href="level0Post.children ? 'javascript:;' : rootPath + level0Post.dir"
+ v-if="!level0Post.draft"
+ 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"
+ v-if="!level1Post.draft"
class="nav-link">{{ level1Post.title }}</a>
- <ul class="nav bd-sidenav level2" v-if="level1Post.children">
+ <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" class="nav-link">{{ level2Post.title }}</a>
+ <a :href="rootPath + level0Post.dir + '_' + level1Post.dir + '_' + level2Post.dir"
+ v-if="!level2Post.draft"
+ class="nav-link">{{ level2Post.title }}</a>
</li>
</ul>
</li>
diff --git a/contents/zh/basics/configuration.md b/contents/zh/basics/configuration.md
new file mode 100644
index 0000000..450f307
--- /dev/null
+++ b/contents/zh/basics/configuration.md
@@ -0,0 +1 @@
+# 初始化设置
diff --git a/contents/zh/basics/help.md b/contents/zh/basics/help.md
new file mode 100644
index 0000000..b61dc29
--- /dev/null
+++ b/contents/zh/basics/help.md
@@ -0,0 +1 @@
+# 寻求帮助
\ No newline at end of file
diff --git a/contents/zh/basics/inspiration.md b/contents/zh/basics/inspiration.md
new file mode 100644
index 0000000..f96933e
--- /dev/null
+++ b/contents/zh/basics/inspiration.md
@@ -0,0 +1 @@
+# 获取灵感
diff --git a/contents/zh/basics/installation.md b/contents/zh/basics/installation.md
new file mode 100644
index 0000000..7144b3c
--- /dev/null
+++ b/contents/zh/basics/installation.md
@@ -0,0 +1 @@
+# 安装
diff --git a/contents/zh/basics/resource.md b/contents/zh/basics/resource.md
new file mode 100644
index 0000000..88fb670
--- /dev/null
+++ b/contents/zh/basics/resource.md
@@ -0,0 +1 @@
+# 资源列表
diff --git a/contents/zh/best-practice/design.md b/contents/zh/best-practice/design.md
new file mode 100644
index 0000000..e69de29
diff --git a/contents/zh/best-practice/mobile.md b/contents/zh/best-practice/mobile.md
new file mode 100644
index 0000000..e69de29
diff --git a/contents/zh/chart-types/bar/polar-bar.md b/contents/zh/chart-types/bar/polar-bar.md
new file mode 100644
index 0000000..e69de29
diff --git a/contents/zh/chart-types/bar/stacked-bar.md b/contents/zh/chart-types/bar/stacked-bar.md
new file mode 100644
index 0000000..0c942d2
--- /dev/null
+++ b/contents/zh/chart-types/bar/stacked-bar.md
@@ -0,0 +1 @@
+# 堆叠柱状图
diff --git a/contents/zh/chart-types/bar/visual-map.md b/contents/zh/chart-types/bar/visual-map.md
new file mode 100644
index 0000000..e69de29
diff --git a/contents/zh/chart-types/bar/waterfall.md b/contents/zh/chart-types/bar/waterfall.md
new file mode 100644
index 0000000..e69de29
diff --git a/contents/zh/concepts/axis.md b/contents/zh/concepts/axis.md
new file mode 100644
index 0000000..e69de29
diff --git a/contents/zh/concepts/coordinate.md b/contents/zh/concepts/coordinate.md
new file mode 100644
index 0000000..e69de29
diff --git a/contents/zh/concepts/options.md b/contents/zh/concepts/options.md
new file mode 100644
index 0000000..e69de29
diff --git a/contents/zh/concepts/series.md b/contents/zh/concepts/series.md
new file mode 100644
index 0000000..e69de29
diff --git a/contents/zh/concepts/tooltip.md b/contents/zh/concepts/tooltip.md
new file mode 100644
index 0000000..e69de29
diff --git a/contents/zh/concepts/visual-map.md b/contents/zh/concepts/visual-map.md
new file mode 100644
index 0000000..e69de29
diff --git a/contents/zh/cookbook/aria.md b/contents/zh/cookbook/aria.md
new file mode 100644
index 0000000..e69de29
diff --git a/contents/zh/cookbook/connect.md b/contents/zh/cookbook/connect.md
new file mode 100644
index 0000000..e69de29
diff --git a/contents/zh/cookbook/cross-platform.md b/contents/zh/cookbook/cross-platform.md
new file mode 100644
index 0000000..3979538
--- /dev/null
+++ b/contents/zh/cookbook/cross-platform.md
@@ -0,0 +1 @@
+# 跨平台方案
\ No newline at end of file
diff --git a/contents/zh/cookbook/down-play.md b/contents/zh/cookbook/down-play.md
new file mode 100644
index 0000000..e69de29
diff --git a/contents/zh/get-started.md b/contents/zh/get-started.md
new file mode 100644
index 0000000..d2f6668
--- /dev/null
+++ b/contents/zh/get-started.md
@@ -0,0 +1,91 @@
+# 5 分钟上手 ECharts
+
+## 获取 ECharts
+
+你可以通过以下几种方式获取 ECharts。
+
+* 从 [Apache ECharts (incubating) 官网下载界面](https://echarts.apache.org/download.html) 获取官方源码包后构建。
+
+* 在 ECharts 的 [GitHub](https://github.com/apache/incubator-echarts/releases) 获取。
+
+* 通过 npm 获取 echarts，`npm install echarts --save`，详见“[在 webpack 中使用 echarts](https://echarts.apache.org/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts)”
+
+* 通过 [jsDelivr](https://www.jsdelivr.com/package/npm/echarts) 等 CDN 引入
+
+## 引入 ECharts
+
+通过标签方式直接引入构建好的 echarts 文件
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <!-- 引入 ECharts 文件 -->
+ <script src="echarts.min.js"></script>
+</head>
+</html>
+```
+
+## 绘制一个简单的图表
+
+在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。
+
+```
+<body>
+ <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
+ <div id="main" style="width: 600px;height:400px;"></div>
+</body>
+```
+
+然后就可以通过 [echarts.init](api.html#echarts.init) 方法初始化一个 echarts 实例并通过 [setOption](api.html#echartsInstance.setOption) 方法生成一个简单的柱状图，下面是完整代码。
+
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>ECharts</title>
+ <!-- 引入 echarts.js -->
+ <script src="echarts.min.js"></script>
+</head>
+<body>
+ <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
+ <div id="main" style="width: 600px;height:400px;"></div>
+ <script type="text/javascript">
+ // 基于准备好的dom，初始化echarts实例
+ var myChart = echarts.init(document.getElementById('main'));
+
+ // 指定图表的配置项和数据
+ var option = {
+ title: {
+ text: 'ECharts 入门示例'
+ },
+ tooltip: {},
+ legend: {
+ data:['销量']
+ },
+ xAxis: {
+ data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
+ },
+ yAxis: {},
+ series: [{
+ name: '销量',
+ type: 'bar',
+ data: [5, 20, 36, 10, 10, 20]
+ }]
+ };
+
+ // 使用刚指定的配置项和数据显示图表。
+ myChart.setOption(option);
+ </script>
+</body>
+</html>
+```
+
+这样你的第一个图表就诞生了！
+
+~[600x300](${galleryViewPath}doc-example/getting-started&reset=1&edit=1)
+
+你也可以直接进入 [ECharts Gallery](${galleryEditorPath}doc-example/getting-started) 中查看编辑示例
diff --git a/contents/zh/meta/get-started.md b/contents/zh/meta/get-started.md
new file mode 100644
index 0000000..a07f5af
--- /dev/null
+++ b/contents/zh/meta/get-started.md
@@ -0,0 +1,40 @@
+# 项目结构说明
+
+（本文档正在完善中）
+
+## 新增一个 markdown 文件
+
+在 `contents/zh/`（中文文章）或 `contents/en/`（英文文章）目录下新增一个 markdown 文件，最多支持三级目录。将路径及标题信息更新在 `contents/zh/posts.js` 或 `contents/en/posts.js`。
+
+markdown 文件名称小写，用 `-` 分割单词。
+
+## 引用代码的方式
+
+（尚未支持可运行实例的引入）
+
+```js
+option = {
+ xAxis: {
+ data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+ },
+ yAxis: {},
+ series: [{
+ type: 'bar',
+ data: [23, 24, 18, 25, 27, 28, 25]
+ }]
+};
+```
+
+## 引用图片的方式
+
+图片实际存放地址在 `static/images/` 下。
+
+
+
+## CSS 定制
+
+对于当前页面的临时样式，可以直接写 html：
+
+<img src="${rootPath}/images/demo.png" style="width: 50px" />
+
+对于多个页面可以共享的样式，修改相关的 `.vue` 文件。
diff --git a/contents/zh/meta/writing.md b/contents/zh/meta/writing.md
new file mode 100644
index 0000000..771dec4
--- /dev/null
+++ b/contents/zh/meta/writing.md
@@ -0,0 +1,22 @@
+# 写作风格规范
+
+本文的主要目的是为了统一该项目的写作风格。
+
+语法主要参照[中文技术文档的写作规范](https://github.com/ruanyf/document-style-guide)。请在写作前先阅读一遍该语法。
+
+## 重点
+
+> 段落的句子语气要使用陈述和肯定语气，避免使用感叹语气。
+
+> 句子内部的并列词，应该用全角顿号(、) 分隔，而不用逗号，即使并列词是英语也是如此。
+>
+> 错误：我最欣赏的科技公司有 Google, Facebook, 腾讯, 阿里和百度等。
+>
+> 正确：我最欣赏的科技公司有 Google、Facebook、腾讯、阿里和百度等。
+
+
+## 其他注意事项
+
+除了上述规范之外，还需要注意：
+
+- 写作时，应尽可能使用正式的书面语言，避免较为随意的个人博客风格。
diff --git a/contents/zh/posts.js b/contents/zh/posts.js
index db6e8ca..d61a509 100644
--- a/contents/zh/posts.js
+++ b/contents/zh/posts.js
@@ -1,16 +1,120 @@
+/**
+ * 这个文件决定了导航栏的数据，顺序即为以下元素定义的顺序。
+ * title 是导航栏中显示的标题，md 文件中的一级标题是正文标题，两者可以不同。
+ */
export default [{
- title: '图表类型',
+ title: '关于本项目（临时）',
+ dir: 'meta',
+ children: [{
+ title: '项目结构说明',
+ dir: 'get-started'
+ }, {
+ title: '写作风格规范',
+ dir: 'writing'
+ }]
+}, {
+ title: '快速上手',
+ dir: 'get-started'
+}, {
+ title: '入门篇',
+ dir: 'basics',
+ children: [{
+ title: '安装',
+ dir: 'installation'
+ }, {
+ title: '初始化',
+ dir: 'configuration'
+ }, {
+ title: '资源列表',
+ dir: 'resource'
+ }, {
+ title: '获取灵感',
+ dir: 'inspiration'
+ }, {
+ title: '寻求帮助',
+ dir: 'help'
+ }]
+}, {
+ title: '概念篇',
+ dir: 'basics',
+ children: [{
+ title: '配置项基本概念',
+ dir: 'options'
+ }, {
+ title: '系列',
+ dir: 'series'
+ }, {
+ title: '坐标系',
+ dir: 'coordinate'
+ }, {
+ title: '坐标轴',
+ dir: 'axis'
+ }, {
+ title: '视觉映射',
+ dir: 'visual-map'
+ }, {
+ title: '图例',
+ dir: 'legend'
+ }, {
+ title: '提示框',
+ dir: 'tooltip'
+ }]
+}, {
+ title: '应用篇',
+ dir: 'cookbook',
+ children: [{
+ title: '移动端优化',
+ dir: 'mobile'
+ }, {
+ title: '跨平台方案',
+ dir: 'cross-platform'
+ }, {
+ title: '无障碍访问',
+ dir: 'aria'
+ }, {
+ title: '数据下钻',
+ dir: 'downplay'
+ }, {
+ title: '多图联动',
+ dir: 'connect'
+ }]
+}, {
+ title: '最佳实践',
+ dir: 'best-practice',
+ children: [{
+ title: '移动端优化',
+ dir: 'mobile'
+ }, {
+ title: '可视化设计原则',
+ dir: 'design'
+ }]
+}, {
+ title: '常用图表类型',
dir: 'chart-types',
children: [{
- title: '折线图',
- dir: 'line'
- },
- {
title: '柱状图',
dir: 'bar',
children: [{
title: '最简单的柱状图',
dir: 'simple-bar'
+ }, {
+ title: '堆叠柱状图',
+ dir: 'stacked-bar'
+ }, {
+ title: '极坐标系柱状图',
+ dir: 'polar-bar'
+ }, {
+ title: '瀑布图',
+ dir: 'waterfall'
+ }, {
+ title: '视觉映射的柱状图',
+ dir: 'visual-map'
}]
+ }, {
+ title: '折线图',
+ dir: 'line'
+ }, {
+ title: '……',
+ dir: 'xxx'
}]
}];
diff --git a/layouts/default.vue b/layouts/default.vue
index c76ccbd..87cedc8 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -69,4 +69,15 @@ h5 {
h6 {
font-size: 14px;
}
+
+blockquote {
+ margin: 15px 0;
+ padding: 15px;
+ border-left: 4px solid #ccc;
+ background-color: #f3f3f3;
+}
+
+blockquote :last-child {
+ margin-bottom: 0;
+}
</style>
diff --git a/pages/zh/_post.vue b/pages/zh/_post.vue
index 807c0f4..a5662db 100644
--- a/pages/zh/_post.vue
+++ b/pages/zh/_post.vue
@@ -8,7 +8,9 @@ import MarkdownIt from 'markdown-it';
import Vue from 'vue';
import config from '../../configs/config';
-const md = new MarkdownIt();
+const md = new MarkdownIt({
+ html: true
+});
export default Vue.extend({
components: {
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org