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: []
	}
  ],
相关推荐
浮桥3 分钟前
vue3实现pdf文件预览 - vue-pdf-embed
前端·vue.js·pdf
七夜zippoe14 分钟前
前端开发中的难题及解决方案
前端·问题
晓13131 小时前
JavaScript加强篇——第七章 浏览器对象与存储要点
开发语言·javascript·ecmascript
Hockor1 小时前
用 Kimi K2 写前端是一种什么体验?还支持 Claude Code 接入?
前端
杨进军1 小时前
React 实现 useMemo
前端·react.js·前端框架
海底火旺1 小时前
浏览器渲染全过程解析
前端·javascript·浏览器
你听得到111 小时前
揭秘Flutter图片编辑器核心技术:从状态驱动架构到高保真图像处理
android·前端·flutter
驴肉板烧凤梨牛肉堡1 小时前
浏览器是否支持webp图像的判断
前端
Xi-Xu1 小时前
隆重介绍 Xget for Chrome:您的终极下载加速器
前端·网络·chrome·经验分享·github
摆烂为不摆烂1 小时前
😁深入JS(九): 简单了解Fetch使用
前端