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: []
	}
  ],
相关推荐
bpmf_fff4 分钟前
十、事件类型(鼠标事件、焦点.. 、键盘.. 、文本.. 、滚动..)、事件对象、事件流(事件捕获、事件冒泡、阻止冒泡和默认行为、事件委托)
前端·javascript
泰山小张只吃荷园17 分钟前
期末Python复习-输入输出
java·前端·spring boot·python·spring cloud·docker·容器
悦涵仙子1 小时前
vueuse中的useTemplateRefsList
前端·javascript·vue.js
萧萧玉树1 小时前
分布式在线评测系统
前端·c++·后端·负载均衡
haima951 小时前
ubuntu安装chrome无法打开问题
前端·chrome
放逐者-保持本心,方可放逐1 小时前
XSS 与 CSRF 记录
前端·xss·csrf·浏览器安全
徊忆羽菲1 小时前
利用HTML5和CSS来实现一个漂亮的表格样式
前端·css·html5
不爱说话郭德纲2 小时前
Stylus、Less 和 Sass 的使用与区别
前端·css·面试·less·sass·stylus
凄凄迷人2 小时前
如何调试 chrome 崩溃日志(MAC)
前端·chrome·macos·crash
蒙特网站2 小时前
网站布局编辑器前端开发:设计要点与关键考量
前端·javascript·学习·html