(本文档仅供参考)
...
问题:普通柱图渐变
自助仪表盘柱图上想要柱子的颜色实现渐变的效果,如下截图
解决方案
具体请参考如下扩展属性:
|
问题2:堆积柱图渐变
堆积柱图上想要柱子的颜色实现渐变的效果,如下截图
解决方案
具体请参考如下扩展属性
代码块 | ||
---|---|---|
| ||
{ "series": [{ "itemStyle": { "normal": { "color": { "colorStops": [{ "color": "#83bff6", "offset": 0 }, { "color": "#188df0", "offset": 0.5 }, { "color": "#188df0", "offset": 1 }], "global": false, "type": "linear", "x": 0, "x2": 0, "y": 0, "y2": 1 } } } }, { "itemStyle": { "normal": { "color": { "colorStops": [{ "color": "#F57F2D", "offset": 0 }, { "color": "#F5A746", "offset": 0.5 }, { "color": "#F5DC2D", "offset": 1 }], "global": false, "type": "linear", "x": 0, "x2": 0, "y": 0, "y2": 1 } } } }] } |
另,如希望实现从横向颜色渐变,需要修改下图红框代码。
另,若不需要颜色渐变可参考以下扩展属性,具体说明见百度文档:具体说明见百度文档:https://www.jianshu.com/p/238fbd7927ab:
另,若不需要颜色渐变可参考以下扩展属性:
代码块 | ||||
---|---|---|---|---|
| ||||
{ "series": [{ "itemStyle": { "normal": { "color": "#188df0" } } }, { "itemStyle": { "normal": { "color": "#F57F2D" } } }] } |
...