Echarts子弹图样例

有些报表工具是没有子弹图的，比如帆软，但是帆软很方便的提供了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]
    }
  ]
};