实现效果:
代码实现:symbol类型为‘rect’,确定好每个‘rect’的长宽比,然后设定为平铺样式便可以实现图中样式,但是这只能设置为单一的颜色,渐变的话这样只能实现单个rect的渐变样式,整体渐变需要以另外的方式实现
整体渐变实现方式
首先需要准备两个切图,一个是整根的渐变色的柱子,另一个是柱子的扣图
这个柱子的作用是覆盖在渐变柱上,使渐变颜色透过来,形成视觉上的渐变样式的柱子
通过象形柱的symbol属性,值设置成图片的相应路径,柱子的值就是相应的数据就可以,两根柱子就可以随时保持相同高度进行透色,这里要注意两根柱子的位置以及层级的设置,必须是渐变柱子在下面,并且两根柱子重合,但是这种方式实现的图表可能会因为数据的大小,使图形进行不同程度的拉伸,无法保证每一根柱子的小格子高度是一样的,这里是dataset格式的渲染模式,所以用encode进行取数,data格式是一样的,就是将encode改成data,值为数组的格式,放一根柱子的所有数据即可
但是如果想要渐变的同时,保证每个格子高度一致,那么就需要将扣图那个图的值都设置成最大值,这样就可以保证这个柱子的拉伸程度是一样的,但是会导致没有到达最大高度的带颜色柱子依然可以看到扣图柱的存在