g2条形图填充色设置渐变色
g2 条形图填充色设置渐变色
为了方便可以直接访问 github 链接
https://github.com/antvis/G2/discussions/5486
- 在 antv/g2 4.*版本
在 4.*版本是不支持设置 fill 属性为
linear-gradient(-90deg, white 0%, darkgreen 100%)
设置完会是黑色,正确做法如下:
// 举个🌰
const interval = chart
.interval()
.position("x*y")
.size(100)
.style({ fill: "l (90) 0.5: rgba(20,98,255,1) 1:rgba(77,184,255,1) " });
- 在 antv/g2 5.*版本
样式中可以直接使用
.style('fill', 'linear-gradient(-90deg, white 0%, darkgreen 100%)')
具体可以参考这里官方的例子
https://g2.antv.antgroup.com/examples/general/area#area-gradient
效果
补充:
可以查看图表的样式所有样式地址,最下面有 v4 版本渐变色和纹理设置的用法
https://g2-v4.antv.vision/zh/docs/api/shape/shape-attrs/#通用属性
## 希望内容对你有帮助,如果有错误请联系我 q: 1911509826,感谢支持