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 2022/04/29 05:11:40 UTC
[echarts-examples] branch gh-pages updated: feat: enrich label-position, add more options
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch gh-pages
in repository https://gitbox.apache.org/repos/asf/echarts-examples.git
The following commit(s) were added to refs/heads/gh-pages by this push:
new c71fb882 feat: enrich label-position, add more options
new 62c9f2a9 Merge pull request #44 from fuchunhui/gh-pages
c71fb882 is described below
commit c71fb8827fee496732abc5d7e944614a788dd68e
Author: fuchunhui <fu...@gmail.com>
AuthorDate: Fri Apr 1 18:42:51 2022 +0800
feat: enrich label-position, add more options
---
public/examples/ts/doc-example/label-position.js | 85 ++++++++++++------------
1 file changed, 43 insertions(+), 42 deletions(-)
diff --git a/public/examples/ts/doc-example/label-position.js b/public/examples/ts/doc-example/label-position.js
index 0f76f95f..43978879 100644
--- a/public/examples/ts/doc-example/label-position.js
+++ b/public/examples/ts/doc-example/label-position.js
@@ -1,17 +1,18 @@
-var posList = [
- 'left', 'right', 'top', 'bottom',
- 'inside',
- 'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
- 'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
-];
-
app.configParameters = {
position: {
- options: posList.reduce(function (map, pos) {
- map[pos] = pos;
- return map;
- }, {})
+ options: [
+ 'left', 'right', 'top', 'bottom',
+ 'inside',
+ 'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
+ 'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
+ ]
+ },
+ align: {
+ options: ['left', 'center', 'right']
+ },
+ verticalAlign: {
+ options: ['top', 'middle', 'bottom']
},
distance: {
min: 0,
@@ -21,55 +22,55 @@ app.configParameters = {
app.config = {
position: 'top',
- distance: 20,
+ align: 'center',
+ verticalAlign: 'middle',
+ distance: 5,
onChange: function () {
myChart.setOption({
series: {
type: 'scatter',
label: {
- normal: {
- position: app.config.position,
- distance: app.config.distance
- }
+ position: app.config.position,
+ align: app.config.align,
+ verticalAlign: app.config.verticalAlign,
+ distance: app.config.distance
}
}
});
}
};
-
-
option = {
series: [
{
type: 'scatter',
- symbolSize: 160,
+ symbolSize: 360,
symbol: 'roundRect',
data: [[1, 1]],
label: {
- normal: {
-
- position: app.config.position,
- distance: app.config.distance,
-
- show: true,
- formatter: [
- 'Label Text',
- ].join('\n'),
- backgroundColor: '#eee',
- borderColor: '#555',
- borderWidth: 2,
- borderRadius: 5,
- padding: 10,
- fontSize: 18,
- shadowBlur: 3,
- shadowColor: '#888',
- shadowOffsetX: 0,
- shadowOffsetY: 3,
- textBorderColor: '#000',
- textBorderWidth: 3,
- color: '#fff'
- }
+ position: app.config.position,
+ align: app.config.align,
+ verticalAlign: app.config.verticalAlign,
+ distance: app.config.distance,
+ show: true,
+ formatter: [
+ 'Label Text',
+ ].join('\n'),
+ width: 200,
+ height: 60,
+ backgroundColor: 'rgba(0, 255, 255, 0.3)',
+ borderColor: '#555',
+ borderWidth: 2,
+ borderRadius: 5,
+ padding: 10,
+ fontSize: 18,
+ shadowBlur: 3,
+ shadowColor: '#888',
+ shadowOffsetX: 0,
+ shadowOffsetY: 3,
+ textBorderColor: '#000',
+ textBorderWidth: 3,
+ color: '#fff'
}
}
],
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org