echarts x轴下增加一组数据的实现方法（附在 x 轴增加图标的方法）

实现效果：

实现要点

主要是通过配置 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: []
	}
  ],