效果展示如下:
指定lable为图片显示首先我们需要知道坐标轴有lable(axisLabel)设置选项,series也有。两者都是同理
步骤一:利用formatter函数对想要显示的label结构进行搭建:
(解读) 首先 a 对应的是柱子左侧的数字,b 对应的是标签名称, c 是显示的图片--这里c就代表图片,有c就有图片
我们要知道想要实现这种样式表面来讲就是,b 和 c 不能同时出现,而且是指定的标签内容才用图片
写法一
结构逻辑代码实现① 先设置除了指定标签以外的标签显示,指定标签不显示,也就是上图中 b 的判定------------如果当前的标签是指定标签,就将内容赋值为 空的字符串 就会什么都不显示 ,如果不是指定内容的标签,就该显示什么就显示什么
② 还是判断,与上面一样,如果是指定标签那么就让 c 展示出来,如果不是,那么就展示空的字符串
写法二 这种更简便一些
写法二就是三元判断,是指定标签就显示 c 不是就显示 b
步骤二:接下来看一看 a b c的样式设置
利用rich属性,我们可以看出下面出现了两次backgroundColor,但是设置方式不同,也就是说,如果直接赋值,那么就是直接设置的背景色,如果是对象,那么可以通过image进行图片的插入,因为 c 没有内容,所以背景图就会作为label展示出来。
样式代码
网友评论