You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2020/06/18 14:53:03 UTC
[incubator-echarts-doc] branch live-example updated: example: add
UI on tooltip, calendar, pictorialBar
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 96c5a53 example: add UI on tooltip,calendar,pictorialBar
96c5a53 is described below
commit 96c5a532ae973f62f7577ad59818c8ebc3a2b4e0
Author: pissang <bm...@gmail.com>
AuthorDate: Thu Jun 18 22:52:45 2020 +0800
example: add UI on tooltip,calendar,pictorialBar
---
src/components/LiveExample.vue | 15 +++--
zh/option/component/calendar.md | 107 +++++++++++++++++++++++++++++
zh/option/component/tooltip.md | 130 ++++++++++++++++++++++++++++++++++++
zh/option/partial/tooltip-common.md | 12 ++++
zh/option/series/pictorialBar.md | 72 ++++++++++++++++++++
5 files changed, 329 insertions(+), 7 deletions(-)
diff --git a/src/components/LiveExample.vue b/src/components/LiveExample.vue
index 56b30c9..6aa73ea 100644
--- a/src/components/LiveExample.vue
+++ b/src/components/LiveExample.vue
@@ -241,9 +241,11 @@ export default {
computed: {
optionCodeStr() {
const optStr = JSON.stringify(this.shared.currentExampleOption, function (key, value) {
- // if (typeof value === 'function') {
- // return "__functionstart__" + value.toString() + "__functionend__";
- // }
+ if (typeof value === 'function') {
+ return "__functionstart__"
+ + value.toString().replace(/\n/g, '__newline__') // avoid \n being escaped by JSON.stringify
+ + "__functionend__";
+ }
return value;
});
return `const option = ${optStr}`;
@@ -252,11 +254,10 @@ export default {
formattedOptionCodeStr() {
return beautify.js(this.optionCodeStr
.replace(/"(\w+)"\s*:/g, '$1:')
- // .replace(/"__functionstart__/g, "")
- // .replace(/__functionend__"/g, "")
+ .replace(/"__functionstart__/g, "")
+ .replace(/__functionend__"/g, "")
// newline from function
- // .replace(/\\n/g, '\n')
- , {
+ .replace(/__newline__/g, '\n'), {
indent_size: 2
});
}
diff --git a/zh/option/component/calendar.md b/zh/option/component/calendar.md
index 4d31c54..7ed14af 100644
--- a/zh/option/component/calendar.md
+++ b/zh/option/component/calendar.md
@@ -44,6 +44,59 @@
---
+<ExampleBaseOption name="calendar" title="日历图">
+function getVirtulData(year) {
+ year = year || '2017';
+ var date = +new Date(year + '-01-01');
+ var end = +new Date((+year + 1) + '-01-01');
+ var dayTime = 3600 * 24 * 1000;
+ var data = [];
+ for (var time = date; time < end; time += dayTime) {
+ data.push([
+ time,
+ Math.floor(Math.random() * 10000)
+ ]);
+ }
+ return data;
+}
+
+const option = {
+ title: {
+ top: 30,
+ left: 'center',
+ text: '2016年某人每天的步数'
+ },
+ tooltip: {},
+ visualMap: {
+ min: 0,
+ max: 10000,
+ type: 'piecewise',
+ orient: 'horizontal',
+ left: 'center',
+ top: 65,
+ textStyle: {
+ color: '#000'
+ }
+ },
+ calendar: {
+ top: 120,
+ left: 30,
+ right: 30,
+ cellSize: ['auto', 13],
+ range: '2016',
+ itemStyle: {
+ borderWidth: 0.5
+ },
+ yearLabel: {show: false}
+ },
+ series: {
+ type: 'heatmap',
+ coordinateSystem: 'calendar',
+ data: getVirtulData(2016)
+ }
+};
+</ExampleBaseOption>
+
{{use: partial-component-id(prefix="#")}}
{{ use: partial-rect-layout-width-height(
@@ -75,6 +128,8 @@ range: ['2017-01', '2017-02']
## cellSize(number|Array) = 20
+<ExampleUIControlNumber min="0" step="1" default="20" />
+
日历每格框的大小，可设置单值 或数组 第一个元素是宽 第二个元素是高。
支持设置自适应：`auto`, 默认为高宽均为20
@@ -99,17 +154,27 @@ cellSize: ['auto', 40]
```
## width(number|string) = auto
+
+<ExampleUIControlNumber min="0" step="1" />
+
日历坐标的整体宽度
注意: 默认cellSize 为20，若设置了`width`的值, 则`cellSize`中的宽度强制转为`auto`;
## height(number|string) = auto
+
+<ExampleUIControlNumber min="0" step="1" />
+
日历坐标的整体高度，
注意: 默认cellSize 为20，若设置了`height`的值, 则`cellSize`中的高度强制转为`auto`;
## orient(string) = 'horizontal'
+
+
+<ExampleUIControlEnum options="horizontal,vertical" default="horizontal" />
+
日历坐标的布局朝向。
可选：
@@ -120,6 +185,9 @@ cellSize: ['auto', 40]
设置日历坐标分隔线的样式。
### show(boolean) = ${defaultShow|default(true)}
+
+<ExampleUIControlBoolean show="${defaultShow|default(true)}" />
+
是否显示分隔线。默认显示。
### lineStyle(Object)
@@ -173,9 +241,15 @@ calendar: [{
设置日历坐标中 星期轴的样式
### show(boolean) = true
+
+<ExampleUIControlBoolean default="true" />
+
是否在普通状态下显示标签。
### firstDay(number) = 0
+
+<ExampleUIControlNumber min="0" max="6" step="1" />
+
一周从周几开始，默认从周日开始
例如：
@@ -191,9 +265,15 @@ calendar: [{
```
### margin(number) = 0
+
+<ExampleUIControlNumber min="0" step="1" />
+
星期标签与轴线之间的距离
### position(string) = 'start'
+
+<ExampleUIControlEnum options="start,end" default="start" />
+
星期的位置 在星期轴的开头还是结尾。
可选：
@@ -201,6 +281,9 @@ calendar: [{
+ 'end'
### nameMap(string|Array) = 'en'
+
+<ExampleUIControlEnum options="en,cn" default="en" />
+
星期显示的效果，默认为'en'
可设置中英文以及自定义
下标0为对应星期天的文字显示
@@ -228,9 +311,15 @@ calendar: [{
设置日历坐标中 月份轴的样式
### show(boolean) = true
+
+<ExampleUIControlBoolean default="true" />
+
是否在普通状态下显示标签。
### align(string) = 'center'
+
+<ExampleUIControlEnum options="left,center" default="center" />
+
设置月份区间内的月份文字位置。
可选：
@@ -238,9 +327,15 @@ calendar: [{
+ 'left' // 区间内的左边
### margin(number) = 5
+
+<ExampleUIControlNumber min="0" step="5" />
+
月份标签与轴线之间的距离
### position(string) = 'start'
+
+<ExampleUIControlEnum options="start,end" default="start" />
+
月份的位置 在开头还是结尾。
可选：
@@ -248,6 +343,9 @@ calendar: [{
+ 'end'
### nameMap(string|Array) = 'en'
+
+<ExampleUIControlEnum options="en,cn" default="en" />
+
月份显示的效果，默认为'en'
可设置中英文以及自定义
下标0为对应一月的文字显示
@@ -318,12 +416,21 @@ formatter: function (param) {
设置日历坐标中 年的样式
### show(boolean) = true
+
+<ExampleUIControlBoolean default="true" />
+
是否在普通状态下显示标签。
### margin(number) = 30
+
+<ExampleUIControlNumber min="0" step="1" />
+
年份与轴线之间的距离
### position(string)
+
+<ExampleUIControlEnum options="top,bottom,left,right" />
+
年份的位置
默认横向是'left' 竖向是'top'
diff --git a/zh/option/component/tooltip.md b/zh/option/component/tooltip.md
index f43454a..e36d53e 100644
--- a/zh/option/component/tooltip.md
+++ b/zh/option/component/tooltip.md
@@ -9,23 +9,139 @@
{{use: partial-tooltip-introduction}}
+
+<ExampleBaseOption name="tooltip" title="提示框">
+var base = +new Date(2016, 9, 3);
+var oneDay = 24 * 3600 * 1000;
+var valueBase = Math.random() * 300;
+var valueBase2 = Math.random() * 50;
+var data = [];
+var data2 = [];
+
+for (var i = 1; i < 10; i++) {
+ var now = new Date(base += oneDay);
+ var dayStr = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-');
+
+ valueBase = Math.round((Math.random() - 0.5) * 20 + valueBase);
+ valueBase <= 0 && (valueBase = Math.random() * 300);
+ data.push([dayStr, valueBase]);
+
+ valueBase2 = Math.round((Math.random() - 0.5) * 20 + valueBase2);
+ valueBase2 <= 0 && (valueBase2 = Math.random() * 50);
+ data2.push([dayStr, valueBase2]);
+}
+
+const option = {
+ legend: {
+ top: 'bottom',
+ data: ['意向']
+ },
+ tooltip: {
+ triggerOn: 'none',
+ alwaysShowContent: true,
+ position: function (pt) {
+ return [pt[0], 130];
+ }
+ },
+ xAxis: {
+ type: 'time',
+ // boundaryGap: [0, 0],
+ axisPointer: {
+ value: '2016-10-7',
+ snap: true,
+ label: {
+ show: true,
+ formatter: function (params) {
+ return echarts.format.formatTime('yyyy-MM-dd', params.value);
+ }
+ },
+ handle: {
+ show: true
+ }
+ },
+ splitLine: {
+ show: false
+ }
+ },
+ yAxis: {
+ type: 'value',
+ axisTick: {
+ inside: true
+ },
+ splitLine: {
+ show: false
+ },
+ axisLabel: {
+ inside: true
+ },
+ z: 10
+ },
+ grid: {
+ top: 110,
+ left: 15,
+ right: 15,
+ height: 160
+ },
+ series: [
+ {
+ name: '模拟数据',
+ type: 'line',
+ smooth: true,
+ symbol: 'circle',
+ symbolSize: 5,
+ sampling: 'average',
+ itemStyle: {
+ color: '#8ec6ad'
+ },
+ stack: 'a',
+ areaStyle: {
+ },
+ data: data
+ },
+ {
+ name: '模拟数据',
+ type: 'line',
+ smooth: true,
+ stack: 'a',
+ symbol: 'circle',
+ symbolSize: 5,
+ sampling: 'average',
+ itemStyle: {
+ color: '#d68262'
+ },
+ areaStyle: {
+ },
+ data: data2
+ }
+
+ ]
+};
+</ExampleBaseOption>
+
{{use: partial-tooltip-coords-common(
prefix='#',
galleryViewPath=${galleryViewPath}
)}}
+
## showContent(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
是否显示提示框浮层，默认显示。只需tooltip触发事件或显示axisPointer而不需要显示内容时可配置该项为`false`。
## alwaysShowContent(boolean) = false
+<ExampleUIControlBoolean default="false" />
+
是否永远显示提示框内容，默认情况下在移出可触发提示框区域后 [一定时间](~tooltip.hideDelay) 后隐藏，设置为 `true` 可以保证一直显示提示框内容。
该属性为 ECharts 3.0 中新加。
## triggerOn(string) = 'mousemove|click'
+<ExampleUIControlEnum options="mousemove|click,mousemove,click" />
+
提示框触发的条件，可选：
+ `'mousemove'`
@@ -48,28 +164,40 @@
## showDelay(number) = 0
+<ExampleUIControlNumber min="0" step="20" />
+
浮层显示的延迟，单位为 ms，默认没有延迟，也不建议设置。在 [triggerOn](~tooltip.triggerOn) 为 `'mousemove'` 时有效。
## hideDelay(number) = 100
+<ExampleUIControlNumber min="0" step="20" default="100" />
+
浮层隐藏的延迟，单位为 ms，在 [alwaysShowContent](~tooltip.alwaysShowContent) 为 `true` 的时候无效。
## enterable(boolean) = false
+<ExampleUIControlBoolean default="false" />
+
鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 `true`。
## renderMode(string) = 'html'
+<ExampleUIControlEnum options="html,richText" default="html" />
+
浮层的渲染模式，默认以 `'html` 即额外的 DOM 节点展示 tooltip；此外还可以设置为 `'richText'` 表示以富文本的形式渲染，渲染的结果在图表对应的 Canvas 中（目前 SVG 尚未支持富文本），这对于一些没有 DOM 的环境（如微信小程序）有更好的支持。
## confine(boolean) = false
+<ExampleUIControlBoolean default="false" />
+
是否将 tooltip 框限制在图表的区域内。
当图表外层的 dom 被设置为 `'overflow: hidden'`，或者移动端窄屏，导致 tooltip 超出外界被截断时，此配置比较有用。
## appendToBody(boolean) = false
+<ExampleUIControlBoolean default="false" />
+
{{ use: partial-version(version="4.7.0") }}
是否将 tooltip 的 DOM 节点添加为 HTML 的 `<body>` 的子节点。只有当 [renderMode](~tooltip.renderMode) 为 `'html'` 是有意义的。
@@ -83,6 +211,8 @@
## transitionDuration(number) = 0.4
+<ExampleUIControlNumber min="0" step="0.1" default="0.4" />
+
提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动。
diff --git a/zh/option/partial/tooltip-common.md b/zh/option/partial/tooltip-common.md
index 870b075..fd084d0 100644
--- a/zh/option/partial/tooltip-common.md
+++ b/zh/option/partial/tooltip-common.md
@@ -103,11 +103,15 @@
#${prefix} show(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
是否显示提示框组件，包括提示框浮层和 [axisPointer](~tooltip.axisPointer)。
#${prefix} trigger(string) = 'item'
+<ExampleUIControlEnum default="item,axis,none" />
+
触发类型。
可选：
@@ -143,6 +147,8 @@
##${prefix} type(string) = 'line'
+<ExampleUIControlEnum default="none,line,shadow,cross" />
+
指示器类型。
可选
@@ -340,18 +346,24 @@ formatter: function (params, ticket, callback) {
#${prefix} borderColor(Color) = '#333'
+<ExampleUIControlColor default="#333" />
+
{{use: partial-tooltip-scope-tip(scope=${scope})}}
提示框浮层的边框颜色。
#${prefix} borderWidth(number) = 0
+<ExampleUIControlNumber default="0" step="0.5" />
+
{{use: partial-tooltip-scope-tip(scope=${scope})}}
提示框浮层的边框宽。
#${prefix} padding(number) = 5
+<ExampleUIControlVector dims="T,R,B,L" default="5,5,5,5" />
+
{{use: partial-tooltip-scope-tip(scope=${scope})}}
{{ use: partial-padding(componentName='提示框浮层') }}
diff --git a/zh/option/series/pictorialBar.md b/zh/option/series/pictorialBar.md
index b3c6a94..3662e8a 100644
--- a/zh/option/series/pictorialBar.md
+++ b/zh/option/series/pictorialBar.md
@@ -45,6 +45,58 @@
参见例子：
~[800x600](${galleryViewPath}doc-example/pictorialBar-clip&reset=1&edit=1)
+<ExampleBaseOption title="基础象形柱图" name="pictorial-bar">
+var spirit = 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHUAAACUCAYAAACtHGabAAAACXBIWXMAABcSAAAXEgFnn9JSAAAKTWlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVN3WJP3Fj7f92UPVkLY8LGXbIEAIiOsCMgQWaIQkgBhhBASQMWFiApWFBURnEhVxILVCkidiOKgKLhnQYqIWotVXDjuH9yntX167+3t+9f7vOec5/zOec8PgBESJpHmomoAOVKFPDrYH49PSMTJvYACFUjgBCAQ5svCZwXFAADwA3l4fnSwP/wBr28AAgBw1S4kEsfh/4O6UCZXACCRAOAiEucLAZBSAMguVMgUAMgYALBTs2QKAJQAAGx5fEIiAKoNAOz0ST4FANipk9wXANiiHKkIAI0BAJkoRyQCQLsAYFWBUiwCwMIAoKxAIi4EwK4BgFm2MkcC [...]
+
+var maxData = 2000;
+
+option = {
+ tooltip: {
+ },
+ xAxis: {
+ max: maxData,
+ splitLine: {show: false},
+ offset: 10,
+ axisLine: {
+ lineStyle: {
+ color: '#999'
+ }
+ },
+ axisLabel: {
+ margin: 10
+ }
+ },
+ yAxis: {
+ data: ['2013', '2014', '2015', '2016'],
+ inverse: true,
+ axisTick: {show: false},
+ axisLine: {show: false},
+ axisLabel: {
+ margin: 10,
+ color: '#999',
+ fontSize: 16
+ }
+ },
+ grid: {
+ top: 'center',
+ height: 200,
+ left: 70,
+ right: 100
+ },
+ series: [{
+ // current data
+ type: 'pictorialBar',
+ symbol: spirit,
+ symbolRepeat: 'fixed',
+ symbolMargin: '5%',
+ symbolClip: true,
+ symbolSize: 30,
+ symbolBoundingData: maxData,
+ data: [891, 1220, 660, 1670],
+ z: 10
+ }]
+};
+</ExampleBaseOption>
## type(string) = 'pictorialBar'
@@ -209,6 +261,8 @@
#${prefix} symbolSize(number|Array) = ['100%', '100%']
+<ExampleUIControlPercent default="100%,100%" dims="W,H" />
+
图形的大小。
可以用数组分开表示宽和高，例如 `[20, 10]` 表示标记宽为`20`，高为`10`，也可以设置成诸如 `10` 这样单一的数字，表示 `[10, 10]`。
@@ -234,6 +288,8 @@
#${prefix} symbolPosition(string) = 'start'
+<ExampleUIControlEnum options="start,end,center" default="start" />
+
图形的定位位置。可取值：
+ `'start'`：图形边缘与柱子开始的地方内切。
@@ -248,6 +304,8 @@
#${prefix} symbolOffset(Array) = [0, 0]
+<ExampleUIControlPercentVector default="0,0" dims="x,y" />
+
图形相对于原本位置的偏移。`symbolOffset` 是图形定位中最后计算的一个步骤，可以对图形计算出来的位置进行微调。
可以设置成绝对值（如 `10`），也可以设置成百分比（如 `'120%'`、`['55%', 23]`）。
@@ -264,6 +322,8 @@
#${prefix} symbolRotate(number)
+<ExampleUIControlAngle min="-360" max="360" step="1" />
+
图形的旋转角度。
注意，`symbolRotate` 并不会影响图形的定位（哪怕超出基准柱的边界），而只是单纯得绕自身中心旋转。
@@ -273,6 +333,8 @@
#${prefix} symbolRepeat(boolean|number|string)
+<ExampleUIControlEnum options="true,false,fixed" />
+
指定图形元素是否重复。值可为：
+ `false`/`null`/`undefined`：不重复，即每个数据值用一个图形元素表示。
@@ -288,6 +350,8 @@
#${prefix} symbolRepeatDirection(string) = 'start'
+<ExampleUIControlEnum options="start,end" default="start" />
+
指定图形元素重复时，绘制的顺序。这个属性在两种情况下有用处：
+ 当 [symbolMargin](~series-pictorialBar.symbolMargin) 设置为负值时，重复的图形会互相覆盖，这是可以使用 `symbolRepeatDirection` 来指定覆盖顺序。
@@ -304,6 +368,8 @@
#${prefix} symbolMargin(number|string)
+<ExampleUIControlPercentVector default="0,0" dims="x,y" />
+
图形的两边间隔（『两边』是指其数值轴方向的两边）。可以是绝对数值（如 `20`），或者百分比值（如 `'-30%'`），表示相对于自身尺寸 [symbolSize](~series-pictorialBar.symbolSize) 的百分比。只有当 [symbolRepeat](~series-pictorialBar.symbolRepeat) 被使用时有意义。
可以是正值，表示间隔大；也可以是负数。当 [symbolRepeat](~series-pictorialBar.symbolRepeat) 被使用时，负数时能使图形重叠。
@@ -325,6 +391,8 @@
#${prefix} symbolClip(boolean) = false
+<ExampleUIControlBoolean />
+
是否剪裁图形。
+ `false`/null/undefined：图形本身表示数值大小。
@@ -388,6 +456,8 @@
#${prefix} symbolPatternSize(number) = 400
+<ExampleUIControlNumber default="400" step="10" min="0" />
+
可以使用图片作为图形的 pattern。
```js
@@ -420,6 +490,8 @@ itemStyle: {
#${prefix} hoverAnimation(boolean) = false
+<ExampleUIControlBoolean />
+
是否开启 hover 在图形上的提示动画效果。
{{ use: pictorialBar-symbol-attrs-cascade(attrName='hoverAnimation') }}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org