I’m using https://github.com/hustcc/echarts-for-react
Desktop:
Mobile
When you click on the Save Icon the chart will be saved as you see, on mobile you will have less items/information than a desktop version.
I’m now looking for a way to export the Pie with a specific resolution, my problem is on mobile phones the pie is so small you don’t see anything and i want to give the user the possible to export a bigger chart with more info. (which happens when the chart would be rendered in a higher resolution like 1920×1080).
I found a workaround, but this seems not a good solution, is rendering the chart 2 times (1 time in the FHD) and hide the second one so I can get a big image with all info i want. (see function gettest()
The problem: background is transparency.
Im also looking for 2 possibles solutions.
1.: use the saveas or other to export/rerender in 1920×1080 or
2.: add a white background to my hidden chart to export it over the workaround
I would prefer solution 1 but in the docs i haven’t found anything like this.
Thanks in advance.
const option = {
title: {
text: '',
subtext: '',
left: 'center'
},
tooltip: {
trigger: 'item'
},
toolbox: {
feature: {
saveAsImage: {
backgroundColor: '#fff'
}
}
},
series: [
{
name: '',
type: 'pie',
radius: window.innerWidth < 1366 ? '50%' : '90%',
data: [
{
"value": 190.77828000000002,
"name": "Xtrackers FTSE Vietnam Swap UCITS ETF 1C"
},
{
"value": 190.70976,
"name": "Franklin FTSE India UCITS ETF USD Acc"
},
{
"value": 190.848,
"name": "Xtrackers MSCI Thailand UCITS ETF 1C"
},
{
"value": 493.81046,
"name": "VanEck Video Gaming and eSports UCITS ETF A USD"
},
{
"value": 462.71727,
"name": "Global X Video Games & Esports UCITS ETF"
},
{
"value": 695.53755,
"name": "Vanguard FTSE All-World UCITS ETF"
},
{
"value": 1748.34265,
"name": "BASF"
},
{
"value": 1233.9791,
"name": "Niu Tech ADR-A"
},
{
"value": 377.74,
"name": "AT&T"
},
{
"value": 359.4,
"name": "Sixt SE Inhaber-Vorzugsakt. o.St.o.N."
},
{
"value": 735.0396000000001,
"name": "Mercedes-Benz Group AG Namens-Aktien o.N."
},
{
"value": 901.6200000000001,
"name": "Ströer SE & Co. KGaA Inhaber-Aktien o.N."
},
{
"value": 209.99468,
"name": "Covestro AG Inhaber-Aktien o.N."
},
{
"value": 280.64384,
"name": "British American Tobacco PLC Registered Shares LS -,25"
},
{
"value": 1776.78144,
"name": "Allianz SE vink.Namens-Aktien o.N."
},
{
"value": 1156.9427999999998,
"name": "Unilever PLC Registered Shares LS -,031111"
},
{
"value": 1328.84396,
"name": "HeidelbergCement AG Inhaber-Aktien o.N."
},
{
"value": 692.69928,
"name": "Volkswagen AG Vorzugsaktien o.St. o.N."
},
{
"value": 855.93475,
"name": "Deutsche Post AG Namens-Aktien o.N."
},
{
"value": 1327.5,
"name": "Daimler Truck"
},
{
"value": 745.01694,
"name": "Lang & Schwarz N"
},
{
"value": 324.2454,
"name": "GSK Rg"
}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
label: {
formatter: '{b}: {d}%'}
},
],
};
function gettest(){
const echartInstance = echartRef.current.getEchartsInstance();
const base64 = echartInstance.getDataURL();
var link = document.createElement("a");
link.download = "Chart";
link.href = base64;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
return (
<ReactECharts
option={option}
theme={"vintage"}
style={{ height: window.innerWidth < 1366 ? "200px" : "500px" }}/>
//my try with hidding the second chart where my background has transparency but i want white
<ReactECharts
option={option}
theme={"vintage"}
ref={(e) => { echartRef.current = e; }}
style={{ height: "1080px", width:"1920px", display:"none", backgroundColor:"red" }}/>
<div onClick={(e) => gettest(e)}>FHD Speichern</div>
)