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