页面树结构

版本比较

标识

  • 该行被添加。
  • 该行被删除。
  • 格式已经改变。

(本文档仅供参考)

...

问题:普通柱图渐变

自助仪表盘柱图上想要柱子的颜色实现渐变的效果,如下截图

image2021-8-24_18-12-52.pngImage Added

解决方案

具体请参考如下扩展属性:

{
    "series": [{
        "itemStyle": {
            "normal": {
                "color": {
                    "x": 0,
                    "y": 0,
                    "x2": 0,
                    "y2": 1,
                    "type": "linear",
                    "global": false,
                    "colorStops": [{
                        "offset": 1,
                        "color": "#FFBB77"
                    }, {
                        "offset": 0,
                        "color": "#D26900"
                    }]
                }
            }
        }
    }]
}

问题2:堆积柱图渐变

堆积柱图上想要柱子的颜色实现渐变的效果,如下截图

解决方案

具体请参考如下扩展属性

代码块
linenumberstrue
{
    "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

Image Added

另,若不需要颜色渐变可参考以下扩展属性:

代码块
languagexml
linenumberstrue
{
    "series": [{
        "itemStyle": {
            "normal": {
                "color": "#188df0"
            }
        }
    }, {
        "itemStyle": {
            "normal": {
                "color": "#F57F2D"
            }
        }
    }]
}