echarts坐标轴添加图片

“水精帘动微风起，满架蔷薇一院香”
先上图，看结果：

如上图，4月和7月下有个红色图片，那是预警的。
需求是这样的：如果这个月的办理量比上个月降了50%就需要预警，也就是环比预警。
所以，那该如何在横轴下面加个图片呢？
先参考官方案例：

富文本标签

我这里是这样的处理的，现在后台java中处理好，哪个月需要预警，就给这个月名字中加上“warn”，然后在js里面判断，哪些月份是要预警的：
这是java代码：

然后在js里面判断：

xAxis: {
     type: 'category',
      data: xdata,
      axisLabel: {
          fontSize: publicTextSize.fiveTitle,
          interval: 0,
          formatter: function (value) {
              //判断是否要显示预警
              if (value.indexOf("warn") != -1) {
                  return value.substring(0,value.indexOf("warn")) + '\n{warnValue|}';
              } else {
                  return value;
              }
          },
          // margin: 20,
          rich: {
          //这里的rich，下面有解释
              warnValue: {
              //这里的warnValue对应上面的标签名
                  height: 10,
                  align: 'center',
                  backgroundColor: {
                      image: warnImg  	//这个warnImg是上面定义的图片var warnImg = "img/warn.png";
                  }
              }
          }
      },
      axisLine: {
          lineStyle: {
              color: publicColor[4],
          }
      },
      axisTick: {
          show: false
      },
  },

上面的rich标签看看官网上的介绍：rich标签

这样完成之后，还有一个问题，就是鼠标放上去时的tooltip时间，那个月份会是“7月warn”，这个也好处理，在tooltip里面使用formatter函数：

formatter: function (value) {
 //判断是否要显示预警
    if (value.indexOf("warn") != -1) {
        return formatValue(value.substring(0,value.indexOf("warn"))) + '\n{warnValue|}';
    } else {
        return formatValue(value);
    }
},

formatter函数也可以看官网的介绍：
formatter函数介绍

于是，靠着rich标签和formatter函数，就做成这个预警；供参考。