You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by "nieyuan1980 (via GitHub)" <gi...@apache.org> on 2023/05/22 07:35:18 UTC

[GitHub] [echarts] nieyuan1980 opened a new issue, #18648: How to set the radians of the four corners of the echarts background?

nieyuan1980 opened a new issue, #18648:
URL: https://github.com/apache/echarts/issues/18648

   ### Version
   
   echarts.5.4.2
   
   ### Link to Minimal Reproduction
   
   null
   
   ### Steps to Reproduce
   
   option = {
     backgroundColor :'#999',
     borderRadius: [20, 20, 20, 20],
     xAxis: {
       type: 'category',
       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
     },
     yAxis: {
       type: 'value'
     },
     series: [
       {
         data: [120, 200, 150, 80, 70, 110, 130],
         type: 'bar'
       }
     ]
   };
   
   ### Current Behavior
   
   I tried using three methods.
   **1. Added option attribute: borderRadius: [20, 20, 20, 20], (this is the answer from chatgpt)**
   
   ```
   option = {
     backgroundColor :'#999',
     **borderRadius: [20, 20, 20, 20],**
     xAxis: {
       type: 'category',
       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
     },
     yAxis: {
       type: 'value'
     },
     series: [
       {
         data: [120, 200, 150, 80, 70, 110, 130],
         type: 'bar'
       }
     ]
   };
   ```
   
   **2. Set the radian of the echarts container itself.**
   ``` 
   <div ref="EnergyCalendar" style="border-radius: 20px;height: 320px; width: 100%;">
   </div>
   ```
   
   **3. Wrap the div outside the echarts container and set the radian of the div.**
   ```
   <div style="border-radius: 20px;">
     <div ref="EnergyCalendar" style="height: 320px; width: 100%;">
     </div>
   </div>
   ```
   But none of these three methods are effective.
   
   ### Expected Behavior
   
   I expect the four corners of the echarts background to have a certain degree of curvature
   
   ### Environment
   
   ```markdown
   - OS:
   - Browser:
   - Framework:
   ```
   
   
   ### Any additional comments?
   
   _No response_


-- 
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.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] plainheart commented on issue #18648: How to set the radians of the four corners of the echarts background?

Posted by "plainheart (via GitHub)" <gi...@apache.org>.
plainheart commented on issue #18648:
URL: https://github.com/apache/echarts/issues/18648#issuecomment-1556838221

   Just set `border-radius` for the chart container element. Refer to this [demo](https://codepen.io/plainheart/pen/YzJdrVR).


-- 
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] nieyuan1980 closed issue #18648: How to set the radians of the four corners of the echarts background?

Posted by "nieyuan1980 (via GitHub)" <gi...@apache.org>.
nieyuan1980 closed issue #18648: How to set the radians of the four corners of the echarts background?
URL: https://github.com/apache/echarts/issues/18648


-- 
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] nieyuan1980 commented on issue #18648: How to set the radians of the four corners of the echarts background?

Posted by "nieyuan1980 (via GitHub)" <gi...@apache.org>.
nieyuan1980 commented on issue #18648:
URL: https://github.com/apache/echarts/issues/18648#issuecomment-1558315431

   Thank you very much for your answer. After comparison, I found that there is a missing CSS attribute: overflow: hidden.
   The correct method is:
   #chart-container { 
     overflow: hidden; 
     height: 320px; 
     width: 100%; 
     border-radius: 10px; 
   }


-- 
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