[Bug] tooltip.axisPointer.color 咋使用 svg 渲染器下使用渐变色无法正常渲染，在Canvas 中能够正常渲染

[ermuz]

Version

5.5.1

Link to Minimal Reproduction

https://codesandbox.io/p/sandbox/4xwqn9

Steps to Reproduce

option = { color: ["rgba(254, 54, 104, 0.65)", "#FF8652", "#2DC5A6", "#F73B68"], tooltip: { trigger: "axis", padding: 8, textStyle: { fontSize: 12, lineHeight: 17, color: "#222222", }, formatter(array) { const param = array[0]; const { axisValueLabel, value, seriesName } = param; return

${axisValueLabel}

${seriesName}${value}%

; }, axisPointer: { snap: true, show: true, type: "line", lineStyle: { type: "dashed", width: 2, color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [ { offset: 0, color: "rgba(255,64,114,1)", }, { offset: 1, color: "rgba(255,64,114,0)", }, ]), }, }, }, legend: { data: [ { name: "权益流量", icon: "circle", }, { name: "商业流量", icon: "circle" }, { name: "自然流量", icon: "circle" }, { name: "权益增长率" }, ], left: 0, textStyle: { color: "#6B6B6F", fontSize: 10, lineHeight: 17, }, padding: 0, itemGap: 8, itemWidth: 6, itemHeight: 6, // backgroundColor: 'red', }, toolbox: { feature: { saveAsImage: {}, }, }, grid: { left: "3%", right: "4%", bottom: "10%", containLabel: true, }, xAxis: [ { type: "category", boundaryGap: false, data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], axisLabel: { show: true, color: "#86909C", }, }, ], yAxis: [ { type: "value", position: "left", splitLine: { show: false, }, axisLabel: { show: true, color: "#86909C", }, }, { type: "value", position: "right", splitLine: { show: false, }, max: 50, min: 0, axisLabel: { show: true, formatter: (value) => (value ? ${value}%:${value}`),
color: "#86909C",
},
},
],
series: [
{
name: "权益流量",
type: "line",
stack: "Total",
smooth: true,
lineStyle: {
width: 1,
color: "#2DC5A6",
},
showSymbol: false,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
{
offset: 0,
color: "rgba(59, 193, 160, 0.1)",
},
{
offset: 1,
color: "rgba(59, 193, 160, 0)",
},
]),
},
tooltip: {
show: false,
},
data: [140, 232, 101, 264, 90, 340, 250],
},
{
name: "商业流量",
type: "line",
stack: "Total",
smooth: true,
lineStyle: {
width: 1,
color: "rgba(255, 134, 82, 1)",
},
showSymbol: false,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
{
offset: 0,
color: "rgba(255, 134, 82, 0.1)",
},
{
offset: 1,
color: "rgba(255, 134, 82, 0)",
},
]),
},
tooltip: {
show: false,
},
data: [120, 282, 111, 234, 220, 340, 310],
},
{
name: "自然流量",
type: "line",
stack: "Total",
smooth: true,
lineStyle: {
color: "rgba(247, 59, 104, 0.65)",
width: 1,
},
showSymbol: false,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(254, 54, 102, 0.1)",
},
{
offset: 1,
color: "rgba(254, 54, 102, 0)",
},
]),
},
tooltip: {
show: false,
},
data: [320, 132, 201, 334, 190, 130, 220],
},
{
name: "权益增长率",
type: "line",
smooth: true,
lineStyle: {
width: 1,
type: "dashed",
color: "#F73B68CC",
},
showSymbol: true,

  tooltip: {
    show: true,
  },
  yAxisIndex: 1,
  data: [30, 50, 40, 49, 36, 47, 35],
},

],
};`

切换渲染器为 svg

Current Behavior

Expected Behavior

能和 canvas 一样能够正常渲染出来

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

[echarts-bot]

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

TRANSLATED

TITLE

[Bug] tooltip.axisPointer.color Why can't I use the gradient color in the svg renderer, but it can render normally in Canvas

[plainheart]

可能和 ecomfe/zrender#792 类似，后续版本会修复。