使用Safari在svg渲染模式下，rgba渐变的透明度值失效 #9014
Description
One-line summary [问题简述]
使用Safari，在透明度设置值
new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: 'rgba(172,90,255,0.2)' },
{ offset: 1, color: 'rgba(172,90,255,0)' }
]
)
之后，无论是设置areaStyle还是直接设置color，在Safari上结果都好像是直接忽略的透明度的值，同时Chrome/FireFox 上都可以正常显示
Version & Environment [版本及环境]
- ECharts version [ECharts 版本]:4.1.0
- Browser version [浏览器类型和版本]:Safari 11/Safari 12，Chrome 69 , FireFox 61
- OS Version [操作系统类型和版本]:MacOs 10.13.6/MacOs 10.14 Beta
Expected behaviour [期望结果]
能够正常显示透明度
ECharts option [ECharts配置项]
option = {
"title": {
"text": ""
},
"tooltip": {
"trigger": "axis"
},
"legend": {
"data": [],
"show": false
},
"grid": {
"left": 5,
"right": 15,
"bottom": "2%",
"top": "4%",
"containLabel": true,
"show": true,
"backgroundColor": "transparent"
},
"xAxis": {
"type": "category",
"boundaryGap": false,
"data": [
"0:00",
"0:30",
"1:00",
"1:30",
"2:00",
"2:30",
"3:00",
"3:30",
"4:00",
"4:30",
"5:00",
"5:30",
"6:00",
"6:30",
"7:00",
"7:30",
"8:00",
"8:30",
"9:00",
"9:30",
"10:00",
"10:30",
"11:00",
"11:30",
"12:00",
"12:30",
"13:00"
],
"splitLine": {
"show": false
},
"axisTick": {
"show": false
},
"axisLine": {
"show": false
},
"axisLabel": {
"fontSize": 10
}
},
"yAxis": {
"type": "value",
"min": 0,
"axisTick": {
"show": false
},
"axisLabel": {
"fontSize": 10
},
"axisLine": {
"show": false
},
"splitLine": {
"show": true
},
"interval": 69211
},
"series": [
{
"name": "1",
"type": "line",
"smooth": true,
"itemStyle": {
"normal": {
"opacity": 0
}
},
"lineStyle": {
"normal": {
"width": 1.5,
"color": "#AC5AFF"
}
},
"z": 0,
"areaStyle": {
"normal": {
"color": new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: 'rgba(172,90,255,0.2)' },
{ offset: 1, color: 'rgba(172,90,255,0)' }
]
)
}
},
"data": [
31574,
164657,
276844,
101562,
112015,
92247,
76087,
75194,
58138,
57983,
70396,
90285,
94566,
91314,
114043,
91601,
73448,
45801,
76783,
257652,
264912,
110699,
144759,
117858,
83102,
71152,
62269
]
}
],
"animationEasing": "circularOut"
}Other comments [其他信息]
附上JSFiddle：
https://jsfiddle.net/vepj821g/18/