（本文档仅供参考）
...
问题：普通柱图渐变
...
自助仪表盘柱图上想要柱子的颜色实现渐变的效果，如下截图
...
解决方案
具体请参考如下扩展属性具体请参考如下扩展属性：
|
...
|
问题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"
}
}
}]
} |
