Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(polar) about ISSUE 11452 #11557

Merged
merged 3 commits into from
Nov 21, 2019
Merged

feat(polar) about ISSUE 11452 #11557

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d7e8f52
feat(polar) about ISSUE 11452
foolzhang Nov 5, 2019
89961d1
optimize attrs
foolzhang Nov 6, 2019
0fc6c8d
switch special value
foolzhang Nov 21, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions src/chart/bar/BarView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -415,6 +415,7 @@ function updateStyle(
) {
var color = data.getItemVisual(dataIndex, 'color');
var opacity = data.getItemVisual(dataIndex, 'opacity');
var stroke = data.getVisual('borderColor');
var itemStyleModel = itemModel.getModel('itemStyle');
var hoverStyle = itemModel.getModel('emphasis.itemStyle').getBarItemStyle();

Expand All @@ -424,7 +425,8 @@ function updateStyle(

el.useStyle(zrUtil.defaults(
{
fill: color,
stroke: layout.startAngle === layout.endAngle ? 'none' : stroke,
fill: layout.startAngle === layout.endAngle ? 'none' : color,
opacity: opacity
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

image

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

Copy link
Contributor Author

@foolzhang foolzhang Nov 12, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is any one here?

Copy link
Contributor

@pissang pissang Nov 18, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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)

Copy link
Contributor Author

@foolzhang foolzhang Nov 21, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should always update all to avoid the status leaking from previous update.

reasonable

},
itemStyleModel.getBarItemStyle()
Expand All @@ -443,7 +445,9 @@ function updateStyle(
seriesModel, dataIndex, labelPositionOutside
);
}

if (layout.startAngle === layout.endAngle) {
hoverStyle.fill = hoverStyle.stroke = 'none';
}
graphic.setHoverStyle(el, hoverStyle);
}

Expand Down
1 change: 0 additions & 1 deletion src/chart/gauge/GaugeSeries.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@

import createListSimply from '../helper/createListSimply';
import SeriesModel from '../../model/Series';
import * as zrUtil from 'zrender/src/core/util';

var GaugeSeries = SeriesModel.extend({

Expand Down
2 changes: 1 addition & 1 deletion src/coord/polar/polarCreator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ function resizePolar(polar, polarModel, api) {

var radius = polarModel.get('radius');
if (radius == null) {
radius = [0, "100%"];
radius = [0, '100%'];
}
else if (!zrUtil.isArray(radius)) {
// r0 = 0
Expand Down
92 changes: 91 additions & 1 deletion test/polar-rounded.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@

<div id="main4"></div>

<div id="main5"></div>



Expand Down Expand Up @@ -186,14 +187,19 @@
},
series: [{
type: 'bar',
data: [1],
data: [0],
coordinateSystem: 'polar',
name: 'A',
roundCap: true,
color: 'rgba(200, 0, 0, 0.5)',
itemStyle: {
borderColor: 'red',
borderWidth: 1
},emphasis:{
itemStyle:{
color:'red',
borderColor:'blue'
}
}
}],
legend: {
Expand Down Expand Up @@ -282,5 +288,89 @@
});
</script>


<script>
require(['echarts'], function (echarts) {
let hoverColors = [
'255,0,0',
'0,128,0',
'0,0,255',
];
let hoverIndex = 0;

let getOptions = function(hoverIndex){
return {
angleAxis: {
max: 5
},
radiusAxis: {
type: 'category',
data: ['a'],
z: 10
},
polar: {
radius: ['20%', '60%']
},
series: [{
type: 'bar',
data: [4],
coordinateSystem: 'polar',
name: 'A',
roundCap: true,
animationDuration:5 * 1000,
color: `rgba(${hoverColors[hoverIndex]},0.5)`,
itemStyle: {
borderColor: `rgb(${hoverColors[hoverIndex]})`,
borderWidth: 0
},
emphasis: {
itemStyle: {
color: `rgb(${hoverColors[hoverIndex]})`,
borderColor: `rgb(${hoverColors[hoverIndex]})`
}
}
}],
legend: {
show: true,
data: ['A']
},
tooltip: {
show: true
}
};
}

var chart = testHelper.create(echarts, 'main5', {
title: [
'Polar radius and value [0,\'-\',\'rational num\'] test',
'Click button to change hoverStyle and data value',
],
option: getOptions(hoverIndex),
buttons: [{
text: 'Change data',
onclick: function () {
++hoverIndex > 2 && (hoverIndex=0)
let option = chart.getOption();

if (option.series[0].data[0] == 0) {
option.series[0].data[0] = 4;
} else if (option.series[0].data[0] == 4) {
option.series[0].data[0] = '-';
} else if (option.series[0].data[0] = '-') {
option.series[0].data[0] = 0;
}

option.series[0].color = `rgba(${hoverColors[hoverIndex]},0.5)`;
option.series[0].emphasis.itemStyle = {
color:`rgb(${hoverColors[hoverIndex]})`,
borderColor:`rgb(${hoverColors[hoverIndex]})`
};
chart.setOption(option);
}
}]
});
});
</script>

</body>
</html>