This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch live-example
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-doc.git
The following commit(s) were added to refs/heads/live-example by this push:
new 89f8c6a example: add more UI on series
89f8c6a is described below
commit 89f8c6a74d15718f2240a98b0299f02b979291a7
Author: pissang <bm2736...@gmail.com>
AuthorDate: Wed Jun 17 19:43:12 2020 +0800
example: add more UI on series
---
src/controls/ControlColorStops.vue | 0
zh/option/series/funnel.md | 43 +++++++++++++
zh/option/series/gauge.md | 124 +++++++++++++++++++++++++++++++++++++
zh/option/series/graph.md | 13 +++-
zh/option/series/sankey.md | 20 ++++++
zh/option/series/themeRiver.md | 76 +++++++++++++++++++++++
6 files changed, 275 insertions(+), 1 deletion(-)
diff --git a/src/controls/ControlColorStops.vue
b/src/controls/ControlColorStops.vue
new file mode 100644
index 0000000..e69de29
diff --git a/zh/option/series/funnel.md b/zh/option/series/funnel.md
index 1220bdd..6878c62 100644
--- a/zh/option/series/funnel.md
+++ b/zh/option/series/funnel.md
@@ -8,6 +8,28 @@
**示例：**
~[600x400](${galleryViewPath}funnel&reset=1&edit=1)
+<ExampleBaseOption name="funnel" tilte="基础漏斗图">
+option = {
+ legend: {
+ data: ['Display','Click','Visit','Consulting','Order']
+ },
+ series: [
+ {
+ name:'漏斗图',
+ type:'funnel',
+ data: [
+ {value: 60, name: 'Visit'},
+ {value: 40, name: 'Consulting'},
+ {value: 20, name: 'Order'},
+ {value: 80, name: 'Click'},
+ {value: 100, name: 'Display'}
+ ]
+ }
+ ]
+};
+
+</ExampleBaseOption>
+
## type(string) = 'funnel'
{{use: partial-component-id(prefix="#")}}
@@ -15,30 +37,51 @@
{{ use: partial-series-name() }}
## min(number) = 0
+
+<ExampleUIControlNumber default="0" step="1" />
+
指定的数据最小值。
## max(number) = 100
+
+<ExampleUIControlNumber default="100" step="1" />
+
指定的数据最大值。
## minSize(number|string) = '0%'
+
+<ExampleUIControlPercent default="0%" />
+
数据最小值 [min](~series-funnel.min) 映射的宽度。
可以是绝对的像素大小，也可以是相对[布局宽度](~series-funnel.width)的百分比，如果需要最小值的图形并不是尖端三角，可通过设置该属性实现。
## maxSize(number|string) = '100%'
+
+<ExampleUIControlPercent default="100%" />
+
数据最大值 [max](~series-funnel.max) 映射的宽度。
可以是绝对的像素大小，也可以是相对[布局宽度](~series-funnel.width)的百分比。
## sort(string|Function) = 'descending'
+
+<ExampleUIControlEnum options="none,descending,ascending" default="descending"
/>
+
数据排序， 可以取 `'ascending'`，`'descending'`，`'none'`（表示按 data 顺序），或者一个函数（即
`Array.prototype.sort(function (a, b) { ... })`）。
## gap(number) = 0
+
+<ExampleUIControlNumber default="0" min="0" step="0.5" />
+
数据图形间距。
{{ use: partial-legend-hover-link }}
## funnelAlign(string) = 'center'
+
+<ExampleUIControlEnum options="left,center,right" default="center" />
+
水平方向对齐布局类型，默认居中对齐，可用选项还有：'left' | 'right' | 'center'
diff --git a/zh/option/series/gauge.md b/zh/option/series/gauge.md
index 009a916..5914105 100644
--- a/zh/option/series/gauge.md
+++ b/zh/option/series/gauge.md
@@ -8,6 +8,19 @@
**示例：**
~[600x500](${galleryViewPath}gauge-car)
+<ExampleBaseOption name="gauge" title="基础仪表盘">
+const option = {
+ series: [
+ {
+ name: '业务指标',
+ type: 'gauge',
+ detail: {formatter: '{value}%'},
+ data: [{value: 50, name: '完成率'}]
+ }
+ ]
+};
+</ExampleBaseOption>
+
## type(string) = 'gauge'
{{use: partial-component-id(prefix="#")}}
@@ -17,17 +30,32 @@
{{ use: partial-circular-layout }}
<!-- overwrite radius -->
## radius(number|string) = '75%'
+
+<ExampleUIControlPercent default="75%" />
+
仪表盘半径，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
{{ use partial-legend-hover-link }}
## startAngle(number) = 225
+
+
+<ExampleUIControlAngle min="-360" max="360" default="225" step="1" />
+
+
仪表盘起始角度。[圆心](~series-gauge.center) 正右手侧为`0`度，正上方为`90`度，正左手侧为`180`度。
## endAngle(number) = -45
+
+
+<ExampleUIControlAngle min="-360" max="360" default="-45" step="1" />
+
仪表盘结束角度。
## clockwise(boolean) = true
+
+<ExampleUIControlBoolean default="true" />
+
仪表盘刻度是否是顺时针增长。
## data(Array)
@@ -35,21 +63,37 @@
### name(string)
数据项名称。
### value(number)
+
+<ExampleUIControlNumber default="0" step="1" />
+
数据值。
## min(number) = 0
+
+<ExampleUIControlNumber default="0" step="1" />
+
最小的数据值，映射到 [minAngle](~series-gauge.minAngle)。
## max(number) = 100
+
+<ExampleUIControlNumber default="100" step="1" />
+
最大的数据值，映射到 [maxAngle](~series-gauge.maxAngle)。
## splitNumber(number) = 10
+
+<ExampleUIControlNumber min="1" default="10" step="1" />
+
仪表盘刻度的分割段数。
## axisLine(Object)
仪表盘轴线相关配置。
### show(boolean) = true
+
+<ExampleUIControlBoolean default="true" />
+
是否显示仪表盘轴线。
+
### lineStyle(Object)
仪表盘轴线样式。
#### color(Array)
@@ -66,9 +110,17 @@
## splitLine(Object)
分隔线样式。
### show(boolean) = true
+
+<ExampleUIControlBoolean default="true" />
+
是否显示分隔线。
+
### length(number|string) = 30
+
+<ExampleUIControlPercent default="30" min="0" step="0.5" />
+
分隔线线长。支持相对半径的百分比。
+
### lineStyle(Object)
{{ use: partial-line-style(
prefix='###',
@@ -80,11 +132,23 @@
## axisTick(Object)
刻度样式。
### show(boolean) = true
+
+<ExampleUIControlBoolean default="true" />
+
是否显示刻度。
+
### splitNumber(number) = 5
+
+<ExampleUIControlNumber min="1" default="5" step="1" />
+
分隔线之间分割的刻度数。
+
### length(number|string) = 8
+
+<ExampleUIControlPercent default="8" min="0" step="0.5" />
+
刻度线长。支持相对半径的百分比。
+
### lineStyle(Object)
{{ use: partial-line-style(
prefix='###',
@@ -96,9 +160,17 @@
## axisLabel(Object)
刻度标签。
### show(boolean) = true
+
+<ExampleUIControlBoolean default="true" />
+
是否显示标签。
+
### distance(number) = 5
+
+<ExampleUIControlNumber default="5" min="0" step="0.5" />
+
标签与刻度线的距离。
+
### formatter(string|Function)
刻度标签的内容格式器，支持字符串模板和回调函数两种形式。
示例:
@@ -120,11 +192,23 @@ formatter: function (value) {
## pointer(Object)
仪表盘指针。
+
### show(boolean) = true
+
+<ExampleUIControlBoolean default="true" />
+
是否显示指针。
+
### length(string|number) = '80%'
+
+<ExampleUIControlPercent default="80%" min="0" step="0.5" />
+
指针长度，可以是绝对数值，也可以是相对于[半径](~series-gauge.radius)的半分比。
+
### width(number) = 8
+
+<ExampleUIControlNumber default="8" min="0" step="0.5" />
+
指针宽度。
## itemStyle(Object)
@@ -143,9 +227,17 @@ formatter: function (value) {
## title(Object)
仪表盘标题。
+
### show(boolean) = true
+
+<ExampleUIControlBoolean default="true" />
+
是否显示标题。
### offsetCenter(Array) = [0, '-40%']
+
+<ExampleUIControlPercentVector default="0,-40%" dims="x,y" />
+
+
相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
{{ use: partial-text-style(
prefix="##",
@@ -157,19 +249,47 @@ formatter: function (value) {
## detail(Object)
仪表盘详情，用于显示数据。
+
### show(boolean) = true
+
+<ExampleUIControlBoolean default="true" />
+
是否显示详情。
+
### width(number) = 100
+
+<ExampleUIControlPercent default="100" min="0" step="1" />
+
详情宽度。
+
### height(number) = 40
+
+<ExampleUIControlPercent default="40" min="0" step="1" />
+
详情高度。
+
### backgroundColor(Color) = 'transparent'
+
+<ExampleUIControlColor />
+
详情背景色。
+
### borderWidth(number) = 0
+
+<ExampleUIControlNumber min="0" step="0.5" />
+
详情边框宽度。
+
### borderColor(Color) = '#ccc'
+
+<ExampleUIControlColor default="#ccc" />
+
详情边框颜色。
+
### offsetCenter(Array) = [0, '40%']
+
+<ExampleUIControlPercentVector default="0,-40%" dims="x,y" />
+
相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
### formatter(Function|string)
格式化函数或者字符串
@@ -187,8 +307,12 @@ formatter: function (value) {
noAlign=true,
noVerticalAlign=true
) }}
+
<!-- overwrite color -->
#### color(Color) = 'auto'
+
+<ExampleUIControlColor />
+
文本颜色，默认取数值所在的[区间的颜色](~series-gauge.axisLine.lineStyle.color)
{{use: partial-marker(
diff --git a/zh/option/series/graph.md b/zh/option/series/graph.md
index 68df275..580342a 100644
--- a/zh/option/series/graph.md
+++ b/zh/option/series/graph.md
@@ -13,6 +13,11 @@
<ExampleBaseOption name="graph" title="复杂关系图">
const option = {"title":{"text":"Les Miserables","subtext":"Default
layout","top":"bottom","left":"right"},"tooltip":{},"legend":[{"data":["类目0","类目1","类目2","类目3","类目4","类目5","类目6","类目7","类目8"]}],"animationDuration":1500,"animationEasingUpdate":"quinticInOut","series":[{"name":"Les
Miserables","type":"graph","layout":"none","data":[{"id":"0","name":"Myriel","symbolSize":19.12381,"x":-266.82776,"y":299.6904,"value":28.685715,"category":0},{"id":"1","name":"Napoleon","symbolSize":2.6666666
[...]
+
+option.series[0].data.forEach(function (item) {
+ item.x /= 5;
+ item.y /= 5;
+});
</ExampleBaseOption>
## type(string) = 'graph'
@@ -37,6 +42,9 @@ const option = {"title":{"text":"Les
Miserables","subtext":"Default layout","top
是否开启鼠标 hover 节点的提示动画效果。
## center(Array)
+
+<ExampleUIControlVector default="0,0" dims="x,y" />
+
当前视角的中心点
例如：
@@ -45,6 +53,9 @@ center: [115.97, 29.71]
```
## zoom(number) = 1
+
+<ExampleUIControlNumber default="1" min="0" step="0.1" />
+
当前视角的缩放比例。
## layout(string) = 'none'
@@ -110,7 +121,7 @@ edgeLength: [10, 50]
### layoutAnimation(boolean) = true
-<ExampleUIControlBoolean defualt="true" />
+<ExampleUIControlBoolean default="true" />
因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画，在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。
diff --git a/zh/option/series/sankey.md b/zh/option/series/sankey.md
index 795313c..70a584c 100644
--- a/zh/option/series/sankey.md
+++ b/zh/option/series/sankey.md
@@ -23,6 +23,10 @@
如果想指定每层节点的顺序是按照 [data](~series-sankey.data) 中的顺序排列的。可以设置
[layoutIterations](~series-sankey.layoutIterations) 为 `0`。
+<ExampleBaseOption name="sankey" title="桑基图">
+const option =
{"tooltip":{"trigger":"item","triggerOn":"mousemove"},"series":[{"type":"sankey","data":[{"name":"Agricultural
'waste'"},{"name":"Bio-conversion"},{"name":"Liquid"},{"name":"Losses"},{"name":"Solid"},{"name":"Gas"},{"name":"Biofuel
imports"},{"name":"Biomass imports"},{"name":"Coal
imports"},{"name":"Coal"},{"name":"Coal reserves"},{"name":"District
heating"},{"name":"Industry"},{"name":"Heating and cooling -
commercial"},{"name":"Heating and cooling - homes"},{"name":"Ele [...]
+</ExampleBaseOption>
+
## type(string) = 'sankey'
@@ -40,14 +44,20 @@
## nodeWidth(number) = 20
+<ExampleUIControlNumber default="20" min="0" step="0.5" />
+
桑基图中每个矩形节点的宽度。
## nodeGap(number) = 8
+<ExampleUIControlNumber default="8" min="0" step="0.5" />
+
桑基图中每一列任意两个矩形节点之间的间隔。
## nodeAlign(string) = 'justify'
+<ExampleUIControlEnum options="justify,left,right" />
+
桑基图中节点的对齐方式，默认是双端对齐，可以设置为左对齐或右对齐，对应的值分别是：
+ `justify`: 节点双端对齐。
@@ -56,19 +66,27 @@
## layoutIterations(number) = 32
+<ExampleUIControlNumber default="32" min="0" max="100" step="1" />
+
布局的迭代次数，目的是不断迭代优化图中节点和边的位置，以减少节点和边之间的相互遮盖，默认值是 `32`。如果希望图中节点的顺序是按照原始
[data](~series-sankey.data) 中的顺序排列的，可设该值为 `0`。
## orient(string) = 'horizontal'
+<ExampleUIControlEnum options="horizontal,vertical" />
+
桑基图中节点的布局方向，可以是水平的从左往右，也可以是垂直的从上往下，对应的参数值分别是 `horizontal`, `vertical`。
## draggable(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
控制节点拖拽的交互，默认开启。开启后，用户可以将图中任意节点拖拽到任意位置。若想关闭此交互，只需将值设为 `false` 就行了。
## focusNodeAdjacency(boolean|string) = false
+<ExampleUIControlEnum options="false,true,allEdges,outEdges,inEdges" />
+
鼠标 hover 到节点或边上，相邻接的节点和边高亮的交互，默认关闭，可手动开启。
可选值为：
@@ -122,6 +140,8 @@ levels: [{
### depth(number)
+<ExampleUIControlNumber default="0" min="0" step="1" />
+
指定设置的是桑基图哪一层，取值从 0 开始。
### itemStyle(Object)
diff --git a/zh/option/series/themeRiver.md b/zh/option/series/themeRiver.md
index 5d4d945..ec30371 100644
--- a/zh/option/series/themeRiver.md
+++ b/zh/option/series/themeRiver.md
@@ -19,6 +19,82 @@
此外，原数据集中的时间属性，映射到单个时间轴上。
+<ExampleBaseOption name="themeRiver" title="主题河流图">
+
+// From
https://github.com/jsundram/streamgraph.js/blob/master/examples/data/lastfm.js
+var rawData = [
+ [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+ [0, 49, 67, 16, 0, 19, 19, 0, 0, 1, 10, 5, 6, 1, 1, 0, 25, 0, 0, 0],
+ [0, 6, 3, 34, 0, 16, 1, 0, 0, 1, 6, 0, 1, 56, 0, 2, 0, 2, 0, 0],
+ [0, 8, 13, 15, 0, 12, 23, 0, 0, 1, 0, 1, 0, 0, 6, 0, 0, 1, 0, 1],
+ [0, 9, 28, 0, 91, 6, 1, 0, 0, 0, 7, 18, 0, 9, 16, 0, 1, 0, 0, 0],
+ [0, 3, 42, 36, 21, 0, 1, 0, 0, 0, 0, 16, 30, 1, 4, 62, 55, 1, 0, 0],
+ [0, 7, 13, 12, 64, 5, 0, 0, 0, 8, 17, 3, 72, 1, 1, 53, 1, 0, 0, 0],
+ [1, 14, 13, 7, 8, 8, 7, 0, 1, 1, 14, 6, 44, 8, 7, 17, 21, 1, 0, 0],
+ [0, 6, 14, 2, 14, 1, 0, 0, 0, 0, 2, 2, 7, 15, 6, 3, 0, 0, 0, 0],
+ [0, 9, 11, 3, 0, 8, 0, 0, 14, 2, 0, 1, 1, 1, 7, 13, 2, 1, 0, 0],
+ [0, 7, 5, 10, 8, 21, 0, 0, 130, 1, 2, 18, 6, 1, 5, 1, 4, 1, 0, 7],
+ [0, 2, 15, 1, 5, 5, 0, 0, 6, 0, 0, 0, 4, 1, 3, 1, 17, 0, 0, 9],
+ [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+ [6, 27, 26, 1, 0, 11, 1, 0, 0, 0, 1, 1, 2, 0, 0, 9, 1, 0, 0, 0],
+ [31, 81, 11, 6, 11, 0, 0, 0, 0, 0, 0, 0, 3, 2, 0, 3, 14, 0, 0, 12],
+ [19, 53, 6, 20, 0, 4, 37, 0, 30, 86, 43, 7, 5, 7, 17, 19, 2, 0, 0, 5],
+ [0, 22, 14, 6, 10, 24, 18, 0, 13, 21, 5, 2, 13, 35, 7, 1, 8, 0, 0, 1],
+ [0, 56, 5, 0, 0, 0, 0, 0, 7, 24, 0, 17, 7, 0, 0, 3, 0, 0, 0, 8],
+ [18, 29, 3, 6, 11, 0, 15, 0, 12, 42, 37, 0, 3, 3, 13, 8, 0, 0, 0, 1],
+ [32, 39, 37, 3, 33, 21, 6, 0, 4, 17, 0, 11, 8, 2, 3, 0, 23, 0, 0, 17],
+ [72, 15, 28, 0, 0, 0, 0, 0, 1, 3, 0, 35, 0, 9, 17, 1, 9, 1, 0, 8],
+ [11, 15, 4, 2, 0, 18, 10, 0, 20, 3, 0, 0, 2, 0, 0, 2, 2, 30, 0, 0],
+ [14, 29, 19, 3, 2, 17, 13, 0, 7, 12, 2, 0, 6, 0, 0, 1, 1, 34, 0, 1],
+ [1, 1, 7, 6, 1, 1, 15, 1, 1, 2, 1, 3, 1, 1, 9, 1, 1, 25, 1, 72]
+];
+
+var labels = [
+ 'The Sea and Cake',
+ 'Andrew Bird',
+ 'Laura Veirs',
+ 'Brian Eno',
+ 'Christopher Willits',
+ 'Wilco',
+ 'Edgar Meyer',
+ 'B\xc3\xa9la Fleck',
+ 'Fleet Foxes',
+ 'Kings of Convenience',
+ 'Brett Dennen',
+ 'Psapp',
+ 'The Bad Plus',
+ 'Feist',
+ 'Battles',
+ 'Avishai Cohen',
+ 'Rachael Yamagata',
+ 'Norah Jones',
+ 'B\xc3\xa9la Fleck and the Flecktones',
+ 'Joshua Redman'
+];
+
+var data = [];
+for (var i = 0; i < rawData.length; i++) {
+ for (var j = 0; j < rawData[i].length; j++) {
+ var label = labels[i];
+ data.push([
+ j, rawData[i][j], label
+ ]);
+ }
+}
+
+const option = {
+ singleAxis: {
+ max: 'dataMax'
+ },
+ series: [{
+ type: 'themeRiver',
+ data: data,
+ label: {
+ show: false
+ }
+ }]
+};
+</ExampleBaseOption>
## type(string) = 'themeRiver'
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org
