最近在写看板，遇到一个这样的需求：效果图如下：

很显然，需要通过渲染遍历的方式来实现：

直接上代码：

1.html代码

<div class="content">
  <h1 class="onh">招聘需求满足率</h1>
  <div id="myChart2"></div>
</div>

2.js代码

 let typeArr = [
        '集团',
        'pcb自营',
        'pcb平台',
        'pcba',
        '捷多邦',
        '精密金属',
        '信丰',
        '一体化',
      ];
let jobHtml = `<div class="lineCls" style="margin-bottom:10px;">
  <span class="leftWrap spanTextCls"> 需求人数 </span>
   <span class="rightWrap spanTextCls"> 到岗人数 </span>
 </div>`;
typeArr.forEach((item, index) => {
    
    
	jobHtml += `<div class="lineCls">
     <span class="leftWrap">
       <span class="spanTextCls">50</span>
       <span class="left" style="width: 80%"></span>
     </span>
     <span class="rightWrap">
       <span class="right" style="width: 100%"></span>
       <span class="spanTextRightCls">20</span>
     </span>
   </div>
   <div class="lineCls">
     <span class="leftWrap">
       <span class="spanTextCls">${
      
      item}自营</span>
     </span>
     <span class="rightWrap">
       <span class="spanTextRightCls">40%</span>
     </span>
   </div>`;
$('#myChart2').html(jobHtml);

3.css代码

.content .bottomCls {
    
    
    display: flex;
  }
  .content .bottomCls > div {
    
    
    width: 16.6%;
    height: 100%;
  }
  .lineCls {
    
    
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    box-sizing: border-box;
    font-size: 13px;
  }
  .lineCls > span {
    
    
    flex: 1;
  }
  .leftWrap {
    
    
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .leftWrap.spanTextCls {
    
    
    justify-content: flex-start;
  }
  .rightWrap.spanTextCls {
    
    
    justify-content: flex-end;
    color: #26c766;
  }
  .leftWrap .left {
    
    
    height: 14px;
    background: #f90;
  }
  .rightWrap .right {
    
    
    height: 14px;
    background: #1ec695;
  }
  .rightWrap {
    
    
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .spanTextCls {
    
    
    padding: 0 10px;
    color: #f90;
  }
  .spanTextRightCls {
    
    
    padding: 0 10px;
    color: #1ec695;
  }
  .onh {
    
    
    font-size: 20px;
    color: #f90;
    font-weight: bold;
    border-left: 3px solid #f90;
    text-indent: 20px;
    margin-top: 10px;
    margin-left: 20px;
  }

4.上面的样式不会生效的——此时需要使用::v-deep来实现

vue 中循环渲染的html 样式不生效，通过给style中的样式添加 ::v-deep 来提高样式的作用域即可

上面的css外面包裹一层：

::v-deep{
    
    
	//css样式
}

完成！！！多多积累，多多收获！