今天做項(xiàng)目的時(shí)候遇到了一個(gè)問(wèn)題, echarts給的例子中顏色太單調(diào),只有一種顏色,有一個(gè)自定義柱體顏色的示例,但是是寫(xiě)在數(shù)據(jù)中的,但是這個(gè)項(xiàng)目的數(shù)據(jù)很多,有20多個(gè),我不可能每一個(gè)數(shù)據(jù)都要用js來(lái)調(diào)整一下。
于是我去翻了一下echarts的配置項(xiàng),找到了這么一段話。
可以傳入一個(gè)RGB格式的顏色或者16進(jìn)制的顏色,為所有的柱體設(shè)置,或者使用一個(gè)回調(diào)函數(shù)為整個(gè)柱體設(shè)置,這里有回調(diào)函數(shù)就說(shuō)明有操作的空間。
這里有一個(gè)小技巧,取余運(yùn)算,我們都知道‘%’,在js是取余數(shù)的意思,如果1 那返回的值是1,2返回2,10是1,余數(shù)是0,11是 11除以10 余下1。
想必聰明的小伙伴走到這里就有思路了,沒(méi)錯(cuò)如果我們?cè)O(shè)置一個(gè)顏色數(shù)組,然后在使用取余運(yùn)算循環(huán)取從1-10的索引,那么展示出來(lái)的就是顏色數(shù)組的循環(huán),實(shí)現(xiàn)如下:
最后的效果如下所示:
了解更多vue知識(shí)點(diǎn)擊這里。
下一篇: 沒(méi)有了