Recently, I was writing Kanban and encountered such a requirement: the effect diagram is as follows:
Obviously, it needs to be realized by rendering and traversing:
Go directly to the code:
1. htmlCode
<div class="content">
<h1 class="onh">招聘需求满足率</h1>
<div id="myChart2"></div>
</div>
2. jsCode
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 code
.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. The above style will not take effect - it needs ::v-deepto be implemented at this time
The html style rendered circularly in vue does not take effect. You can increase the scope of the style by adding ::v-deep to the style in the style
Wrap the top csslayer:
::v-deep{
//css样式
}
Finish! ! ! A lot of accumulation, a lot of harvest!