echarts with table table display

 first look at the effect

 

 The overall idea is to use the graphic attribute to draw the line and write the value in the table with the positioning 

option = {
  tooltip:{
    trigger:'axis',
    axisPointer:{
      type:'shadow'
    }
  },
  itemStyle:{
    borderRadius:10,
    borderColor:'#FFF',
    borderWidth:1
  },
  legend:[
      {
        left:10,
        bottom:5,
        itemWidth:12,
        origin:'vertical',
        textStyle:{
          color:'black',
          fontSize:14
        }
      }    
    ],
    grid:{
      top:0,
      left:'3%',
      right:'4%',
      bottom:'19%',
      containLabel:true
    },
    xAxis:{
      max:'100',
      type:'value',
      axisLabel:{
        formatter:'{value}'+'%'
      }
    },
    yAxis:{
      type:'category',
      data:datax,
    },
    series:[
      {
        name:'name',
        type:'bar',
        stack:'total',
        itemStyle:{
          color:'#7ec3fc',
        },
        label:{
          show:true,
          position:'right',
          formatter:function(val){
            return val.value+'%'
          }
        },
        tooltip:{
          valueFormatter:function(value){
            return value+'%'
          }
        },
        data:dataVal
      }
      
      ],
      graphic:[
        {
          type:'line', 
          bottom:60,//线条距离底部的距离
          right:0,//控制线路右边的距离
          style:{
            stroke:'rgb(100,112,121)',
          },
          shape:{
            x1:0,
            y1:0,
            x2:882,//线条长度
            y2:0
          }
        },
         {
          type:'line', 
          bottom:30,//线条距离底部的距离
          right:0,//控制线路右边的距离
          style:{
            stroke:'rgb(100,112,121)',
          },
          shape:{
            x1:0,
            y1:0,
            x2:990,//线条长度
            y2:0
          }
        },
          {
          type:'line', 
          bottom:30,//线条距离底部的距离
          right:0,//控制线路右边的距离
          style:{
            stroke:'rgb(100,112,121)',
          },
          shape:{
            x1:0,
            y1:0,
            x2:990,//线条长度
            y2:0
          }
        },
        {
          type:'line', 
          bottom:0,//线条距离底部的距离
          right:0,//控制线路右边的距离
          style:{
            stroke:'rgb(100,112,121)',
          },
          shape:{
            x1:0,
            y1:0,
            x2:990,//线条长度
            y2:0
          }
        },
         {
          type:'line', 
          bottom:0,//线条距离底部的距离
          right:0,//控制线路右边的距离
          style:{
            stroke:'rgb(100,112,121)',
          },
          shape:{
            x1:0,
            y1:0,
            x2:0,//线条长度
            y2:30
          }
        }, {
          type:'line', 
          bottom:0,//线条距离底部的距离
          right:109,//控制线路右边的距离
          style:{
            stroke:'rgb(100,112,121)',
          },
          shape:{
            x1:0,
            y1:0,
            x2:0,//线条长度
            y2:60
          },
          
        },
        {
          type:'line', 
          bottom:0,//线条距离底部的距离
          right:250,//控制线路右边的距离
          style:{
            stroke:'rgb(100,112,121)',
          },
          shape:{
            x1:0,
            y1:0,
            x2:0,//线条长度
            y2:60
          }
         }, {
          type:'line', 
          bottom:0,//线条距离底部的距离
          right:400,//控制线路右边的距离
          style:{
            stroke:'rgb(100,112,121)',
          },
          shape:{
            x1:0,
            y1:0,
            x2:0,//线条长度
            y2:60
          }
        }, {
          type:'line', 
          bottom:0,//线条距离底部的距离
          right:550,//控制线路右边的距离
          style:{
            stroke:'rgb(100,112,121)',
          },
          shape:{
            x1:0,
            y1:0,
            x2:0,//线条长度
            y2:60
          }
        }, {
          type:'line', 
          bottom:0,//线条距离底部的距离
          right:700,//控制线路右边的距离
          style:{
            stroke:'rgb(100,112,121)',
          },
          shape:{
            x1:0,
            y1:0,
            x2:0,//线条长度
            y2:60
          }
        }, {
          type:'line', 
          bottom:0,//线条距离底部的距离
          right:850,//控制线路右边的距离
          style:{
            stroke:'rgb(100,112,121)',
          },
          shape:{
            x1:0,
            y1:0,
            x2:0,//线条长度
            y2:60
          }
        }, {
          type:'line', 
          bottom:0,//线条距离底部的距离
          right:990,//控制线路右边的距离
          style:{
            stroke:'rgb(100,112,121)',
          },
          shape:{
            x1:0,
            y1:0,
            x2:0,//线条长度
            y2:60
          }
        },
        ]
};