[GitHub] [incubator-echarts] ccloli commented on issue #8275: 4.x设置legend的宽度和高度不生效

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

ccloli commented on issue #8275: 4.x设置legend的宽度和高度不生效
URL: https://github.com/apache/incubator-echarts/issues/8275#issuecomment-543112646
 
 
   在另一个 issue https://github.com/apache/incubator-echarts/issues/4200#issuecomment-252568649 里有人从源码里找到原因了：
   
   > \- - 仔细看源码发现问题了， 是 `orient="horizontal"` 的时候，只有width会起作用，height为auto；`orient="vertical"` 的时候只有height会起作用，width为auto。
   
   参考 SegmentFault 上的 [一个回答](https://segmentfault.com/q/1010000016220918/a-1020000016222256)，可以使用 `rich` + `textStyle` 强行实现固定宽度，不过目前还没试出来百分比宽度 = =
   
   ```js
   {
       legend: [{
           type: 'scroll',
           orient: 'vertical',
           left: '60%',
           right: 0,
           // width: '40%',
           top: 0,
           bottom: 0,
           pageIconSize: 10,
           pageButtonGap: 0,
           icon: 'circle',
           formatter: '{a|{name}}', // 按照文档的说法 `rich` 参数只有指定了 `formatter` 后才有效
           textStyle: {
               rich: {
                   a: {
                       width: 100
                   }
               }
           },
           tooltip: {
               show: true,
               textStyle: {
                   fontSize: 12
               }
           },
       }],
   }
   ```
   
   如果需要强行设置百分比宽度的话，一种很绕的方法就是手动计算，得到像素宽度 = =
   
   下面是自己的实现代码片段，支持图表的 resize 更新。虽然代码是 React Hooks 的实现，不过思路应该是能看得出来的，监听 `window` 的 `resize` 事件，然后通过获取 ECharts 容器 DOM 的 `offsetWidth` 乘以比例，得到实际的像素宽度，最后调用 ECharts 实例的 `setOptions()` 方法更新。
   
   ```jsx
   const option = useRef();
   const ref = useRef();
   
   const getTextWidth = (size, defaultSize = 100) => {
       let textWidth = defaultSize;
       if (ref.current && ref.current.echartsElement) {
           textWidth = size * ref.current.echartsElement.offsetWidth;
       }
       return textWidth;
   };
   
   const formatOptions = () => {
       option.current = {
           legend: [{
               formatter: '{a|{name}}',
               textStyle: {
                   rich: {
                       a: {
                           width: getTextWidth(0.4)
                       }
                   }
               },
               // 省略多余参数
           }],
       };
   };
   
   useEffect(() => {
       const chart = ref.current;
       if (!chart) {
           return undefined;
       }
   
       const instance = chart.getEchartsInstance();
       const resizeChartLegend = () => {
           instance.setOption({
               legend: [{
                   textStyle: {
                       rich: {
                           a: {
                               width: getTextWidth(0.4)
                           }
                       }
                   }
               }]
           });
       };
       window.addEventListener('resize', resizeChartLegend);
       return () => {
           window.removeEventListener('resize', resizeChartLegend);
       };
   }, [ref.current]);
   
   useEffect(() => formatOptions(), [data]);
   
   return (
       <ReactEcharts option={option.current} ref={ref} style={{ height: '220px' }} />
   );
   ```

----------------------------------------------------------------
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.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

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