TypeError Failed to execute 'createLinearGradient' on 'CanvasRenderingContext2D': The provided double value is non-finite.

[Shu-Ji]

Version

5.0.2

Reproduction link

https://codesandbox.io/s/echart-areastyle-null-error-r37t0?file=/src/index.js

Steps to reproduce

面积图中有两条线：
由于需求要求同环比，就会存在：本周有数据，但是上周可能没数据的情况
即 series 中有一个线有数据，有一条线(上周)没有数据，全是 null
此时折线图是可以成功的，普通面积图也是成功的，但是面积图使用渐变色(color属性)后会报错：

经查验，只有当所有 value 都是非 number 时就会报错，只要其中有一个
value 是数字，那么就不会报错了

请参考复现链接：

series: [
        {
            name: '会员数-周同比',
            type: 'line',
            data: [
                // 由于需求要求同环比，就会存在，本周有数据
                // 但是上周没数据的情况
                // 即series 中有一个线有数据，有一条线(上周)没有数据，全是 null
                // 此时折线图是可以成功的，但是面积图使用渐变色(color属性)后会报错

                // 经查验，只有当所有 value 都是非 number 时就会报错，只要其中有一个
                // value 是数字，那么就不会报错了
                {
                    value: null
                },
                {
                    value: null
                }
            ],
            areaStyle: {
                // 把这个渐变的 color 属性注释掉就不报错了
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    index: 6,
                    colorStops: [
                        {
                            offset: 0,
                            color: 'rgba(235,83,46, 0.30)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(235,83,46, 0.05)'
                        }
                    ]
                }
            }
        }
    ]

因为这里 getBoundingRect 拿到了 min 和 max 是无穷，导致后面的计算都出错了：

min 和 max 的默认值是否应该取 data[0]，如果没有默认为 0 是否更好，现在默认是无穷，导致画图时候出错。如果默认为0，就不画图，也不会出错了。

What is expected?

面积图使用颜色渐变后，某个 serie 如果 value 中没有一个是数字，也不要报错。

What is actually happening?

面积图使用颜色渐变后，某个 serie 如果 value 中没有一个是数字，报错了。

[echarts-bot]

Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical question.

If you are interested in the project, you may also subscribe our mailing list.

Have a nice day! 🍵

[echarts-bot]

@Shu-Ji It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people, we'd like to suggest using English next time. 🤗

TRANSLATED

BODY

Version

5.0.2

Reproduction link

https://codesandbox.io/s/echart-areastyle-null-error-r37t0?file=/src/index.js

Steps to reproduce

There are two lines in the area chart:
Since the demand requirements are the same month-on-month, there will be a situation where there is data this week, but there may be no data last week
That is, one line in series has data, one line (last week) has no data, all are null
At this point, the line chart can be successful, and the ordinary area chart is also successful, but the area chart will report an error after using the gradient color (color attribute):

After inspection, an error will be reported only when all values ​​are non-number, as long as one of them
value is a number, then no error will be reported

Please refer to the recurring link:

series: [
        {
            name:'Number of members-weekly year-on-year',
            type:'line',
            data: [
                // Since the demand requirements are the same month-on-month, it will exist, and there is data this week
                // but no data last week
                // That is, one line in the series has data, and one line (last week) has no data, all are null
                // At this point, the line chart can be successful, but the area chart will report an error after using the gradient color (color attribute)

                // After inspection, an error will be reported only when all values ​​are non-number, as long as one of them
                // value is a number, then no error will be reported
                {
                    value: null
                },
                {
                    value: null
                }
            ],
            areaStyle: {
                // Comment out the color property of this gradient and no error will be reported
                color: {
                    type:'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    index: 6,
                    colorStops: [
                        {
                            offset: 0,
                            color:'rgba(235,83,46, 0.30)'
                        },
                        {
                            offset: 1,
                            color:'rgba(235,83,46, 0.05)'
                        }
                    ]
                }
            }
        }
    ]

Because here getBoundingRect got the min and max are infinite, resulting in errors in the subsequent calculations:

What is expected?

After the area chart uses the color gradient, if none of the value in a certain serie is a number, don't report an error.

What is actually happening?

After the area chart uses a color gradient, if none of the value in a certain serie is a number, an error is reported.