1. 选择合适的rich图标
const weatherIcons = {
Sunny: 'https://echarts.apache.org/examples/data/asset/img/weather/sunny_128.png',
Showers: 'https://echarts.apache.org/examples/data/asset/img/weather/showers_128.png'
}
2. 设置X轴
提示: 添加rich属性,通过 formatter 函数自定义渲染
xAxis: [
{
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
type: '',
color: '#000'
}
},
axisLabel: {
formatter: function (value, index) {
// 根据业务场景判断显示哪种图标
if(isRain[index] === '1'){
// 图标显示
return "{Showers|}"+value
}else {
// 图标显示
return "{Sunny|}"+value
}
},
// inside: false,
// textStyle: {
// color: '#000', // x轴颜色
// fontWeight: 'normal',
// fontSize: '14',
// lineHeight: 22
// },
rich: {
value: {
lineHeight: 20,
align: 'center'
},
Sunny: {
height: 20,
align: 'center',
backgroundColor: {
image: weatherIcons.Sunny
}
},
Showers: {
height: 20,
align: 'center',
backgroundColor: {
image: weatherIcons.Showers
}
}
}
},
// x轴展示的数据
data: xAxisData
}
],