[Bug] tooltip.axisPointer.color 咋使用 svg 渲染器下使用渐变色无法正常渲染,在Canvas 中能够正常渲染
- Dominant language
- TypeScript
- Stars
- 67.3k
- Forks
- 19.8k
- Avg merge
- 11d 14h
- Merged PRs (30d)
- 8
Description
### 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 `
`;
},
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
```markdown
- OS:
- Browser:
- Framework:
```
### Any additional comments?
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.