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 2019/10/31 14:59:45 UTC

[GitHub] [incubator-echarts] caoyukun0430 opened a new issue #11540: Request for graph link label rotation

caoyukun0430 opened a new issue #11540: Request for graph link label rotation
URL: https://github.com/apache/incubator-echarts/issues/11540
 
 
   ### What problem does this feature solve?
   I work to generate business process visualization with Echats graph. And I have frequency information showed on link labels. 
   
   But for now the label direction is automatically tangent aligned with the link itself. Since no rotate function is implemented inside graph.links.label. https://echarts.apache.org/en/option.html#series-graph.links
   
   And I met the problem that when lots of links intersect with each other, the label will be messed up due to the automatic direction. 
   The problem shows like below:
   ![edge_intersec](https://user-images.githubusercontent.com/46762174/67958347-569af300-fbf7-11e9-9c15-37da4cb9ae59.png)
   
   Therefore, I want to fix the link label direction to be horizontal for all edges
   
   ### What does the proposed API look like?
   I want to have first that we can set the link label direction fixed for all edges, e.g. horizontal or vertical.
   
   Otherwise, at least the rotation option should be available inside graph.links.label, similar to graph.nodes.label
   ```javascript
   options = {
     animationDurationUpdate: 150,
     animationEasingUpdate: 'quinticInOut',
     series: [{
       type: 'graph',
       layout: 'none',
       edgeSymbol: ['none', 'arrow'],
       edges: graphdata.edges.map(function(edge) {
         return {
           source: edge['start_node_id'],
           target: edge['end_node_id'],
           name: edge['label'],
           lineStyle: {
             normal: {
               width: edge['width']
             }
           },
           label: {
           // proposed change here another option is  
           // direction: 'horizontal',
           rotate:90, 
             show: true,
           }
         };
       }),
       label: {
         emphasis: {
           position: 'top',
           show: true,
         }
       },
       roam: true,
       focusNodeAdjacency: true,
     }]
   };
   ```
   
   <!-- This issue is generated by echarts-issue-helper. 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.
 
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