（本文档仅供参考）
问题1
类似于这种进度条要怎么实现：
解决方案
可通过下面的步骤实现进度条的效果：
步骤1：选择数据作图，如下图：
步骤2：选择横条图，设置X轴Y轴，如下图：
步骤3：X轴设置如下：
步骤4：Y轴设置如下：
步骤5：设置柱子宽度：
步骤6：添加如下扩展属性：
具体的扩展属性如下：
此扩展属性针对V95版本：
{
"series": [{
//如果想要两个系列的柱子重叠，可以设置 barGap 为 '-100%'。这在用柱子做背景的时候有用
"barGap": "-100%",
"z": 1,
//设置圆角
"itemStyle": {
"barBorderRadius": 5
},
//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件
"silent": false
}, {
"barGap": "-100%",
"z": 0,
"itemStyle": {
"barBorderRadius": 5
},
"silent": true
}],
//设置颜色
"color": ["#5A8FF9", "#EEEEEE"],
"xAxis": {
"axisTick": {
//是否显示坐标轴刻度
"show": false
}
}
}
如果是V10.5版本，使用此扩展属性：
{
"series": [{
//如果想要两个系列的柱子重叠，可以设置 barGap 为 '-100%'。这在用柱子做背景的时候有用
"barGap": "-100%",
"z": 1,
//设置圆角
"itemStyle": {
"normal": {
"borderRadius": 10
}
},
//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件
"silent": false
}, {
"barGap": "-100%",
"z": 0,
"itemStyle": {
"normal": {
"borderRadius": 10
}
},
"silent": true
}],
//设置颜色
"color": ["#5A8FF9", "#EEEEEE"],
"xAxis": {
"axisTick": {
//是否显示坐标轴刻度
"show": false
}
}
}
若需要加其他数据进行提示，可按下图操作：
效果图如下：
问题2
类似于这种进度条要怎么实现，后面的指标需要是百分比：
解决方案
可通过下面的步骤实现进度条的效果：
步骤1：选择数据作图，如下图：
说明：如果数据要显示百分比，可以对字段设置单元格的格式，如下图操作：
步骤2：选择横条图，设置X轴Y轴，如下图：
步骤3：X轴设置如下：
步骤4：Y轴设置如下：
步骤5：设置柱子宽度：
步骤6：添加如下扩展属性：
具体的扩展属性如下：
{
"series": [{
//如果想要两个系列的柱子重叠，可以设置 barGap 为 '-100%'。这在用柱子做背景的时候有用
"barGap": "-100%",
"z": 1,
//设置圆角
"itemStyle": {
"barBorderRadius": 5
},
//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件
"silent": false
}, {
"barGap": "-100%",
"z": 0,
"itemStyle": {
"barBorderRadius": 5
},
"silent": true
}],
//设置柱子的颜色，前一个颜色的顶层的，后一个颜色的底部的颜色，可设置成灰色等
"color": ["#faa755", "#d3d7d4"],
"xAxis": {
"axisTick": {
//是否显示坐标轴刻度
"show": false
}
}
}
若需要加其他数据进行提示，可按下图操作：
效果图如下：
