echart

将echarts中series的指定lable名称换成图片展示

2022-07-06  本文已影响0人  沃德麻鸭

效果展示如下:

指定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展示出来。

样式代码
上一篇 下一篇

猜你喜欢

热点阅读