实现效果:
实现要点
主要是通过配置 xAxis 数组来实现,有几组数据增加几个数据即可。如果有特殊样式,可以通过 rich f富文本来实现。比如我这个需求中的箭头图标,是引入了一张图片实现的。
代码落地
这里 我只截取了一部分关键代码:
xAxis: [
{
type: 'category',
axisLabel: {
interval:0,
align: 'center',
},
axisTick:{
show: false
},
axisLine:{
show: false
},
data: []
},
{
type: 'category',
position: 'bottom',
offset: 18,
axisTick:{
show: false
},
axisLine:{
show: false
},
axisLabel: {
interval:0,
align: 'center',
formatter: function (value, index) {
// 根据业务场景判断显示哪种图标
if(value > 0){
// 图标显示
return Math.abs(value) + ' ' + "{up|}"
}else if(value < 0){
// 图标显示
return Math.abs(value) + ' ' + "{down|}"
} else {
return value
}
},
// 这里实现了在 x 轴增加图片背景
rich: {
value: {
lineHeight: 20,
align: 'center'
},
down: {
height: 8,
width: 10,
align: 'center',
backgroundColor: {
image: '/static/down.png' // 这里是重点
},
},
up: {
height: 8,
width: 10,
align: 'center',
backgroundColor: {
image: '/static/up.png'
},
}
}
},
data: []
}
],