颜色设置渐变报错

[chenmo00000]

"vue": "^2.6.11",
"echarts": "^4.7.0",
"echarts-liquidfill": "^2.0.5",
"typescript": "~3.8.3"

series: [{
type: 'liquidFill',
data: [{
value: 0.4,
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'red'
}, {
offset: 1,
color: 'green'
}],
global: false
}
}
}],
}]

问题：在vue mounted初始化init跟setOption的时候报错。
解决：不设置初始化，监听数据变化，在调用init跟setOption就不报错

期待：希望有一个合适的解决办法
@Ovilia 小姐姐有好的解决办法不呢

[Ovilia]

网页版没有问题，不知道你说的报错具体是什么错误，可以贴一下。

[chenmo00000]

网页版没有问题，不知道你说的报错具体是什么错误，可以贴一下。

Style.js?2b61:458 Uncaught TypeError: Failed to execute 'addColorStop' on 'CanvasGradient': The provided double value is non-finite.
at Style.getGradient (Style.js?2b61:458)
at Sub.brush (Path.js?cbe5:65)
at Painter._doPaintEl (Painter.js?ed21:517)
at Painter._doPaintList (Painter.js?ed21:445)
at Painter._paintList (Painter.js?ed21:378)
at Painter.refresh (Painter.js?ed21:260)
at ZRender.refreshImmediately (zrender.js?697e:237)
at ZRender.flush (zrender.js?697e:261)
at Object.eval [as update] (util.js?6d8b:426)
at Animation._update (Animation.js?30a3:159)

[Ovilia]

断点看一下 addColorStop 参数，截一个图

[chenmo00000]

断点看一下 addColorStop 参数，截一个图

一直重复着这个错误

[yaodd123]

@Ovilia 你好，我也遇到了这个问题，请问怎么解决呢？下面附上代码：
option = {
"backgroundColor": "",
"series": [
{
"amplitude": 8,
"animationDuration": 1000,
"animationDurationUpdate": 1000,
"animationEasing": "linear",
"animationEasingUpdate": "linear",
"backgroundStyle": {},
"center": [
"50%",
"50%"
],
"color": [
{
"colorStops": [
{
"color": "rgba(5, 98, 242, 0.59)",
"offset": 0
},
{
"color": "rgba(5, 98, 242, 1)",
"offset": 1
}
],
"global": false,
"type": "linear",
"x": 0,
"x2": 0,
"y": 0,
"y2": 1
}
],
"data": [
0.34
],
"direction": "left",
"label": {
"color": "rgba(4, 0, 0, 1)",
"fontFamily": "微软雅黑",
"fontSize": 25,
"fontWeight": "normal",
"insideColor": "rgba(249, 245, 245, 1)",
"position": [
"50%",
"39%"
],
"rich": {},
"show": true
},
"outline": {
"borderDistance": 3,
"itemStyle": {
"borderColor": "rgba(5, 98, 242, 1)",
"borderType": "solid",
"borderWidth": 4,
"color": "rgba(249, 249, 249, 1)",
"shadowBlur": 0
}
},
"period": "auto",
"phase": "auto",
"radius": "75%",
"shape": "circle",
"type": "liquidFill",
"waveAnimation": true,
"waveLength": 223
}
]
};

setInterval(function() {
// option.series[0].data = [Math.floor(Math.random())];
console.log(Math.floor(Math.random() * 100)/100);
myChart.setOption({
series: [
{
data:[Math.floor(Math.random() * 100)/100],
color: [
{
"colorStops": [
{
"color": "rgba(5, 98, 242, 0.59)",
"offset": 0
},
{
"color": "rgba(5, 98, 242, 1)",
"offset": 1
}
],
"global": false,
"type": "linear",
"x": 0,
"x2": 0,
"y": 0,
"y2": 1
}
]
}
]
});
}, 5000);

[Ovilia]

这个问题是由于 ECharts 动画插值不支持渐变色

[Ovilia]

请使用 2.0.6 版本

[yaodd123]

已测试，没有问题。非常感谢！！！