The following is the option of ECharts.
option = {
tooltip: {
show:false,
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
show:false,
type: 'value',
max:'100',
min:'0',
boundaryGap: [0, 0.01]
},
yAxis: {
show:false,
type: 'category'
},
series: [
{
name: '2011',
type: 'bar',
data: [50.34],
showBackground:true,
backgroundStyle:{
color:'#d7e9e9',
},
label:{
show:true,
offset:[250,-35],
color:'red',
formatter:['{abc|50.34%}'].join('\n'),
rich: {
abc:{
align: 'center',
backgroundColor: {
image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAABfCAYAAABBTu1zAAAACXBIWXMAAC4jAAAuIwF4pT92AAAF8WlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwNDUxLCAyMDE3LzA1LzA2LTAxOjA4OjIxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKE1hY2ludG9zaCkiIHhtcDpDcmVhdGVEYXRlPSIyMDIyLTA5LTAxVDA5OjUyOjQ1KzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIyLTA5LTAxVDA5OjUyOjQ1KzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMi0wOS0wMVQwOTo1Mjo0NSswODowMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDphMmE3ZjViMC04NTBhLTQ0MzItYWQxZC1jYzY5OTRkYzUxZDIiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDo2NTMxNTBmYi05MzM5LTUwNDAtODdkMi1mMzVlOWZlNTdhYmUiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkYjAzODVhYi04NWFhLTQzYjEtYTJjNC1mMmNhNDE1M2YyZWEiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmRiMDM4NWFiLTg1YWEtNDNiMS1hMmM0LWYyY2E0MTUzZjJlYSIgc3RFdnQ6d2hlbj0iMjAyMi0wOS0wMVQwOTo1Mjo0NSswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDphMmE3ZjViMC04NTBhLTQ0MzItYWQxZC1jYzY5OTRkYzUxZDIiIHN0RXZ0OndoZW49IjIwMjItMDktMDFUMDk6NTI6NDUrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4FzPfuAAADcUlEQVR4nO3aT2sVVxiA8acTGzf9AK1x6cK97UL6JRS1UFSKS2la0EWkq5ZKBXVhoc1CBBXBVbBGSv/5FTREu05tKxYXrVSxtPVKSBdnQpNwo947Z+aY9z4/uBCGc2fexUOYmXNfefuLafoYB3bVn53AlvqYVMpfwD1gHrgKXAN6axdt6vPF3cApYFub00kDeg3YXn/eBRaAY8BXKxdVK/4eA07WC4xZL7ttwBVSs2PLB1f+hz4BTHU8lNTUcrPH4P//0HsxZm1cU6SGqUgPe2eKjiM19zkwXgH7gK1lZ5EamwDeqUiv5qQIdlXAW6WnkDJ5swJeLz2FlMkbFbC59BRSJuPV89dIG4dBKxSDVigGrVAMWqEYtEIxaIVi0ArFoBWKQSsUg1YoBq1QDFqhGLRCMWiFYtAKxaAVikErFINWKAatUAxaoRi0QjFohWLQCsWgFYpBKxSDVigGrVAMWqEYtEIxaIVi0ArFoBWKQSsUg1YoBq1QDFqhGLRCMWiFYtAKxaAVikErFINWKAatUAxaoRi0QjFohWLQCsWgFYpBKxSDVigGrVAMWqEYtEIxaIVi0AqlAh6XHkLKpFcB90tPIWVyvwJ+LD2FlMnNCpgtPYWUyWwFzAD3Sk8iNfQbMFMBPeBo4WGkpo4AT5Zf280ApwsOIzVxmtTwqvfQHwFfFhlHGt40qV1gddCLwAfAXmCh46GkQS0A+4BJUrsAbOqz8Arwdb14N7ADmABebX9GaV1PSQ9+c8BV0i1Gb+2ifkFTL7xcf7TaeeBQR9e6BLzX0bVC8Lccg5sE5ju4zm3gcAfXCcWgB/c36Tnjzxav8QjYU19LAzDo4dwBDgBLLZx7CTgI/NTCucMz6OF9Cxxv4bwnSA/lGoJBN/Mp8EPG810HPs54vpFj0M0sAvuBXzOc6y7pNmbxeQu1PoNu7gHpAe5Jg3P0SA+av2eZaIQZdB5zpF3WYX0I3Mg0y0gz6HzOAReG+N5F4GzeUUaXQef1PoNtutyqv6NMDDqvf0j30y+y6fIQN0+yM+j8fia9+XjWpssS6Y3GnU4mGiEG3Y7vSO+o1/MZ8E1Hs4wUg27PceD7PsevA590O8roMOj2LJJuK35Zcewu6XbEzZOWGHS7HpA2TP4lbZ7sAf4oOlFw6/3AX/nMkX5DPQbcLDxLeP8BM05wrf1s4IEAAAAASUVORK5CYII='
},
height:30
}
}
},
barWidth:30,
itemStyle:{
color:'#3b9395'
}
},
]
};
Image generated by the website [enter image description here][1] [1]: https://i.stack.imgur.com/jpS5m.png
You can see rich text is normal,but when I use the java program to generate the image with phantomjs it fails. Windows command
phantomjs D:\report\report\echarts-convert\echarts-convert3.js -infile D:\report\report\echarts\json\data8.json -outfile D:\report\report\echarts\images\data888888.png
js and other files are in the cloud disk and can be accessed with a password. https://www.aliyundrive.com/s/m8M5BnCb4DR password:p44h
If the cloud disk can't be seen, I put it on github. https://github.com/lcy-865/echarts/tree/main