效果展示如下:
首先我们需要知道坐标轴有lable(axisLabel)设置选项,series也有。两者都是同理
步骤一:利用formatter函数对想要显示的label结构进行搭建:
(解读) 首先 a 对应的是柱子左侧的数字,b 对应的是标签名称, c 是显示的图片--这里c就代表图片,有c就有图片
我们要知道想要实现这种样式表面来讲就是,b 和 c 不能同时出现,而且是指定的标签内容才用图片
写法一
① 先设置除了指定标签以外的标签显示,指定标签不显示,也就是上图中 b 的判定------------如果当前的标签是指定标签,就将内容赋值为 空的字符串 就会什么都不显示 ,如果不是指定内容的标签,就该显示什么就显示什么
② 还是判断,与上面一样,如果是指定标签那么就让 c 展示出来,如果不是,那么就展示空的字符串
写法二 这种更简便一些
就是三元判断,是指定标签就显示 c 不是就显示 b
步骤二:接下来看一看 a b c的样式设置
利用rich属性,我们可以看出下面出现了两次backgroundColor,但是设置方式不同,也就是说,如果直接赋值,那么就是直接设置的背景色,如果是对象,那么可以通过image进行图片的插入,因为 c 没有内容,所以背景图就会作为label展示出来。
以上书写内容的思想也可以直接在轴的axisLable属性中使用,formatter函数的参数就是当前刻度对应的label值,第二个参数是index,从0开始计数,在里面进行判定就可以,目前这个方式只能将样式写出来,label位置不能固定在指定位置,想要固定的话就通过series的xAxisIndex属性把这个轴绑定给data值为0数组的bar,之后调好位置就好了,详细步骤看我的另一篇文章《排名图label固定在某一位置,不随数值变化而变动位置》