echarts中柱状图横向显示__柱状图横向显示带有边框__胶囊柱状图，有背景（完整代码）

效果图：

完整代码：

<div id="capsuleBarChart" style="width:100%;height:350px"></div>

mounted(){
   this.drawCapsuleBar();
 },
 
 methods: {
  //胶囊柱状图，有背景
   drawCapsuleBar(){
     //柱条的颜色，每个柱条颜色不同
     var lineColor=["#9999FF","#0066FF","#33FFFF","#33FF00","#FFFF00","#FF9900","#FF3300"]
     var mychart=this.$echarts.init(document.getElementById("capsuleBarChart"))
     var option={
        tooltip: {//item和line搭配，将实现鼠标放置柱条上即可显示提示框，无阴影或者线条
          trigger: 'item',
          axisPointer: {
            type: 'line'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'value',
            splitLine:{//坐标轴在grid区域的分割线
              show:false
            },
            axisLabel:{
              show:false
            }
          }
        ],
        yAxis: [
          {
            type: 'category',
            data: ['数学', '语文', '英语', '化学', '地理', '生物', '历史'],
            inverse:true,//数组翻转显示
            axisTick: {
              alignWithLabel: true,
              show:false
            },
            axisLine:{
              show:false
            }
          },
          {
            type: 'category',
            data: [1000, 1000, 1000, 1000, 1000, 1000, 1000],
            inverse:true,//数组翻转显示
            axisTick: {
              alignWithLabel: true,
              show:false
            },
            axisLine:{
              show:false//不显示y轴的线
            },
            axisLabel:{
              textStyle:{
                fontSize:12,
                color:"#fff"
              }
            }
          }
        ],
        series: [
          {
            name: '及格人数',
            type: 'bar',
            yAxisIndex:0,
            data: [10, 52, 20, 33, 39, 80, 50],
            barWidth:'20%',//柱条的宽度
            label:{
              show:true,
              formatter:function(params){//柱条上的文字
                return params.data+"%";
              }
            },
            itemStyle:{
              borderRadius:5,//圆角
              color:function(params){
                return lineColor[params.dataIndex]
              }
            },
          },
          {
            name: '',
            type: 'bar',
            yAxisIndex:1,//使两个柱状图重合的效果
            barWidth: '30%',
            data: [100, 100, 100, 100, 100,100, 100],
            label:{
              show:false
            },
            itemStyle:{
              color:"none",
              borderColor:"#00c1de",
              borderWidth:2,
              borderRadius:5,//圆角
            },
          }
        ]       
      }
      mychart.setOption(option,true)
    }
 }