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