This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/echarts-handbook.git
The following commit(s) were added to refs/heads/master by this push:
new 7fa27d0 update style and part of content
7fa27d0 is described below
commit 7fa27d07572e272e081b8a3d0f59c55b2dc527fb
Author: pissang <bm2736...@gmail.com>
AuthorDate: Wed May 19 14:38:24 2021 +0800
update style and part of content
---
.editorconfig | 13 ---
contents/zh/best-practice/canvas-vs-svg.md | 8 +-
contents/zh/concepts/legend.md | 181 +++++++++++++++--------------
contents/zh/posts.js | 3 -
layouts/default.vue | 31 +++--
5 files changed, 117 insertions(+), 119 deletions(-)
diff --git a/.editorconfig b/.editorconfig
deleted file mode 100644
index e9a9bff..0000000
--- a/.editorconfig
+++ /dev/null
@@ -1,13 +0,0 @@
-# editorconfig.org
-root = true
-
-[*]
-indent_style = space
-indent_size = 4
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
diff --git a/contents/zh/best-practice/canvas-vs-svg.md
b/contents/zh/best-practice/canvas-vs-svg.md
index 531c958..9b10281 100644
--- a/contents/zh/best-practice/canvas-vs-svg.md
+++ b/contents/zh/best-practice/canvas-vs-svg.md
@@ -8,11 +8,7 @@ ECharts 从初始一直使用 Canvas 绘制图表（除了对 IE8- 使用 VML）
## 选择哪种渲染器
-一般来说，Canvas
更适合绘制图形元素数量非常大（这一般是由数据量大导致）的图表（如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等），也利于实现某些视觉
[特效](examples/editor.html?c=lines-bmap-effect)。但是，在不少场景中，SVG
具有重要的优势：它的内存占用更低（这对移动端尤其重要）、渲染性能略高、并且用户使用浏览器内置的缩放功能时不会模糊。例如，我们在一些硬件环境中分别使用
Canvas 渲染器和 SVG 渲染器绘制中等数据量的折、柱、饼，统计初始动画阶段的帧率，得到了一个性能对比图：
-
-<iframe width="600" height="400"
src="${exampleViewPath}doc-example/canvas-vs-svg&reset=1&edit=1"></iframe>
-
-上图显示出，在这些场景中，SVG 渲染器相比 Canvas
渲染器在移动端的总体表现更好。当然，这个实验并非是全面的评测，在另一些数据量较大或者有图表交互动画的场景中，目前的 SVG 渲染器的性能还比不过 Canvas
渲染器。但是同时有这两个选项，为开发者们根据自己的情况优化性能提供了更广阔的空间。
+一般来说，Canvas
更适合绘制图形元素数量非常大（这一般是由数据量大导致）的图表（如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等），也利于实现某些视觉
[特效](examples/editor.html?c=lines-bmap-effect)。但是，在不少场景中，SVG
具有重要的优势：它的内存占用更低（这对移动端尤其重要）、渲染性能略高、并且用户使用浏览器内置的缩放功能时不会模糊。
选择哪种渲染器，我们可以根据软硬件环境、数据量、功能需求综合考虑。
+ 在软硬件环境较好，数据量不大的场景下（例如 PC 端做商务报表），两种渲染器都可以适用，并不需要太多纠结。
@@ -23,7 +19,7 @@ ECharts 从初始一直使用 Canvas 绘制图表（除了对 IE8- 使用 VML）
我们强烈欢迎开发者们[反馈](https://github.com/apache/echarts/issues/new)给我们使用的体验和场景，帮助我们更好的做优化。
-注：除了某些特殊的渲染可能依赖
Canvas：如[炫光尾迹特效](option.html#series-lines.effect)、[带有混合效果的热力图](examples/editor.html?c=heatmap-bmap)等，绝大部分功能
SVG 都是支持的。此外，目前的 SVG 版中，富文本、材质功能尚未实现。
+注：除了某些特殊的渲染可能依赖
Canvas：如[炫光尾迹特效](option.html#series-lines.effect)、[带有混合效果的热力图](examples/editor.html?c=heatmap-bmap)等，绝大部分功能
SVG 都是支持的。
## 如何使用渲染器
diff --git a/contents/zh/concepts/legend.md b/contents/zh/concepts/legend.md
index 2873919..69f915e 100644
--- a/contents/zh/concepts/legend.md
+++ b/contents/zh/concepts/legend.md
@@ -2,79 +2,79 @@
图例是图表中对内容区元素的注释、用不同形状、颜色、文字等来标示不同数据列，通过点击对应数据列的标记，可以显示或隐藏该数据列。图例虽然不是图表中的主要信息、却是了解图表信息的钥匙。
## 布局
-1.
图例一般放在图表的右上角、也可以放在图表的底部、同一页面中的所有图例位置保持一致，可以横排对齐也可以纵排对齐。还要综合考虑整体的图表空间是适合哪种摆放方式。当图表纵向空间紧张或者内容区量过大的时候、建议摆放在图表的下方。下面是几种图例的摆放方式：
-
- <img max-width="830" width="80%" height="80%"
- src="${rootPath}/images/design/legend/charts_sign_img01.png">
- </img>
- <img max-width="830" width="80%" height="80%"
- src="${rootPath}/images/design/legend/charts_sign_img02.png">
- </img>
-
- ```js
- option = {
- legend: {
- data: ['图例一', '图例二', '图例三'],
- orient: 'vertical',
- left: 10
- ...
- }
+图例一般放在图表的右上角、也可以放在图表的底部、同一页面中的所有图例位置保持一致，可以横排对齐也可以纵排对齐。还要综合考虑整体的图表空间是适合哪种摆放方式。当图表纵向空间紧张或者内容区量过大的时候、建议摆放在图表的下方。下面是几种图例的摆放方式：
+
+<img max-width="830" width="80%" height="80%"
+src="${rootPath}/images/design/legend/charts_sign_img01.png">
+</img>
+<img max-width="830" width="80%" height="80%"
+src="${rootPath}/images/design/legend/charts_sign_img02.png">
+</img>
+
+```js
+option = {
+ legend: {
+ data: ['图例一', '图例二', '图例三'],
+ orient: 'vertical',
+ left: 10
...
- };
- ```
+ }
+ ...
+};
+```
-2. 对于图例较多时，可以使用可滚动翻页的图例
+对于图例较多时，可以使用可滚动翻页的图例
- ```js
- option = {
- legend: {
- type: 'scroll',
- orient: 'vertical',
- right: 10,
- top: 20,
- bottom: 20,
- data: ['图例一', '图例二', '图例三', ..., '图例n'],
- ...
- },
+```js
+option = {
+ legend: {
+ type: 'scroll',
+ orient: 'vertical',
+ right: 10,
+ top: 20,
+ bottom: 20,
+ data: ['图例一', '图例二', '图例三', ..., '图例n'],
...
- };
- ```
+ },
+ ...
+};
+```
## 样式
-1. 在深色系背景下、为了方便阅读，建议给图例加上半透明的浅色背景层，文字颜色设置为浅色。
-
- ```js
- option = {
- legend: {
- data: ['图例一', '图例二', '图例三'],
- backgroundColor: '#ccc',
- textStyle: {
- color: '#ccc',
- ...
- }
+在深色系背景下、为了方便阅读，建议给图例加上半透明的浅色背景层，文字颜色设置为浅色。
+
+```js
+option = {
+ legend: {
+ data: ['图例一', '图例二', '图例三'],
+ backgroundColor: '#ccc',
+ textStyle: {
+ color: '#ccc',
...
- },
+ }
...
- };
- ```
+ },
+ ...
+};
+```
-2. 图例的颜色标签有很多种设计方式、针对不同的图表、图例样式也会有所不同。
+图例的颜色标签有很多种设计方式、针对不同的图表、图例样式也会有所不同。
- <img max-width="830" width="80%" height="80%"
- src="${rootPath}/images/design/legend/charts_sign_img04.png">
- </img>
+<img max-width="830" width="80%" height="80%"
+src="${rootPath}/images/design/legend/charts_sign_img04.png">
+</img>
- ```js
- option = {
- legend: {
- data: ['图例一', '图例二', '图例三'],
- icon: 'rect',
- ...
- },
+```js
+option = {
+ legend: {
+ data: ['图例一', '图例二', '图例三'],
+ icon: 'rect',
...
- };
- ```
+ },
+ ...
+};
+```
## 交互
根据场景需要，图例可支持交互操作，点击控制显示或隐藏对应的数据列；
@@ -96,50 +96,51 @@ option = {
## 图例注意事项
-1. 图例要要注意视情况使用，有些双轴图包含了多种图表类型，不同类型的图例样式要有所区分。
-
- ```js
- option = {
- legend: {
- data: [
- {
- name: '图例一',
- icon: 'rect'
- },
- {
- name: '图例二',
- icon: 'circle'
- },
- {
- name: '图例三',
- icon: 'pin'
- }
- ],
- ...
- },
- series: [
+
+图例要要注意视情况使用，有些双轴图包含了多种图表类型，不同类型的图例样式要有所区分。
+
+```js
+option = {
+ legend: {
+ data: [
{
name: '图例一',
- ...
+ icon: 'rect'
},
{
name: '图例二',
- ...
+ icon: 'circle'
},
{
name: '图例三',
- ...
+ icon: 'pin'
}
- ]
+ ],
...
- };
- ```
+ },
+ series: [
+ {
+ name: '图例一',
+ ...
+ },
+ {
+ name: '图例二',
+ ...
+ },
+ {
+ name: '图例三',
+ ...
+ }
+ ]
+ ...
+};
+```
-2. 当图表只有一种数据信息时，用图表标题说明数据信息即可。建议此时不要加上图例。
+当图表只有一种数据信息时，用图表标题说明数据信息即可。建议此时不要加上图例。
## 示例
-<iframe max-width="830" width="100%" height="400"
+<iframe max-width="830" width="100%" height="400"
src="https://gallery.echartsjs.com/preview.html?c=xkyleg0ydW&v=2";>
</iframe>
diff --git a/contents/zh/posts.js b/contents/zh/posts.js
index 58b55bb..8daecd5 100644
--- a/contents/zh/posts.js
+++ b/contents/zh/posts.js
@@ -164,9 +164,6 @@ export default [{
draft: true
}]
}, {
- title: '自定义构建',
- dir: 'custom-build'
- }, {
title: '无障碍访问',
dir: 'aria',
draft: true
diff --git a/layouts/default.vue b/layouts/default.vue
index e799fe3..972898e 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -13,7 +13,7 @@
</div>
</div>
- <link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/github.min.css">
+ <link rel="stylesheet"
href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css">
</div>
</div>
</template>
@@ -28,7 +28,7 @@ export default {
Navbar
},
- mounted: function () {
+ mounted () {
// This help scroll to the hash
const hash = location.hash;
location.hash = '';
@@ -115,11 +115,11 @@ export default {
.post-inner {
margin: 20px 0 80px 0;
+ color: #4d555e;
h1 {
margin-bottom: 20px;
font-size: 36px;
- color: #222;
}
h2 {
@@ -177,18 +177,35 @@ export default {
margin-bottom: 0;
}
- pre code {
- padding: 10px 15px !important;
+ pre {
+ margin: 10px 0;
border-radius: 5px;
+ background-color: #f5f7fa;
+ border: none;
+ padding: 10px;
+ font-size: 13px;
+
+ code.hljs {
+ background: none;
+ }
+ }
+
+ code {
+ padding: 3px 5px;
+ font-size: 13px;
+ background-color: #eaeeef;
+ border-radius: 4px;
+ color: #000;
}
iframe {
- border: 1px solid #ddd;
+ border: none;
margin: 10px 0;
}
- p {
+ p, li {
line-height: 1.8em;
+ font-size: 14px;
}
}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org
