FAQ中心
页面树结构

版本比较

旧版本 4

changes.mady.by.user 张雪琼

保存于

比较

新版本 5

changes.mady.by.user 潘家宜

保存于

标识

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

（本文档仅供参考）

...

问题1：柱图实现进度条的效果1

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

解决方案

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

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



问题：柱图实现进度条的效果2

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

2021-10-20_151532.pngImage Added

解决方案

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

{
    "series": [{
            "type": "pictorialBar",
            "symbolRepeat": "fixed",
            "symbol": "rect",
            //柱子中间的间隔，如果希望设置为进度条则设置为0%
            "symbolMargin": "0%",
            //进度条的效果就是靠这个属性
            "symbolClip": true,
            "symbolSize": 30,
            "symbolBoundingData": 500,
            "z": 10,
            //右边的数据标签
            "label": {
                "normal": {
                    "show": true,
                    "position": "right",
                    "textStyle": {
                        "color": "green",
                        "fontSize": 18
                    },
                    "formatter": "function (params) {return params.value[0];}"
                }
            }
        },
        //背景
        {
            "type": "pictorialBar",
            "symbolRepeat": "fixed",
            //柱子中间的间隔，如果希望设置为进度条则设置为0%
            "symbolMargin": "0%",
            "symbol": "rect",
            "symbolSize": 30,
            "symbolBoundingData": 500,
            "z": 5,
            //调透明度，让底色变淡一点
            "itemStyle": {
                "normal": {
                    "opacity": 0.2
                }
            },
        }
    ],
    //去掉X轴内容
    "xAxis": {
        "axisLine": {
            "show": false
        },
        "axisLabel": {
            "show": false
        },
        "axisTick": {
            "show": false
        }
    },
    //去掉Y轴，但保留指标
    "yAxis": {
        "axisLine": {
            "show": false
        },
        "axisLabel": {
            "show": true
        },
        "axisTick": {
            "show": false
        }
    }
}