有些报表工具是没有子弹图的,比如帆软,但是帆软很方便的提供了Echarts的插件,这样就可以引用到Echarts的图表,自定义去画图。
PS:需要对Echarts图表的几项设置有大致了解,比如想要横向的子弹图,把xAxis和yAxis内容互换就好了
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
icon: 'roundRect'
},
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value}%'
}
},
series: [
{
name: 'Completion Rate',
type: 'bar',
barGap: '-300%',
barWidth: 10,
z: 10,
data: [110, 94, 97, 78, 68],
tooltip: {
valueFormatter: (val) => val + '%'
}
},
{
name: 'Planned Completion Rate',
type: 'scatter',
symbol: 'rect',
silent: true,
symbolSize: [30, 5],
symbolOffset: ['-30%', 0],
z: 20,
data: [95, 90, 90, 90, 85],
tooltip: {
valueFormatter: (val) => val + '%'
}
},
{
name: 'Pass',
type: 'bar',
barWidth: 50,
stack: 'total',
data: [70, 70, 70, 70, 70]
},
{
name: 'Good',
type: 'bar',
barWidth: 50,
stack: 'total',
data: [15, 15, 15, 15, 15]
},
{
name: 'Excellent',
type: 'bar',
barWidth: 50,
stack: 'total',
data: [15, 15, 15, 15, 15]
}
]
};