實現(xiàn)效果:
兩種效果
代碼實現(xiàn):symbol類型為‘rect’,確定好每個‘rect’的長寬比,然后設定為平鋪樣式便可以實現(xiàn)圖中樣式,但是這只能設置為單一的顏色采盒,漸變的話這樣只能實現(xiàn)單個rect的漸變樣式软免,整體漸變需要以另外的方式實現(xiàn)
核心代碼(barWidth為柱寬贰军,barColor為柱的顏色)
整體漸變實現(xiàn)方式
首先需要準備兩個切圖植兰,一個是整根的漸變色的柱子份帐,另一個是柱子的扣圖
扣圖柱
這個柱子的作用是覆蓋在漸變柱上,使?jié)u變顏色透過來楣导,形成視覺上的漸變樣式的柱子
漸變柱
通過象形柱的symbol屬性废境,值設置成圖片的相應路徑,柱子的值就是相應的數(shù)據(jù)就可以筒繁,兩根柱子就可以隨時保持相同高度進行透色噩凹,這里要注意兩根柱子的位置以及層級的設置,必須是漸變柱子在下面毡咏,并且兩根柱子重合驮宴,但是這種方式實現(xiàn)的圖表可能會因為數(shù)據(jù)的大小,使圖形進行不同程度的拉伸呕缭,無法保證每一根柱子的小格子高度是一樣的堵泽,這里是dataset格式的渲染模式,所以用encode進行取數(shù)恢总,data格式是一樣的迎罗,就是將encode改成data,值為數(shù)組的格式离熏,放一根柱子的所有數(shù)據(jù)即可
實現(xiàn)代碼
但是如果想要漸變的同時佳谦,保證每個格子高度一致戴涝,那么就需要將扣圖那個圖的值都設置成最大值滋戳,這樣就可以保證這個柱子的拉伸程度是一樣的,但是會導致沒有到達最大高度的帶顏色柱子依然可以看到扣圖柱的存在