echarts带table表格展示

 先看效果

 

 整体思路就是用graphic这个属性去画线 表格里的值用的定位写的 

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
          }
        },
        ]
};