I am trying to make my chart have icons.
So i followed the documentation and came up with the following:
var weatherIcons = {
'Sunny': './data/asset/img/weather/sunny_128.png',
'Cloudy': './data/asset/img/weather/cloudy_128.png',
'Showers': './data/asset/img/weather/showers_128.png'
};
var seriesLabel = {
normal: {
show: true,
textBorderColor: '#333',
textBorderWidth: 2
}
}
option = {
title: {
text: 'Wheater Statistics'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['City Alpha', 'City Beta', 'City Gamma']
},
toolbox: {
show: true,
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
name: 'Days',
data: ['Cloudy', 'Sunny', 'Showers'],
formatter: function (value) {
return '{' + value + '| }\n{value|' + value + '}';
},
axisLabel: {
margin: 20,
rich: {
value: {
lineHeight: 30,
align: 'center'
},
Sunny: {
height: 20,
align: 'center',
backgroundColor: {
image: weatherIcons.Sunny
}
},
Cloudy: {
height: 20,
align: 'center',
backgroundColor: {
image: weatherIcons.Cloudy
}
},
Showers: {
height: 20,
align: 'center',
backgroundColor: {
image: weatherIcons.Showers
}
}
}
}
},
yAxis: {
},
series: [
{
name: 'City Alpha',
type: 'bar',
data: [165, 170, 30],
},
{
name: 'City Beta',
type: 'bar',
label: seriesLabel,
data: [150, 105, 110]
},
{
name: 'City Gamma',
type: 'bar',
label: seriesLabel,
data: [220, 82, 63]
}
]
};
You can test this out by going to this link: Link to Echarts and pasting the code.
However, I can get the chart to show the icons.
Could anyone help me out?
You have a wrong place of formatter
's function
formatter
should be inside the axisLabel
Example:
xAxis: {
// ....
axisLabel: {
formatter: function (value) {
return '{' + value + '| }\n{value|' + value + '}';
},
// ....
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.