Skip to content

Fix #10910#11485

Merged
pissang merged 4 commits intoapache:masterfrom
susiwen8:#10910
Nov 6, 2019
Merged

Fix #10910#11485
pissang merged 4 commits intoapache:masterfrom
susiwen8:#10910

Conversation

@susiwen8
Copy link
Copy Markdown
Contributor

Close #10910

@pissang
Copy link
Copy Markdown
Contributor

pissang commented Oct 25, 2019

Thanks @susiwen8 . Can you provide a test case?

@susiwen8
Copy link
Copy Markdown
Contributor Author

@pissang I will add it this weekend

@susiwen8
Copy link
Copy Markdown
Contributor Author

Test case has added.

var color = visualColor;
data.each(function (idx) {
visualColor = color(seriesModel.getDataParams(idx));
});
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

We don't have to iterate all the data to get a color here.

I think there are two solutions:

  • use the first or last data for this callback and get one color value.
  • Or pick some of the data and get a gradient color.

From my perspective, gradient color is better, but the main concern is SVG or Canvas may have an issue with too many color stops on the gradient. About this, perhaps we can pick at most 10 of the data to get the gradient.

BTW: Personally I prefer using colorCallback over color on the variable name because it's more specific.

@pissang pissang added this to the 4.6.0 milestone Oct 28, 2019
@pissang pissang merged commit fbbbbd3 into apache:master Nov 6, 2019
@susiwen8 susiwen8 deleted the #10910 branch November 6, 2019 05:41
if (typeof visualColor === 'function') {
visualColor = visualColor(seriesModel.getDataParams(0)) || '#000000';
}

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Use seriesModel.getDataParams(0) will cause that line color will be changed when using dataZoom.
Check this example please:

            colors = ['red', 'blue', 'yellow', 'green'];
            option = {
                xAxis: {},
                yAxis: {},
                dataZoom: {},
                series: {
                    type: 'line',
                    itemStyle: {
                        color: function (params) {
                            return colors[params.dataIndex];
                        }
                    },
                    data: [[11, 22], [33, 44], [22, 33]]
                }
            };

I suggest that if the itemStyle.color is a function, we use the default color for line.
If line needs be colored, use lineStyle.color in this case.
By convention, the data.getVisual('color') should not be a function in the view stage.
The function should be processed in the visual stage.
I thinks we probably change the code here:
https://github.com/apache/incubator-echarts/blob/0ebdeaf42d8a8e3830c160fa9cd27bcc434ce502/src/visual/seriesColor.js#L35

If the color is a function, we still use the palette color. @pissang
Or, to avoid some potential issue, save the original palette in another filed and use it in LineView.

100pah added a commit that referenced this pull request Nov 11, 2019
…is a callback. And enhance the test case for itemStyle.color and lineStyle.color for `line series`. Enhance #11485.
@100pah 100pah mentioned this pull request Nov 11, 2019
100pah added a commit that referenced this pull request Nov 12, 2019
…is a callback. And enhance the test case for itemStyle.color and lineStyle.color for `line series`. Enhance #11485.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

itemStyle中color使用回调函数时,线条颜色不发生变化,只有节点颜色发生变化

4 participants