echarts实现柱状图顶部文本标签样式更改

标签样式更换

参见echarts官方文档：https://echarts.baidu.com/option.html#series-bar.label.rich
实际使用中：series.label.normal下：

// 以更改颜色为例
formatter: function (value) {
	return '{a|' + value.data + '}'//在echarts用这种格式标记样式名
},
rich: {//在 rich 里面，可以自定义富文本样式
	a: {//a可以理解为变量
		color: '#ff4848',//顶部文本颜色
		fontSize: 10//文字大小
	},
}

这样，就可以实现柱状图柱子和顶部文本颜色的不一致了。
如果要实现所有柱子间颜色不一致，参见博客：https://www.cnblogs.com/kang543418095/p/5964397.html?utm_source=itdadao&utm_medium=referral

标签添加单位

series.label.normal下：

//顶部数据添加百分比
formatter:function (value) {
	return value.data+"%"
}

说到标签添加单位，可能还有一种需求就是y轴刻度添加单位：

y轴刻度添加单位

//y轴添加百分比为例
yAxis: {
	type: 'value',
	axisLabel: {
		formatter: '{value}%',//直接在{}后添加你的单位即可
	},
},