页面树结构
转至元数据结尾
转至元数据起始

(本文档仅供参考)

问题

希望柱图显示为进度条的效果

解决方案

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

{
    "series": [{
        "type": "bar",
        "barWidth": "12%",
        "itemStyle": {
            "normal": {
                "color": "red",
                "barBorderRadius": 20,
                "label": {
                    "show": true,
                    "textStyle": {
                        "color": "rgba(0,0,0,1)"
                    },
                    "position": ["150%", "-5%"]//如为横条柱图烦请将150%修改为100%
                }
            }
        }
    }, {
        "type": "bar",
        "barWidth": "18%",
        "barGap": "-124%",
        "silent": true,
        "itemStyle": {
            "normal": {
                "borderWidth": 0.8,
                "color": "transparent",
                "borderColor": "#49698f",
                "barBorderRadius": 50,
                "label": {
                    "show": false,
                    "textStyle": {
                        "color": "rgba(0,0,0,1)"
                    }
                }
            }
        }
    }]
}

实现效果:

可下载报表资源参考:进度条.zip

  • 无标签