Conversation
|
Thanks @susiwen8 . Can you provide a test case? |
|
@pissang I will add it this weekend |
|
Test case has added. |
src/chart/line/LineView.js
Outdated
| var color = visualColor; | ||
| data.each(function (idx) { | ||
| visualColor = color(seriesModel.getDataParams(idx)); | ||
| }); |
There was a problem hiding this comment.
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.
| if (typeof visualColor === 'function') { | ||
| visualColor = visualColor(seriesModel.getDataParams(0)) || '#000000'; | ||
| } | ||
|
|
There was a problem hiding this comment.
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.
…is a callback. And enhance the test case for itemStyle.color and lineStyle.color for `line series`. Enhance #11485.
…is a callback. And enhance the test case for itemStyle.color and lineStyle.color for `line series`. Enhance #11485.
Close #10910