feat(polar) about ISSUE 11452 #11557
Conversation
src/chart/bar/BarView.js
Outdated
| @@ -424,8 +424,8 @@ function updateStyle( | |||
|
|
|||
| el.useStyle(zrUtil.defaults( | |||
| { | |||
| fill: color, | |||
| opacity: opacity | |||
| fill: layout.startAngle === layout.endAngle ? 'transparent' : color, | |||
There was a problem hiding this comment.
fill and stroke can be set to 'none' if don't want to display it
src/chart/bar/BarView.js
Outdated
| fill: color, | ||
| opacity: opacity | ||
| fill: layout.startAngle === layout.endAngle ? 'transparent' : color, | ||
| opacity: layout.startAngle === layout.endAngle ? 0 : opacity |
There was a problem hiding this comment.
I think there is no need to set opacity to 0 if fill and stroke are both set to 'none'
There was a problem hiding this comment.
fill : transparent , opacity: 0 , tooltip can be show if set, i just feel it better.
Is that right？ @Ovilia
There was a problem hiding this comment.
I'm not sure if it's a good user experience if cursor becomes to poiner and tooltips shows on a blank area. Perhaps users will think is it a bug that there should be something under the mouse but instead it's blank ?
There was a problem hiding this comment.
ACK, i commit again
There was a problem hiding this comment.
And silent property of the el should be set to true in case it displays again with emphasis style when user is hovering on the area.
| opacity: layout.startAngle === layout.endAngle ? 0 : opacity | ||
| stroke : layout.startAngle === layout.endAngle ? 'none' : stroke, | ||
| fill: layout.startAngle === layout.endAngle ? 'none' : color, | ||
| opacity: opacity |
There was a problem hiding this comment.
silent property of the el should be set to true in case it displays again with emphasis style when user is hovering on the area.
Sorry, I was wrong about this. silent property is not needed.
But the style of still needs to be eliminated. If I modify the test case and added emphasis style.
series: [{
type: 'bar',
data: [0],
coordinateSystem: 'polar',
name: 'A',
roundCap: true,
color: 'rgba(200, 0, 0, 0.5)',
itemStyle: {
borderColor: 'red',
borderWidth: 1
},
emphasis: {
itemStyle: {
borderColor: 'blue',
color: 'red',
opacity: 1
}
}
}]The circle will appear when hovering on the legend.
I think we should also set fill and stroke to 'none' of hoverStyle in the code https://github.com/apache/incubator-echarts/blob/master/src/chart/bar/BarView.js#L419
There was a problem hiding this comment.
sorry about not consider emphasis and last week I'm confused by what you say about "silent". lastweek i have tryed this
if(layout.startAngle != layout.endAngle){
graphic.setHoverStyle(el, hoverStyle);
}it seems ok
There was a problem hiding this comment.
Hi @foolzhang Sorry for missing this.
Just ignore the silent suggestion. I've made a mistake. It is for disabling the interaction ability of element.
About
if(layout.startAngle != layout.endAngle){
graphic.setHoverStyle(el, hoverStyle);
}It will cause the hoverStyle not change when the data is changed from a none zero value to zero.
We should always update all to avoid the status leaking from previous update.
if(layout.startAngle === layout.endAngle) {
hoverStyle.fill = hoverStyle.stroke = 'none';
}
graphic.setHoverStyle(el, hoverStyle)There was a problem hiding this comment.
We should always update all to avoid the status leaking from previous update.
reasonable
|
I found an issue after merged this pull request. layout.startAngle === layout.endAngleThis is only available for the bar on polar. But there is no validation here and it brokes the bar on normal cartesian coordinate system. I will make another pull request to fix this issue. |
fix(bar): fix bar won't display on cartesian caused by #11557
No description provided.