SVG Renderer in ECharts Fails to Display Base64 Encoded Data URI Image
- 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
Assessment
This issue has not been assessed yet.