warottop opened a new issue #13161:
URL: https://github.com/apache/incubator-echarts/issues/13161
### **What problem does this feature solve?**
```
var markLine = [];
var option = {
animation: false,
textStyle: {
fontSize: 14
},
xAxis: {
boundaryGap: true,
splitArea: {
show: true
},type:value,max:1.4
},
yAxis: {
max: 2
},
series: [{
name: 'line',
type: 'bar',
stack: 'all',
symbolSize: 6,
data: [[0.3,1.4], [1.2,1.0], [0.5,1.2], [0.8,1], [1,0.6]],
markLine: {
data: markLine,
symbol:['none','circle'],
symbolSize: 25
}
}],
grid: {
top: 20,
left: 60,
right: 60,
bottom: 40
}
};
markLine.push([{
coord : [0.1,0],
},{
coord : [0.3,1.6],
label:{formatter:'this label can go left or right',
distance:[400,20], //config left or right by changing first value (400)
position: 'end',
}
}]);
markLine.push([{
coord : [0.1,0],
},{
coord : [0.1,1.4],
label:{formatter:'this label cannot go left or right',
distance:[400,20], //config left or right by changing first value
position: 'end',
}
}]);
markLine.push([{
coord : [0.6,0],
},{
coord : [0.6,1.4],
label:{formatter:'my problem',
distance:[200,20],
position: 'end',
}
}]);
markLine.push([{
coord : [0.61,0],
},{
coord : [0.61,1.2],
label:{formatter:'my problem2',
distance:[200,20],
position: 'end',
}
}]);
markLine.push([{
coord : [0.8,0],
},{
coord : [0.8,1.4],
label:{formatter:' my current
solution',
distance:[200,-10],
position: 'end',
}
}]);
markLine.push([{
coord : [0.81,0],
},{
coord : [0.81,1.2],
label:{formatter:' my current
solution2',
distance:[200,-10],
position: 'end',
}
}]);
markLine.push([{
coord : [1.2,0],
},{
coord : [1.2,1.7],
label:{formatter:'this does not work (unrotated)',
distance:[-100,20],
position: 'insideEndBottom',
}
}]);
markLine.push([{
coord : [1.2,0],
},{
coord : [1.2,1.5],
label:{formatter:'this does not work2 (unrotated)',
distance:[-100,20],
position: 'insideEndTop',
}
}]);
```
I try this on https://echarts.apache.org/examples/en/editor.html. (copy and
paste should work)
I usually use bar a lot as histogram and using markline as to state
something out of graph from xaxis. Since using bar graph, Markline label should
be at the end of the line, and with something like 3-4 marklines , Overlapping
occurs.
However, with horizontal movement available when position : 'start' or
'end', I should be able to config it to not overlapping with others label or
with rotation (#13153 if it happens) this can be alleviated as well (using
position :'insideEndTop' or 'insideEndBottom' ,then rotate)
now my solution was to add blank space as labels to alleviates this issue
and move on with my work.
### **What does the proposed API look like?**
markline.label.distance as array is available for movement in the
perpendicular of the markline angle when position : 'start' or 'end' .
----------------------------------------------------------------
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:
us...@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org
