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/05 12:58:05 UTC
[GitHub] [echarts] lieyongchang opened a new issue #15678: echart and material-ui card: resposive width and height
lieyongchang opened a new issue #15678:
URL: https://github.com/apache/echarts/issues/15678
### Version
5.2.0
### Reproduction link
[https://codesandbox.io/s/react-grid-layout-with-resizable-forked-dq2co?file=/src/newvsreturnvisitors.js](https://codesandbox.io/s/react-grid-layout-with-resizable-forked-dq2co?file=/src/newvsreturnvisitors.js)
### Steps to reproduce
open console, in codesandbox and the error message is there
### What is expected?
echart taking the width and height of parent component
### What is actually happening?
Can't get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be 0.For example, you may need to call this in the callback of window.onload.
in Newvsresturnvisitors (at card.js:34)
in SimpleCard (at src/index.js:50)
in App
<!-- 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] lieyongchang commented on issue #15678: echart and material-ui card: resposive width and height
Posted by GitBox <gi...@apache.org>.
lieyongchang commented on issue #15678:
URL: https://github.com/apache/echarts/issues/15678#issuecomment-914408106
but how do i capture when the card changes its width and height? how do I then use those values and set it as the chart own width and height ?
--
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] lieyongchang edited a comment on issue #15678: echart and material-ui card: resposive width and height
Posted by GitBox <gi...@apache.org>.
lieyongchang edited a comment on issue #15678:
URL: https://github.com/apache/echarts/issues/15678#issuecomment-914408106
but how do i capture when the card changes its width and height? how do I then use those values and set it as the chart own width and height ?
right now it looks like this when i resize the card
the chart is not responsive at all. what i am not sure is, how to pass the chartInstance i have created in my Newvsresturnvisitors class and pass it to my index class to call the resize method in the onLayoutChange which is trigger when the grid item is resize
```
const onLayoutChange = (layout) => {
console.log(layout);
// chartInstance.resize();
};
```
I call this method inside react grid layout
```
<ResponsiveGridLayout
layouts={layout}
onLayoutChange={() => onLayoutChange(layout)}
>
```
--
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 #15678: echart and material-ui card: resposive width and height
Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on issue #15678:
URL: https://github.com/apache/echarts/issues/15678#issuecomment-913150368
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] lieyongchang edited a comment on issue #15678: echart and material-ui card: resposive width and height
Posted by GitBox <gi...@apache.org>.
lieyongchang edited a comment on issue #15678:
URL: https://github.com/apache/echarts/issues/15678#issuecomment-914408106
but how do i capture when the card changes its width and height? how do I then use those values and set it as the chart own width and height ?
right now it looks like this when i resize the card
the chart is not responsive at all. what i am not sure is, how to pass the chantinstance i have create in my Newvsresturnvisitors class and pass it to my index class to call the resize method
```
const onLayoutChange = (layout) => {
console.log(layout);
// chartInstance.resize();
};
```
I call this method inside react grid layout
```
<ResponsiveGridLayout
layouts={layout}
onLayoutChange={() => onLayoutChange(layout)}
>
```
--
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] lieyongchang edited a comment on issue #15678: echart and material-ui card: resposive width and height
Posted by GitBox <gi...@apache.org>.
lieyongchang edited a comment on issue #15678:
URL: https://github.com/apache/echarts/issues/15678#issuecomment-913549821
I have give it a proper width and height
```
return (
<div
ref={chart}
style={{
width: "500px",
height: "300px",
background: "white"
}}
/>
);
```
but i want to update those values to that of the parent width and height. Thats the part I am having the issue. Any help is really appreciated
--
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] lieyongchang commented on issue #15678: echart and material-ui card: resposive width and height
Posted by GitBox <gi...@apache.org>.
lieyongchang commented on issue #15678:
URL: https://github.com/apache/echarts/issues/15678#issuecomment-913549821
I have give it a proper width and height
```
return (
<div
ref={chart}
style={{
width: "500px",
height: "300px",
background: "white"
}}
/>
);
```
but i want to update those values of the parent width and height. Thats the part I am having the issue?
--
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] lieyongchang edited a comment on issue #15678: echart and material-ui card: resposive width and height
Posted by GitBox <gi...@apache.org>.
lieyongchang edited a comment on issue #15678:
URL: https://github.com/apache/echarts/issues/15678#issuecomment-914408106
right now it looks like this when i resize the card
the chart is not responsive at all. what i am not sure is, how to pass the chartInstance i have created in my Newvsresturnvisitors class and pass it to my index class to call the resize method in the onLayoutChange which is trigger when the grid item is resize
```
const onLayoutChange = (layout) => {
console.log(layout);
// chartInstance.resize();
};
```
I call this method inside react grid layout
```
<ResponsiveGridLayout
layouts={layout}
onLayoutChange={() => onLayoutChange(layout)}
>
```
--
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] lieyongchang edited a comment on issue #15678: echart and material-ui card: resposive width and height
Posted by GitBox <gi...@apache.org>.
lieyongchang edited a comment on issue #15678:
URL: https://github.com/apache/echarts/issues/15678#issuecomment-914408106
but how do i capture when the card changes its width and height? how do I then use those values and set it as the chart own width and height ?
right now it looks like this when i resize the card
the chart is not responsive at all. What I have tried
I pass in the card dimension as props, but when do i know the card has change size and set my dimension accordingly?
```
const Newvsresturnvisitors = (props) =>
```
--
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 #15678: echart and material-ui card: resposive width and height
Posted by GitBox <gi...@apache.org>.
pissang commented on issue #15678:
URL: https://github.com/apache/echarts/issues/15678#issuecomment-913932891
You can specify the chart width and height explicitly:
```ts
echarts.init(dom, null, { width: 500, height: 300})
```
--
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 #15678: echart and material-ui card: resposive width and height
Posted by GitBox <gi...@apache.org>.
pissang commented on issue #15678:
URL: https://github.com/apache/echarts/issues/15678#issuecomment-913324341
I tried your demo
The `clientHeight` is `0`. Please make sure your DOM has proper `clientWidth` and `clientHeight` when initializing chart. If not. do `resize` when the DOM size is prepared.
--
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 closed issue #15678: echart and material-ui card: resposive width and height
Posted by GitBox <gi...@apache.org>.
pissang closed issue #15678:
URL: https://github.com/apache/echarts/issues/15678
--
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