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 2022/01/11 13:03:11 UTC
[GitHub] [echarts] j-zielinski opened a new issue #16361: [Bug] using media rules for yAxis.axisLabel.width doesn't update chart
j-zielinski opened a new issue #16361:
URL: https://github.com/apache/echarts/issues/16361
### Version
5.2.2
### Link to Minimal Reproduction
https://typescript-nkl1sx.stackblitz.io/
### Steps to Reproduce
- Go to https://typescript-nkl1sx.stackblitz.io/
- Resize window (width)
Media code:
```typescript
{
media: [
{
query: {
minWidth: 0,
minHeight: null,
maxWidth: 300,
maxHeight: null,
},
option: {
yAxis: {
axisLabel: {
width: 75,
},
},
},
},
{
query: {
minWidth: 300,
minHeight: null,
maxWidth: 500,
maxHeight: null,
},
option: {
yAxis: {
axisLabel: {
width: 125,
},
},
},
},
{
query: {
minWidth: 500,
minHeight: null,
maxWidth: null,
maxHeight: null,
},
option: {
yAxis: {
axisLabel: {
width: 175,
},
},
},
},
]
}
```
### Current Behavior
Setting yAxis.label.width with media rules doesn't update chart
### Expected Behavior
yAxis label width can be adjusted using media rules
### Environment
```markdown
- OS:
- Browser:
- Framework:
```
### Any additional comments?
Code (Typescript):
```typescript
import { init } from 'echarts';
const element = document.createElement('div');
const canvas = document.createElement('canvas');
canvas.style.width = '100%';
canvas.style.height = '100%';
element.appendChild(canvas);
element.style.width = '100%';
element.style.height = '200px';
document.body.appendChild(element);
const options = {
xAxis: {
axisLabel: {
lineHeight: 14,
},
minInterval: 1,
boundaryGap: [0, '5%'],
type: 'value',
rich: {},
},
yAxis: {
boundaryGap: ['0%', '1%'],
zlevel: 1,
type: 'category',
inverse: true,
axisLabel: {
show: true,
width: 100,
overflow: 'truncate',
},
},
dataset: {
dimensions: [
{
name: 'A',
id: 'a',
},
{
name: 'A',
id: 'b',
},
],
source: [
['Class aptent taciti sociosqu ad litora', 2],
['Sed eleifend enim sed dolor accumsan', 1],
],
},
series: [
{
id: 'count',
name: 'A',
type: 'bar',
seriesLayoutBy: 'column',
stack: null,
label: {
silent: true,
padding: 0,
margin: 0,
show: true,
position: 'right',
},
},
],
media: [
{
query: {
minWidth: 0,
minHeight: null,
maxWidth: 300,
maxHeight: null,
},
option: {
yAxis: {
axisLabel: {
width: 75,
},
},
},
},
{
query: {
minWidth: 300,
minHeight: null,
maxWidth: 500,
maxHeight: null,
},
option: {
yAxis: {
axisLabel: {
width: 125,
},
},
},
},
{
query: {
minWidth: 500,
minHeight: null,
maxWidth: null,
maxHeight: null,
},
option: {
yAxis: {
axisLabel: {
width: 175,
},
},
},
},
],
grid: {
top: 20,
right: 60,
left: 120,
bottom: 60,
show: false,
containLabel: false,
}
};
const chart = init(element);
chart.setOption(options);
const observer = new ResizeObserver((entries) => chart.resize());
observer.observe(element);
```
--
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] j-zielinski closed issue #16361: [Bug] using media rules for yAxis.axisLabel.width doesn't update chart
Posted by GitBox <gi...@apache.org>.
j-zielinski closed issue #16361:
URL: https://github.com/apache/echarts/issues/16361
--
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] Ovilia commented on issue #16361: [Bug] using media rules for yAxis.axisLabel.width doesn't update chart
Posted by GitBox <gi...@apache.org>.
Ovilia commented on issue #16361:
URL: https://github.com/apache/echarts/issues/16361#issuecomment-1010612031
This doesn't seem to be a bug. The correct way to write this is:
```ts
option = {
media: [
{
query: {
maxWidth: 300
},
option: {
yAxis: {
axisLabel: {
color: 'red',
width: 50
}
}
}
},
{
option: {
yAxis: {
axisLabel: {
color: 'blue',
show: true,
width: 100,
overflow: 'truncate'
}
}
}
}
],
baseOption: {
xAxis: {
axisLabel: {
lineHeight: 14
},
minInterval: 1,
boundaryGap: [0, '5%'],
type: 'value',
rich: {}
},
yAxis: {
boundaryGap: ['0%', '1%'],
zlevel: 1,
type: 'category',
inverse: true
},
dataset: {
dimensions: [
{
name: 'A',
id: 'a'
},
{
name: 'A',
id: 'b'
}
],
source: [
['Class aptent taciti sociosqu ad litora', 2],
['Sed eleifend enim sed dolor accumsan', 1]
]
},
series: [
{
id: 'count',
name: 'A',
type: 'bar',
seriesLayoutBy: 'column',
stack: null,
label: {
silent: true,
padding: 0,
margin: 0,
show: true,
position: 'right'
}
}
],
grid: {
top: 20,
right: 60,
left: 120,
bottom: 60,
show: false,
containLabel: false
}
}
};
```
--
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