核心属性
list-style-type: none 去除列表元素前面的小黑点
left: 100%; bottom: 0 使每一条线段紧接着前一条线段显示
width + transform: rotate( ) 设置线段的长度的角度
content: '+' attr(data-valor) '%' 显示HTML标签属性为data-valor的值
-
<div class="line-chart-block block">
-
<div class="line-chart">
-
<div class='grafico'>
-
<ul class='eje-y'>
-
<li data-ejeY='30'></li>
-
<li data-ejeY='20'></li>
-
<li data-ejeY='10'></li>
-
<li data-ejeY='0'></li>
-
</ul>
-
<ul class='eje-x'>
-
<li>四月</li>
-
<li>五月</li>
-
<li>六月</li>
-
</ul>
-
<span data-valor='25'>
-
<span data-valor='8'>
-
<span data-valor='13'>
-
<span data-valor='5'>
-
<span data-valor='23'>
-
<span data-valor='12'>
-
<span data-valor='15'></span>
-
</span>
-
</span>
-
</span>
-
</span>
-
</span>
-
</span>
-
</div>
-
</div>
-
<ul class="time-lenght horizontal-list">
-
<li><a class="time-lenght-btn" href="#14">周线</a></li>
-
<li><a class="time-lenght-btn" href="#15">月线</a></li>
-
<li><a class="time-lenght-btn" href="#16">年线</a></li>
-
</ul>
-
<ul class="month-data clear">
-
<li>
-
<p>四月<span class="scnd-font-color"> 2019</span></p>
-
<p><span class="entypo-plus increment"> </span>21<sup>%</sup></p>
-
</li>
-
<li>
-
<p>五月<span class="scnd-font-color"> 2019</span></p>
-
<p><span class="entypo-plus increment"> </span>48<sup>%</sup></p>
-
</li>
-
<li>
-
<p>六月<span class="scnd-font-color"> 2019</span></p>
-
<p><span class="entypo-plus increment"> </span>35<sup>%</sup></p>
-
</li>
-
</ul>
-
</div>
-
* {
-
box-sizing: border-box;
-
}
-
a {
-
text-decoration: none;
-
font-size: 15px;
-
}
-
h1, h2, p, a, span{
-
color: #fff;
-
}
-
.scnd-font-color {
-
color: #9099b7;
-
}
-
.block {
-
width: 300px;
-
margin: 25px auto;
-
background: #394264;
-
border-radius: 5px;
-
overflow: hidden;
-
}
-
ul {
-
list-style-type: none;
-
margin: 0;
-
padding-left: 0;
-
}
-
.line-chart {
-
height: 200px;
-
background: #11a8ab;
-
}
-
.horizontal-list {
-
margin: 0;
-
padding: 0;
-
list-style-type: none;
-
}
-
.horizontal-list li {
-
float: left;
-
}
-
.time-lenght {
-
padding-top: 22px;
-
padding-left: 38px;
-
overflow: hidden;
-
}
-
.time-lenght-btn {
-
display: block;
-
width: 70px;
-
line-height: 32px;
-
margin-right: 5px;
-
background: #50597b;
-
border-radius: 5px;
-
font-size: 14px;
-
text-align: center;
-
transition: background .3s;
-
}
-
.time-lenght-btn:hover {
-
text-decoration: none;
-
background: #e64c65;
-
}
-
.grafico {
-
position: relative;
-
width: 100%;
-
height: 100%;
-
padding: 2rem 1rem 1rem;
-
color: #fff;
-
font-size: 80%;
-
}
-
.grafico span {
-
display: block;
-
position: absolute;
-
bottom: 3rem;
-
left: 2rem;
-
height: 0;
-
border-top: 2px solid;
-
transform-origin: left center;
-
}
-
.grafico span > span {
-
left: 100%; bottom: 0;
-
}
-
[data-valor='25'] {width: 75px; transform: rotate(-45deg);}
-
[data-valor='8'] {width: 24px; transform: rotate(65deg);}
-
[data-valor='13'] {width: 39px; transform: rotate(-45deg);}
-
[data-valor='5'] {width: 15px; transform: rotate(50deg);}
-
[data-valor='23'] {width: 69px; transform: rotate(-70deg);}
-
[data-valor='12'] {width: 36px; transform: rotate(75deg);}
-
[data-valor='15'] {width: 45px; transform: rotate(-45deg);}
-
[data-valor]:before {
-
content: '';
-
position: absolute;
-
right: -4px;
-
bottom: -3px;
-
padding: 4px;
-
background: #fff;
-
border-radius: 50%;
-
}
-
[data-valor='23']:after {
-
content: '+' attr(data-valor) '%';
-
position: absolute;
-
right: -2.7rem;
-
top: -1.7rem;
-
padding: .3rem .5rem;
-
background: #50597B;
-
border-radius: .5rem;
-
transform: rotate(45deg);
-
}
-
[class^='eje-'] {
-
position: absolute;
-
left: 0;
-
bottom: 0rem;
-
width: 100%;
-
padding: 1rem 1rem 0 2rem;
-
height: 80%;
-
}
-
.eje-x {
-
height: 2.5rem;
-
}
-
.eje-y li {
-
height: 25%;
-
border-top: 1px solid #777;
-
}
-
[data-ejeY]:before {
-
content: attr(data-ejeY);
-
position: relative;
-
display: inline-block;
-
left: -2.5rem;
-
top: -.5rem;
-
width: 2rem;
-
text-align: right;
-
line-height: 0;
-
}
-
.eje-x li {
-
width: 33%;
-
float: left;
-
text-align: center;
-
}
-
.month-data {
-
padding-top: 28px;
-
}
-
.month-data p {
-
display: inline-block;
-
margin: 0;
-
padding: 0 25px 15px;
-
font-size: 16px;
-
}
-
.month-data p:last-child {
-
padding: 0 25px;
-
float: right;
-
font-size: 15px;
-
}
-
.increment {
-
color: #e64c65;
-
}
以上所述就是小编给大家介绍的《统计图表之线状图》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 统计图表之柱状图
- 用 Matplotlib 库生成动画图表
- 一起撸个环形 Android 图表
- R语言图表排版之一页多图
- android 中心区域选中图表 WheelChart
- 数据可视化—Echarts图表应用
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。