echart 横向柱状图

 

<div id="solvetime" style="width:100%;height:210px"></div>

 mounted(){
        var chartDom = document.getElementById('solvetime');
          var myChart = echarts.init(chartDom);
          var dataLine = [50, 66, 33, 25,22,43,11]
          let positionLeft = 0.7,
              max = 100 + 2*positionLeft
          var option = {
              grid: [
                  {
                    left: '3%',
                    top: '10%',
                    right: '0%',
                    bottom: '-10%',
                    containLabel: true
                  }
              ],
              xAxis: [{
                  max:max,
                  show: false
              }],
              yAxis: [{
                  axisTick: 'none',
                  axisLine: 'none',
                  offset: '10',
                  axisLabel: {
                      textStyle: {
                          color: '#000000', //y轴字体颜色
                          fontSize: '12'
                      }
                  },
                  data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
              }, {
                  axisTick: 'none',
                  axisLine: 'none',
                  show: false,
                  axisLabel: {
                      textStyle: {
                          color: '#ffffff',
                          fontSize: '14'
                      },
                  },
                  data: [1, 1, 1, 1, 1, 1, 1]
              }, {

                  axisLine: {
                      lineStyle: {
                          color: 'rgba(0,0,0,0)' //y轴线颜色
                      }
                  },
                  data: []
              },
              {  //设置柱状图右边参数 
                show: true,
                inverse: true,
                data: dataLine,
                axisLabel: {
                    textStyle: {
                        fontSize: '12',
                          rich: {
                          oneone: {
                            color:'#0F97FF',
                            fontSize: '14',
                          },
                        },
                    },
                    formatter:'{oneone|{value}} 小时 '
                  },
                axisLine: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
              }],
              series: [
              {
                  name: '条',
                  type: 'bar',
                  stack: 'b',
                  yAxisIndex: 0,
                  data: dataLine,
                  barWidth: 10,
                  itemStyle: {
                      normal: {
                            color:  '#0F97FF',
                            barBorderRadius:[100, 100, 100, 100,100, 100, 100],
                      }
                  },
                  z: 2
              }, { //背景灰框
                  name: '白框',
                  type: 'bar',
                  yAxisIndex: 1,
                  barGap: '-100%',//设置-100% 则表示灰色柱状图与红色柱状图重合
                  data: [100, 100, 100, 100,100, 100, 100],
                  barWidth: 10,
                  itemStyle: {
                      normal: {
                          color: '#EDF0F6',
                          barBorderRadius:[100, 100, 100, 100, 100, 100, 100],
                      },
                      
                  },
                  z: 1  // 设置维度越高这表示覆盖低的
              },
              
              ]
          }
        option && myChart.setOption(option);
    }