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

最新推荐文章于 2024-06-07 10:32:54 发布

代码搬运媛

最新推荐文章于 2024-06-07 10:32:54 发布

阅读量626

点赞数 8

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/sinat_33255495/article/details/135655090

版权

本文介绍了如何通过配置ECharts的xAxis数组来实现动态箭头图标，利用富文本功能处理数值判断并插入相应图片。作者分享了关键代码片段，展示了如何在x轴上添加自定义图片背景以满足特定需求。

摘要由CSDN通过智能技术生成

实现效果：

在这里插入图片描述

实现要点

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