[GitHub] guylando opened a new issue #9118: vertical legend:scroll doesn't respect legend width and overflows horizontally

[GitBox <gi...@apache.org>]

guylando opened a new issue #9118: vertical legend:scroll doesn't respect legend width and overflows horizontally
URL: https://github.com/apache/incubator-echarts/issues/9118
 
 
   Code to reproduce:
   pase this code here https://ecomfe.github.io/echarts-examples/public/editor.html?c=pie-doughnut&theme=light
   
   `
   app.title = '环形图';
   values = [
       { name: '1st', value: 90 },
       { name: '2st', value: 90 },
       { name: '3st', value: 90 },
       { name: '4st', value: 90 },
       { name: '5st', value: 90 },
       { name: '6st', value: 90 },
       { name: '7st', value: 90 },
       { name: '8st', value: 90 },
       { name: '9st', value: 90 },
       ];
   option = {
           cursor: "default",
           /* https://ecomfe.github.io/echarts-doc/public/en/option.html#legend */
           legend: {
               height:280,
               width: 500,
               type: 'scroll',
               orient: 'vertical',
               x: 'left',
               y: 'center',
               itemWidth: 8,
               itemHeight: 8,
               itemGap: 24,
               data: values.map(function (element) { return { name: element.name, icon: "circle" }; }),
               formatter(name) { return `{name|${name}}{value|$${values.filter(function (element) { return element.name === name; })[0].value}}`; },
               textStyle: {
                   width: 65,
                   /* https://ecomfe.github.io/echarts-doc/public/en/option.html#legend.textStyle.rich */
                   rich: {
                       name: {
                           color: '#86919A',
                           align: 'left',
                       },
                       value: {
                           color: '#EFC044',
                           align: 'right',
                       },
                   },
               },
           },
           series: [
               {
                   /* https://ecomfe.github.io/echarts-doc/public/en/option.html#series-pie */
                   type: 'pie',
                   radius: ['80%', '85%'],
                   hoverOffset: 5,
                   center: ['50%', '50%'],
                   data: values.sort(function (a, b) { return a.value - b.value; }),
                   label: {
                       normal: {
                           show: false,
                           position: 'center',
                       },
                   },
                   labelLine: {
                       normal: {
                           show: false,
                       },
                   },
                   itemStyle: {
                       normal: {
                           shadowBlur: 10,
                           shadowOffsetX: 0,
                           shadowColor: 'rgba(0, 0, 0, 0.5)',
                       },
                   },
                   animationType: 'scale',
                   animationEasing: 'elasticOut',
                   animationDelay() {
                       return 200;
                   },
               },
           ],
   };
   
   `
   
   if you remove height:280 you will see the overflow fixed

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@echarts.apache.org
For additional commands, e-mail: dev-help@echarts.apache.org