You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2021/09/01 20:46:53 UTC
[GitHub] [echarts] ataft opened a new issue #15654: Prevent overlapping elements
ataft opened a new issue #15654:
URL: https://github.com/apache/echarts/issues/15654
### Version
5.2.0
### Reproduction link
[https://codepen.io/ataft/pen/dyWxpyG](https://codepen.io/ataft/pen/dyWxpyG)
### Steps to reproduce
There are many open issues where various elements are overlapping with each other. Axis names overlap with axis labels, the legend and grid overlap, axis labels are cut, timeline overlaps with axis, etc. This makes it very difficult to manually set grid top/bottom/left/right, axis nameGap, legend location, top/bottom/left/right for non-grid series (e.g. pie), and impossible for parallel series that don't have top/bottom/left/right settings.
Here are some of the open issues that highlight the problem:
Axis names overlap with axis labels
https://github.com/apache/echarts/issues/9265
https://github.com/apache/echarts/issues/14996
Legend and Grid overlap
https://github.com/apache/echarts/issues/14252
https://github.com/apache/echarts/issues/14724
Axis Labels cut off
https://github.com/apache/echarts/issues/15562
### What is expected?
Elements are sized appropriately based on positions
### What is actually happening?
Elements overlap
<!-- This issue is generated by echarts-issue-helper. DO NOT REMOVE -->
<!-- This issue is in English. DO NOT REMOVE -->
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] echarts-bot[bot] commented on issue #15654: Prevent overlapping elements
Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on issue #15654:
URL: https://github.com/apache/echarts/issues/15654#issuecomment-910732594
Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.
In the meanwhile, please make sure that it contains **a minimum reproducible demo** and necessary **images** to illustrate. Otherwise, our committers will ask you to do so.
*A minimum reproducible demo* should contain as little data and components as possible but can still illustrate your problem. This is the best way for us to reproduce it and solve the problem faster.
You may also check out the [API](http://echarts.apache.org/api.html) and [chart option](http://echarts.apache.org/option.html) to get the answer.
If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical question.
If you are interested in the project, you may also subscribe to our [mailing list](https://echarts.apache.org/en/maillist.html).
Have a nice day! 🍵
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] pissang commented on issue #15654: Prevent overlapping elements
Posted by GitBox <gi...@apache.org>.
pissang commented on issue #15654:
URL: https://github.com/apache/echarts/issues/15654#issuecomment-913353656
https://github.com/apache/echarts/pull/15510 is working on the label auto layout on chart like scatter.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] eeeqxxtg commented on issue #15654: Prevent overlapping elements
Posted by GitBox <gi...@apache.org>.
eeeqxxtg commented on issue #15654:
URL: https://github.com/apache/echarts/issues/15654#issuecomment-911519853
scatter data label
```html
<div id="container" style="width: 640px; height: 400px"></div>
```
```js
option = {
tooltip: {
trigger: 'item',
borderWidth: 0
},
legend: { show: true, bottom: 0, itemHeight: 8, itemWidth: 8 },
grid: { left: 16, right: 32, top: 32, bottom: 32, containLabel: true },
yAxis: {
type: 'value',
axisLine: { show: true, onZero: false },
splitLine: { show: false },
axisTick: { show: true }
},
xAxis: {
type: 'value',
axisLine: { onZero: false },
splitLine: { show: false },
axisTick: { show: true }
},
series: [
{
type: 'scatter',
name: '2021-06-15',
symbolSize: 8,
data: [
{
value: [0.41, 0.49],
name: '林业'
},
{
value: [0.97, 0.96],
name: '农产品加工'
},
{
value: [0.66, 0.69],
name: '农业综合'
},
{
value: [0.39, 0.55],
name: '饲料'
},
{
value: [0.31, 0.18],
name: '渔业'
},
{
value: [0.67, 0.69],
name: '种植业'
},
{
value: [0.92, 0.96],
name: '畜禽养殖'
},
{
value: [0.33, 0.44],
name: '动物保健'
}
],
label: {
position: 'right',
show: true,
formatter: params => params.name
},
labelLayout: { hideOverlap: true, dy: 10 }
}
]
};
```
codepen: https://codepen.io/eeeqxxtg/pen/WNOxbEm
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] Houstoten commented on issue #15654: Prevent overlapping elements
Posted by GitBox <gi...@apache.org>.
Houstoten commented on issue #15654:
URL: https://github.com/apache/echarts/issues/15654#issuecomment-934307130
Hi guys! Diving deep into legend & grid overlapping issue got this finally working.
This approach is not much tested and should have a lot of pitfalls. The solution I found is based on linear relationship of legend and Grid area (I found it some confusing).
Works for legend at the bottom of grid. Not tested for other layouts. Here `awesomeID` is a legend id.
const legendY = echartsInstance._componentsMap["_ec_awesomeID_legend.plain"].group.y;
const gridHeight = echartsInstance._coordSysMgr._coordinateSystems[0]._rect.height;
const gridY = echartsInstance._coordSysMgr._coordinateSystems[0]._rect.y;
const gridVerticalOffset = gridHeight - gridY - (legendY - SOMECONSTANTVALUE);
setOption({
grid: {
bottom: gridVerticalOffset
}
});
Don't know why, but `SOMECONSTANTVALUE = 80` works great for me with any chart width and any level of legend overlapping.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] Jagan-P commented on issue #15654: Prevent overlapping elements
Posted by GitBox <gi...@apache.org>.
Jagan-P commented on issue #15654:
URL: https://github.com/apache/echarts/issues/15654#issuecomment-923980180
**_What is expected?
Elements are sized appropriately based on positions_**
We shouldn't expect this to happen all the times.
**In my case, even when there is enough space there is overlapping. See below**
When there is enough space, they should be autopositioned like HTML elements in html page. (when you add two span tags in html they will appear next to each other, when you add two paragraph tags they appear one below other, block and inline).
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] pissang edited a comment on issue #15654: Prevent overlapping elements
Posted by GitBox <gi...@apache.org>.
pissang edited a comment on issue #15654:
URL: https://github.com/apache/echarts/issues/15654#issuecomment-913353656
It's a very general topic that we keep working on for years. Currently, https://github.com/apache/echarts/pull/15510 is working on the label auto layout on the charts like scatter. And components overlap is in our plan, we are still finding out a solution that is good enough for echarts.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org