apache / apache/echarts

SVG Renderer in ECharts Fails to Display Base64 Encoded Data URI Image

Open
#20,261 1 comment 0 reactions 0 assignees View on GitHub
bug en pending SVG
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://codepen.io/Srikanth-Sangana/pen/ZEZQyMd

### Steps to Reproduce

1. Define a chart option with a background image using an SVG base64 data URI.
2. Render the chart using the canvas renderer and confirm the background image displays correctly.
3. Change the renderer to svg by setting { renderer: 'svg' } during chart initialization.
4. Render the chart again and observe that the background image does not appear in SVG mode.

The E-chart options are below:
var dom = document.getElementById('chart-container');
var myChart = echarts.init(dom, null, {
renderer: 'svg',
useDirtyRect: false
});
var app = {};

var option;

const base64ImageUpArrow = 'data:png;base64,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';
var labelFormatters =['{{title|$61,18M} (-37,31M {upArrow|})', '$23,87M (-0,00M {upArrow|})', '$3,32M (20,55M {upArrow|})']

option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150],
type: 'bar',
label: {
show: true,
fontSize: 10,
position: 'outside',
"formatter": (params) =>{
return `${labelFormatters[params.dataIndex]}`;
},
rich: {
upArrow: {
height: 15,
align: 'center',
backgroundColor: {
image: base64ImageUpArrow // Path to your icon
}
},
}
}
}
]
};

if (option && typeof option === 'object') {
myChart.setOption(option);
}

window.addEventListener('resize', myChart.resize);

### Current Behavior

When rendering an ECharts chart with a background image set using an SVG base64 data URI:

- The background image renders correctly when using the canvas renderer.
- The background image does not render when switching to the SVG renderer, leaving the background empty

### Expected Behavior

The background image set using an SVG base64 data URI should render correctly in both canvas and SVG rendering modes.

### Environment

```markdown
- OS:Windows
- Browser:Chrome
- 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.