You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by yu...@apache.org on 2020/06/19 15:08:05 UTC
[incubator-echarts-handbook] branch master updated: docs: add axis
& legend contents
This is an automated email from the ASF dual-hosted git repository.
yufeng04 pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-handbook.git
The following commit(s) were added to refs/heads/master by this push:
new 686afc1 docs: add axis & legend contents
686afc1 is described below
commit 686afc186c6b4c4218f8b6681408b028f8d3ace7
Author: yufeng04 <yu...@baidu.com>
AuthorDate: Fri Jun 19 23:07:36 2020 +0800
docs: add axis & legend contents
---
contents/zh/concepts/axis.md | 175 ++++++++++++++++++++++
contents/zh/concepts/legend.md | 146 ++++++++++++++++++
static/images/design/axis/charts_axis_img01.jpg | Bin 0 -> 52533 bytes
static/images/design/axis/charts_axis_img02.jpg | Bin 0 -> 108274 bytes
static/images/design/axis/charts_axis_img02.png | Bin 0 -> 48183 bytes
static/images/design/axis/charts_axis_img04.png | Bin 0 -> 35306 bytes
static/images/design/axis/charts_axis_img05.png | Bin 0 -> 127743 bytes
static/images/design/axis/charts_axis_img07.png | Bin 0 -> 35872 bytes
static/images/design/axis/charts_axis_img10.png | Bin 0 -> 101322 bytes
static/images/design/axis/charts_axis_img12.png | Bin 0 -> 121293 bytes
static/images/design/legend/charts_sign_img01.png | Bin 0 -> 57372 bytes
static/images/design/legend/charts_sign_img02.png | Bin 0 -> 35627 bytes
static/images/design/legend/charts_sign_img03.png | Bin 0 -> 33294 bytes
static/images/design/legend/charts_sign_img04.png | Bin 0 -> 18736 bytes
14 files changed, 321 insertions(+)
diff --git a/contents/zh/concepts/axis.md b/contents/zh/concepts/axis.md
index e69de29..8456f81 100644
--- a/contents/zh/concepts/axis.md
+++ b/contents/zh/concepts/axis.md
@@ -0,0 +1,175 @@
+# 坐标轴
+直角坐标系中的 X/Y 轴。
+
+## X轴、Y轴
+1. X轴和Y轴都由轴线、刻度、刻度标签、轴标题四个部分组成。部分图表中还会有网格线来帮助查看和计算数据
+
+<img max-width="830" width="100%" height="100%"
+src="${rootPath}/images/design/axis/charts_axis_img02.jpg">
+</img>
+
+2. 普通的二维数据坐标系都有x轴和y轴，通常情况下，x轴显示在图表的底部，y轴显示在左侧，一般配置如下：
+
+ ```js
+ option = {
+ xAxis: {
+ ...
+ },
+ yAxis: {
+ ...
+ }
+ ...
+ };
+ ```
+
+3. X轴常用来标示数据的维度，维度一般用来指数据的类别，是观察数据的角度，例如“销售时间” “销售地点” “产品名称”等。Y轴常常用来标示数据的数值，数值是用来具体考察某一类数据的数量值，也是我们需要分析的指标，例如“销售数量”和“销售金额”等。
+
+ ```js
+ option = {
+ xAxis: {
+ type: 'time',
+ name: '销售时间'
+ ...
+ },
+ yAxis: {
+ type: 'value',
+ name: '销售数量'
+ ...
+ }
+ ...
+ };
+ ```
+
+4. 当X轴（水平坐标轴）跨度很大，可以采用才区域缩放方式灵活显示数据内容。
+
+ ```js
+ option = {
+ xAxis: {
+ type: 'time',
+ name: '销售时间'
+ ...
+ },
+ yAxis: {
+ type: 'value',
+ name: '销售数量'
+ ...
+ },
+ dataZoom: [...]
+ ...
+ };
+ ```
+
+5. 在二维数据中，轴也可以有多个。ECharts 中一般情况下单个 grid 组件最多只能放两个 X/Y 轴，多于两个 X/Y 轴需要通过配置 offset 属性防止同个位置多个轴的重叠。两个x轴显示在上下，两个y轴显示在左右两侧。
+
+ ```js
+ option = {
+ xAxis: {
+ type: 'time',
+ name: '销售时间'
+ ...
+ },
+ yAxis: [
+ {
+ type: 'value',
+ name: '销售数量'
+ ...
+ },
+ {
+ type: 'value',
+ name: '销售金额'
+ ...
+ }
+ ]
+ ...
+ };
+ ```
+
+## 轴线
+Echarts 提供了轴线[axisLine](${optionPath}xAxis.axisLine)相关的配置，我们可以根据实际情况调整，例如轴线两端的箭头，轴线的样式等。
+
+```js
+option = {
+ xAxis: {
+ axisLine: {
+ symbol: 'arrow',
+ lineStyle: {
+ type: 'dashed'
+ ...
+ }
+ }
+ ...
+ },
+ yAxis: {
+ axisLine: {
+ symbol: 'arrow',
+ lineStyle: {
+ type: 'dashed'
+ ...
+ }
+ }
+ }
+ ...
+};
+```
+
+## 刻度
+Echarts 提供了轴线[axisTick](${optionPath}xAxis.axisTick)相关的配置，我们可以根据实际情况调整，例如刻度线的长度，样式等。
+
+```js
+option = {
+ xAxis: {
+ axisTick: {
+ length: 6,
+ lineStyle: {
+ type: 'dashed'
+ ...
+ }
+ }
+ ...
+ },
+ yAxis: {
+ axisTick: {
+ length: 6,
+ lineStyle: {
+ type: 'dashed'
+ ...
+ }
+ }
+ }
+ ...
+};
+```
+
+## 刻度标签
+Echarts 提供了轴线[axisLabel](${optionPath}xAxis.axisLabel)相关的配置，我们可以根据实际情况调整，例如文字对齐方式，自定义刻度标签内容等。
+
+```js
+option = {
+ xAxis: {
+ axisLabel: {
+ formatter: '{value} kg',
+ align: 'center'
+ ...
+ }
+ ...
+ },
+ yAxis: {
+ axisLabel: {
+ formatter: '{value} 元',
+ align: 'center'
+ ...
+ }
+ }
+ ...
+};
+```
+
+## 示例
+图左侧的y轴代表着东京月平均气温，右图的y轴表示东京降水量，x轴表示时间。两组y轴在一起，反映了平均气味和降水量间的趋势关系。
+<!-- src 需要替换 -->
+<iframe max-width="830" width="100%" height="400"
+ src="https://gallery.echartsjs.com/view-lite.html?cid=xrJYBh__4z">
+</iframe>
+
+
+这里简要介绍了坐标轴相关的常用配置项及用法，更多关于坐标轴配置项及用法请移步[官网](${optionPath}xAxis)
\ No newline at end of file
diff --git a/contents/zh/concepts/legend.md b/contents/zh/concepts/legend.md
index e69de29..2873919 100644
--- a/contents/zh/concepts/legend.md
+++ b/contents/zh/concepts/legend.md
@@ -0,0 +1,146 @@
+# 图例
+图例是图表中对内容区元素的注释、用不同形状、颜色、文字等来标示不同数据列，通过点击对应数据列的标记，可以显示或隐藏该数据列。图例虽然不是图表中的主要信息、却是了解图表信息的钥匙。
+
+## 布局
+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
+ ...
+ }
+ ...
+ };
+ ```
+
+2. 对于图例较多时，可以使用可滚动翻页的图例
+
+
+ ```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',
+ ...
+ }
+ ...
+ },
+ ...
+ };
+ ```
+
+2. 图例的颜色标签有很多种设计方式、针对不同的图表、图例样式也会有所不同。
+
+ <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: ['图例一', '图例二', '图例三'],
+ selected: {
+ '图例一': true,
+ '图例二': true,
+ '图例三': false
+ }
+ ...
+ },
+ ...
+};
+```
+
+
+## 图例注意事项
+1. 图例要要注意视情况使用，有些双轴图包含了多种图表类型，不同类型的图例样式要有所区分。
+
+ ```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"
+ src="https://gallery.echartsjs.com/preview.html?c=xkyleg0ydW&v=2">
+</iframe>
+
+这里简要介绍了坐标轴相关的常用配置项及用法，更多关于坐标轴配置项及用法请移步[官网](${optionPath}legend)
\ No newline at end of file
diff --git a/static/images/design/axis/charts_axis_img01.jpg b/static/images/design/axis/charts_axis_img01.jpg
new file mode 100644
index 0000000..b2ceeae
Binary files /dev/null and b/static/images/design/axis/charts_axis_img01.jpg differ
diff --git a/static/images/design/axis/charts_axis_img02.jpg b/static/images/design/axis/charts_axis_img02.jpg
new file mode 100644
index 0000000..1c605cd
Binary files /dev/null and b/static/images/design/axis/charts_axis_img02.jpg differ
diff --git a/static/images/design/axis/charts_axis_img02.png b/static/images/design/axis/charts_axis_img02.png
new file mode 100644
index 0000000..bbb445f
Binary files /dev/null and b/static/images/design/axis/charts_axis_img02.png differ
diff --git a/static/images/design/axis/charts_axis_img04.png b/static/images/design/axis/charts_axis_img04.png
new file mode 100644
index 0000000..35711b9
Binary files /dev/null and b/static/images/design/axis/charts_axis_img04.png differ
diff --git a/static/images/design/axis/charts_axis_img05.png b/static/images/design/axis/charts_axis_img05.png
new file mode 100644
index 0000000..5bd9f05
Binary files /dev/null and b/static/images/design/axis/charts_axis_img05.png differ
diff --git a/static/images/design/axis/charts_axis_img07.png b/static/images/design/axis/charts_axis_img07.png
new file mode 100644
index 0000000..70f9669
Binary files /dev/null and b/static/images/design/axis/charts_axis_img07.png differ
diff --git a/static/images/design/axis/charts_axis_img10.png b/static/images/design/axis/charts_axis_img10.png
new file mode 100644
index 0000000..e4b2ae0
Binary files /dev/null and b/static/images/design/axis/charts_axis_img10.png differ
diff --git a/static/images/design/axis/charts_axis_img12.png b/static/images/design/axis/charts_axis_img12.png
new file mode 100644
index 0000000..1142294
Binary files /dev/null and b/static/images/design/axis/charts_axis_img12.png differ
diff --git a/static/images/design/legend/charts_sign_img01.png b/static/images/design/legend/charts_sign_img01.png
new file mode 100644
index 0000000..223a64b
Binary files /dev/null and b/static/images/design/legend/charts_sign_img01.png differ
diff --git a/static/images/design/legend/charts_sign_img02.png b/static/images/design/legend/charts_sign_img02.png
new file mode 100644
index 0000000..419a2ca
Binary files /dev/null and b/static/images/design/legend/charts_sign_img02.png differ
diff --git a/static/images/design/legend/charts_sign_img03.png b/static/images/design/legend/charts_sign_img03.png
new file mode 100644
index 0000000..9afd241
Binary files /dev/null and b/static/images/design/legend/charts_sign_img03.png differ
diff --git a/static/images/design/legend/charts_sign_img04.png b/static/images/design/legend/charts_sign_img04.png
new file mode 100644
index 0000000..1f5b910
Binary files /dev/null and b/static/images/design/legend/charts_sign_img04.png differ
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org