Version
5.5.1
Link to Minimal Reproduction
https://jsfiddle.net/AidMen/fcx20wo1/32/
Steps to Reproduce
- Chart is created via vanilla js and Apache ECharts (see also JSFiddle).
- This is the option object:
const option= {
title: {
text: 'Waterfall Chart',
subtext: 'Living Expenses in Shenzhen'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function (params) {
var tar = params[1];
return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
}
},
toolbox: {
show: true,
feature: {
saveAsImage: {
name: 'saved_via_toolbox'
}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
splitLine: { show: false },
data: ['Total', 'Rent', 'Utilities', 'Transportation', 'Meals', 'Other']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Placeholder',
type: 'bar',
stack: 'Total',
itemStyle: {
borderColor: 'transparent',
color: 'transparent'
},
emphasis: {
itemStyle: {
borderColor: 'transparent',
color: 'transparent'
}
},
data: [0, 1700, 1400, 1200, 300, 0]
},
{
name: 'Life Cost',
type: 'bar',
stack: 'Total',
label: {
show: true,
position: 'inside'
},
data: [2900, 1200, 300, 200, 900, 300]
}
]
};
- On the provided JSFiddle try saving the image via the custom buttons (1. and 2. seen in the screenshot) and you will get the chart saved as svg but the labels on the bar elements have a fill-opacity="0" compared to using the button from the toolbox which doesn't create this fill-opacity.
- The result of saving via getDataUrl can be seen here:
The result of saving via toolbox can be seen here:
Current Behavior
I want to save the chart as svg using my custom buttons which use getDataURL and getConnectedDataURL respectively but both produce a fill-opacity="0" on the labels of the bar elements.
Expected Behavior
The buttons should produce the same result as using the saveImageAs feature from the toolbox or at least no fill-opacity="0" on said elements.
Environment
- OS: Windows 11 Enterprise
- Browser: Edge 127.0.2651.105
- Framework: -
- OS: Linux CentOS 9
- Browser: Chrome 125.0.6422.60
- Framework: -
Any additional comments?
No response
1条答案
按热度按时间uinbv5nw1#
Possible fix:
Calling getDataURL after the chartInstance "rendered" event could be a possible fix: JSFiddle
Could you please elaborate what is the correct behaviour?