apache / apache/echarts

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

Open
#20,543 2 comments 0 reactions 0 assignees View on GitHub
bug pending
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 `

${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

image
image

### Expected Behavior

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

### Environment

```markdown
- OS:
- Browser:
- Framework:
```

### Any additional comments?

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.