echarts坐标轴添加图片

约定不等于承诺〃 2022-05-09 01:56 844阅读 0赞

**“水精帘动微风起，满架蔷薇一院香”**  
先上图，看结果：  
![在这里插入图片描述][70]  
如上图，4月和7月下有个红色图片，那是预警的。  
需求是这样的：如果这个月的办理量比上个月降了50%就需要预警，也就是环比预警。  
所以，那该如何在横轴下面加个图片呢？  
先参考官方案例：

[富文本标签][Link 1]  
![在这里插入图片描述][70 1]  
我这里是这样的处理的，现在后台java中处理好，哪个月需要预警，就给这个月名字中加上“warn”，然后在js里面判断，哪些月份是要预警的：  
这是java代码：  
![在这里插入图片描述][70 2]  
然后在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标签][rich]  
![在这里插入图片描述][70 3]

这样完成之后，还有一个问题，就是鼠标放上去时的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函数介绍][formatter]  
![在这里插入图片描述][70 4]

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

[70]: /images/20220509/52fcd4a95c6647bf9ddb47803118f0e0.png
[Link 1]: http://www.echartsjs.com/gallery/editor.html?c=bar-rich-text
[70 1]: /images/20220509/cc4f19f55fbf422388b569b90bb744a8.png
[70 2]: /images/20220509/afed8415250c48adb2a33c929a82d0ae.png
[rich]: http://echarts.baidu.com/option.html#xAxis.axisLabel.rich
[70 3]: /images/20220509/40fd9b10c1f8457391e4e2b496c5e833.png
[formatter]: http://echarts.baidu.com/option.html#tooltip.formatter
[70 4]: /images/20220509/296dfb7fc1a8464d9792c8fb642f45a0.png