象形图---异形柱状图 整体渐变 单一颜色

实现效果:

两种效果

代码实现:symbol类型为‘rect’,确定好每个‘rect’的长宽比,然后设定为平铺样式便可以实现图中样式,但是这只能设置为单一的颜色,渐变的话这样只能实现单个rect的渐变样式,整体渐变需要以另外的方式实现

核心代码(barWidth为柱宽,barColor为柱的颜色)

整体渐变实现方式

首先需要准备两个切图,一个是整根的渐变色的柱子,另一个是柱子的扣图

扣图柱

这个柱子的作用是覆盖在渐变柱上,使渐变颜色透过来,形成视觉上的渐变样式的柱子

渐变柱

通过象形柱的symbol属性,值设置成图片的相应路径,柱子的值就是相应的数据就可以,两根柱子就可以随时保持相同高度进行透色,这里要注意两根柱子的位置以及层级的设置,必须是渐变柱子在下面,并且两根柱子重合,但是这种方式实现的图表可能会因为数据的大小,使图形进行不同程度的拉伸,无法保证每一根柱子的小格子高度是一样的,这里是dataset格式的渲染模式,所以用encode进行取数,data格式是一样的,就是将encode改成data,值为数组的格式,放一根柱子的所有数据即可

实现代码

但是如果想要渐变的同时,保证每个格子高度一致,那么就需要将扣图那个图的值都设置成最大值,这样就可以保证这个柱子的拉伸程度是一样的,但是会导致没有到达最大高度的带颜色柱子依然可以看到扣图柱的存在

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容