I have a bar chart that displays operators statistics, and I want to use the logo of each operator as a label. Currently, I have managed to make it display the image, but only with a fixed ratio.
Examples:
With no height and no width
var operatorsChart = echarts.init(document.getElementById('chart-operators'));
operatorsChart.setOption({
title: { text: "{{operator}}" },
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
formatter: function(params) {
return commonTooltipFormatter(params);
}
},
yAxis: {
...commonXAxisOptions,
type: 'category',
inverse: true,
axisLabel: {
rotate: 0,
formatter: function(value) {
const normalizedKey = normalizeKey(value);
if (operatorImages[value]) {
return `{${normalizedKey}|}`;
} else {
return value;
}
},
rich: Object.assign({}, ...Object.keys(operatorImages).map(operator => {
const normalizedKey = normalizeKey(operator);
return {
[normalizedKey]: {
width: 110,
height: 20,
backgroundColor: {
image: encodeURI(staticLink + operatorImages[operator])
}
}
};
}))
},
data: dataToUse.operators[viewMode].map(item => item.operator)
},
xAxis: { type: 'value' },
grid: hGridConfig,
series: createSeries(viewMode === 'km' ? convertToKilometers(dataToUse.operators[viewMode]) : dataToUse.operators[viewMode], getColor(tripType))
});
I can fix the height and width, but with my images having different ratios, the rendering is bad.
I can also remove the heigth and width, but there the sizes are wildly different.