前言
🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。
本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
文章目录
- 前言
- 一、Echart是什么
- 二、ECharts入门教程
- 三、作品演示
- 四、代码实现
- 1.HTML
- 2.CSS
- 3.JavaScript
- 五、更多干货
一、Echart是什么
ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器(IE8/9/10/11，Chrome，Firefox，Safari等)，底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
二、ECharts入门教程
5 分钟上手ECharts
三、作品演示
四、代码实现
1.HTML
<!doctype html>
<html>
<head>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>联心菜市场</title>
<link type="text/css" href="css/public.css" rel="stylesheet">
<link type="text/css" href="css/index.css" rel="stylesheet">
<script type="text/javascript">.documentElement.style.fontSize = document.documentElement.clientWidth / 768 * 100 + 'px';</script>
<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
</head>
<style>
</style>
<body>
<div class="bg">
<div class="title">联心菜市场</div>
<div class="leftMain">
<div class="leftMain_top">
<div class="leftMain_topIn">
<ul>
<li>
<div class="liIn">
<h3>这里是标题1</h3>
<p class="shu"><span class="shu1">6890.69</span><i>元</i></p>
<div class="zi"><span class="span1">小标题：文字</span><span>小标题：文字</span></div>
<span class="border_bg_leftTop"></span>
<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>
<span class="border_bg_rightBottom"></span>
</div>
</li>
<li>
<div class="liIn">
<h3>这里是标题2</h3>
<p class="shu"><span class="shu2">6090.99</span><i>元</i></p>
<div class="zi"><span class="span1">小标题：文字</span><span>小标题：文字</span></div>
<span class="border_bg_leftTop"></span>
<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>
<span class="border_bg_rightBottom"></span>
</div>
</li>
<li>
<div class="liIn">
<h3>这里是标题3</h3>
<p class="shu"><span class="shu3">2890.39</span><i>元</i></p>
<div class="zi"><span class="span1">小标题：文字</span><span>小标题：文字</span></div>
<span class="border_bg_leftTop"></span>
<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>
<span class="border_bg_rightBottom"></span>
</div>
</li>
<li>
<div class="liIn">
<h3>这里是标题4</h3>
<p class="shu"><span class="shu4">7590.15</span><i>元</i></p>
<div class="zi"><span class="span1">小标题：文字</span><span>小标题：文字</span></div>
<span class="border_bg_leftTop"></span>
<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>
<span class="border_bg_rightBottom"></span>
</div>
</li>
</ul>
</div>
</div>
<div class="leftMain_middle">
<div class="leftMain_middle_left">
<div class="leftMain_middle_leftIn">
<h3>这里是标题</h3>
<div class="biaoge" style="width:100%; height:25vh" id="chartmain"></div>
<script type="text/javascript">//window.onload = function () {
//指定图表的配置项和数据
var dataAxis = ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日'];
var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 200];
var yMax = 500;
var dataShadow = [];
for (var i = 0; i < data.length; i++) {
dataShadow.push(yMax);
}
option = {
title: {
text: '',
subtext: ''
},
grid: {
x: 40,
y: 40,
x2: 20,
y2: 20,
},
xAxis: {
data: dataAxis,
axisLabel: {
/*inside: true,*/
interval: 0,
textStyle: {
color: '#fff',
fontSize: 12
}
},
axisTick: {
show: false,
},
axisLine: {
show: true,
symbol: ['none', 'arrow'],
symbolOffset: 12,
lineStyle: {
color: '#fff',
}
},
z: 10
},
yAxis: {
type: 'value',
name: '单位：元',
axisLine: {
show: true,
symbol: ['none', 'arrow'],
symbolOffset: 12,
lineStyle: {
color: '#fff',
}
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#fff',
fontSize: 12
}
}
},
dataZoom: [{
type: 'inside'
}],
series: [{ // For shadow
type: 'bar',
itemStyle: {
color: 'rgba(0,0,0,0.05)'
},
barGap: '-100%',
barCategoryGap: '40%',
data: dataShadow,
animation: false
},
{
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, [{
offset: 0,
color: '#0efdff'
},
{
offset: 0.5,
color: '#188df0'
},
{
offset: 1,
color: '#188df0'
}
]
)
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, [{
offset: 0,
color: '#2378f7'
},
{
offset: 0.7,
color: '#2378f7'
},
{
offset: 1,
color: '#0efdff'
}
]
)
}
},
data: data
}
]
};
// Enable data zoom when user click bar.
/*var zoomSize = 6;
myChart.on('click', function (params) {
console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
myChart.dispatchAction({
type: 'dataZoom',
startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
});
});*/
//获取dom容器
var myChart = echarts.init(document.getElementById('chartmain'));
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//};</script>
<span class="border_bg_leftTop"></span>
<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>
<span class="border_bg_rightBottom"></span>
</div>
</div>
<div class="leftMain_middle_right">
<div class="leftMain_middle_rightIn">
<h3>这里是标题</h3>
<div class="biaoge biaoge_pai" style="width:100%; height:25vh">
<div class="biaoge_paiIn">
<ul>
<li>
<div class="liIn">
<div class="liIn_left"><span class="bot"></span><span class="zi">第一名</span></div>
<div class="liIn_line">
<div class="line_lineIn" style="width:98.5%;"></div>
</div>
<p class="num">98.5%</p>
</div>
</li>
<li>
<div class="liIn liIn2">
<div class="liIn_left"><span class="bot"></span><span class="zi">第二名</span></div>
<div class="liIn_line">
<div class="line_lineIn" style="width:88.5%;"></div>
</div>
<p class="num">88.5%</p>
</div>
</li>
<li>
<div class="liIn liIn3">
<div class="liIn_left"><span class="bot"></span><span class="zi">第三名</span></div>
<div class="liIn_line">
<div class="line_lineIn" style="width:68.5%;"></div>
</div>
<p class="num">68.5%</p>
</div>
</li>
<li>
<div class="liIn liIn4">
<div class="liIn_left"><span class="bot"></span><span class="zi">第四名</span></div>
<div class="liIn_line">
<div class="line_lineIn" style="width:40.5%;"></div>
</div>
<p class="num">40.5%</p>
</div>
</li>
<li>
<div class="liIn liIn5">
<div class="liIn_left"><span class="bot"></span><span class="zi">第五名</span></div>
<div class="liIn_line">
<div class="line_lineIn" style="width:22.5%;"></div>
</div>
<p class="num">22.5%</p>
</div>
</li>
<li>
<div class="liIn liIn6">
<div class="liIn_left"><span class="bot"></span><span class="zi">第六名</span></div>
<div class="liIn_line">
<div class="line_lineIn" style="width:10.5%;"></div>
</div>
<p class="num">10.5%</p>
</div>
</li>
</ul>
</div>
</div>
<span class="border_bg_leftTop"></span>
<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>
<span class="border_bg_rightBottom"></span>
</div>
</div>
</div>
<div class="leftMain_middle">
<div class="leftMain_middle_left">
<div class="leftMain_middle_leftIn">
<h3>这里是标题</h3>
<div class="biaoge" style="width:100%; height:25vh" id="chartmain_zhe"></div>
<script type="text/javascript">//window.onload = function (){
//指定图表的配置项和数据
option = {
title: {
text: ''
},
tooltip: {
trigger: 'axis'
},
legend: {
textStyle: {
color: '#fff',
fontSize: 12,
},
right: '10%',
data: ['折线一', '折线二']
},
grid: {
x: 40,
y: 40,
x2: 20,
y2: 20,
},
toolbox: {
feature: {
//saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {
/*inside: true,*/
interval: 0,
textStyle: {
color: '#fff',
fontSize: 12
}
},
axisTick: {
show: false,
},
axisLine: {
show: true,
symbol: ['none', 'arrow'],
symbolOffset: 12,
lineStyle: {
color: '#fff',
}
},
data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00']
},
yAxis: {
type: 'value',
axisLine: {
show: true,
symbol: ['none', 'arrow'],
symbolOffset: 12,
lineStyle: {
color: '#fff',
}
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#fff',
fontSize: 12
}
}
},
series: [{
name: '折线一',
type: 'line',
stack: '总量',
data: [280, 102, 191, 134, 390, 230, 210],
itemStyle: {
normal: {
color: "#0efdff", //折线点的颜色
lineStyle: {
color: "#0efdff", //折线的颜色
width: 2,
}
},
}
},
{
name: '折线二',
type: 'line',
stack: '总量',
data: [100, 132, 131, 234, 290, 330, 110]
},
]
};
//获取dom容器
var myChart = echarts.init(document.getElementById('chartmain_zhe'));
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//};</script>
<span class="border_bg_leftTop"></span>
<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>
<span class="border_bg_rightBottom"></span>
</div>
</div>
<div class="leftMain_middle_right">
<div class="leftMain_middle_rightIn">
<h3>这里是标题</h3>
<div class="biaoge biaoge_bi" style="width:100%; height:25vh">
<ul>
<li>
<div class="liIn">
<p class="shu shu1">23</p>
<p class="zi">今日收益比例</p>
</div>
</li>
<li>
<div class="liIn">
<p class="shu shu2">107</p>
<p class="zi">本月收益比例</p>
</div>
</li>
<li>
<div class="liIn">
<p class="shu shu3">107</p>
<p class="zi">历史收益比例</p>
</div>
</li>
<li>
<div class="liIn">
<p class="shu shu4">23</p>
<p class="zi">今日收益比例</p>
</div>
</li>
<li>
<div class="liIn">
<p class="shu shu5">23</p>
<p class="zi">本月收益比例</p>
</div>
</li>
<li>
<div class="liIn">
<p class="shu shu6">23</p>
<p class="zi">历史收益比例</p>
</div>
</li>
</ul>
</div>
<span class="border_bg_leftTop"></span>
<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>
<span class="border_bg_rightBottom"></span>
</div>
</div>
</div>
</div>
<div class="rightMain">
<div class="rightMain_top">
<div class="rightMain_topIn">
<h3>这里是标题</h3>
<div class="biaoge" style="width:100%; height:30vh" id="chartmain_bing"></div>
<script type="text/javascript">= {
title: {
text: '数据情况统计',
subtext: '',
left: 'right',
textStyle: {
color: '#fff',
fontSize: 12
}
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
// orient: 'vertical',
// top: 'middle',
type: 'scroll',
orient: 'vertical',
right: 10,
top: 40,
bottom: 20,
left: 'right',
data: ['西凉', '益州', '兖州', '荆州', '幽州'],
textStyle: {
color: '#fff',
fontSize: 12
}
},
grid: {
x: '-10%',
y: 40,
x2: 20,
y2: 20,
},
color: ['#09d0fb', '#f88cfb', '#95f8fe', '#f9f390', '#ecfeb7'],
series: [{
type: 'pie',
radius: '65%',
center: ['50%', '50%'],
selectedMode: 'single',
data: [{
value: 1548,
name: '幽州',
},
{
value: 535,
name: '荆州'
},
{
value: 510,
name: '兖州'
},
{
value: 634,
name: '益州'
},
{
value: 735,
name: '西凉'
}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
//获取dom容器
var myChart = echarts.init(document.getElementById('chartmain_bing'));
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);</script>
<span class="border_bg_leftTop"></span>
<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>
<span class="border_bg_rightBottom"></span>
</div>
</div>
<div class="rightMain_bottom">
<div class="rightMain_bottomIn">
<h3>这里是标题</h3>
<div class="biaoge biaoge_list" style="width:100%; height:36vh">
<div class="biaoge_listIn">
<ul class="ul_title">
<li>用户</li>
<li>类型号</li>
<li>类别一</li>
<li>类别二</li>
<li>类别三</li>
</ul>
<div class="ul_list">
<div class="ul_listIn">
<ul class="ul_con">
<li>张三</li>
<li>11</li>
<li>类别一</li>
<li>类别二</li>
<li>类别三</li>
</ul>
<ul class="ul_con">
<li>张三</li>
<li>12</li>
<li>类别一</li>
<li>类别二</li>
<li>类别三</li>
</ul>
<ul class="ul_con">
<li>张三</li>
<li>13</li>
<li>类别一</li>
<li>类别二</li>
<li>类别三</li>
</ul>
<ul class="ul_con">
<li>张三</li>
<li>14</li>
<li>类别一</li>
<li>类别二</li>
<li>类别三</li>
</ul>
<ul class="ul_con">
<li>张三</li>
<li>15</li>
<li>类别一</li>
<li>类别二</li>
<li>类别三</li>
</ul>
<ul class="ul_con">
<li>张三</li>
<li>16</li>
<li>类别一</li>
<li>类别二</li>
<li>类别三</li>
</ul>
<ul class="ul_con">
<li>张三</li>
<li>11</li>
<li>类别一</li>
<li>类别二</li>
<li>类别三</li>
</ul>
<ul class="ul_con">
<li>张三</li>
<li>12</li>
<li>类别一</li>
<li>类别二</li>
<li>类别三</li>
</ul>
<ul class="ul_con">
<li>张三</li>
<li>13</li>
<li>类别一</li>
<li>类别二</li>
<li>类别三</li>
</ul>
<ul class="ul_con">
<li>张三</li>
<li>14</li>
<li>类别一</li>
<li>类别二</li>
<li>类别三</li>
</ul>
<ul class="ul_con">
<li>张三</li>
<li>15</li>
<li>类别一</li>
<li>类别二</li>
<li>类别三</li>
</ul>
<ul class="ul_con">
<li>张三</li>
<li>16</li>
<li>类别一</li>
<li>类别二</li>
<li>类别三</li>
</ul>
</div>
</div>
</div>
</div>
<span class="border_bg_leftTop"></span>
<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>
<span class="border_bg_rightBottom"></span>
</div>
</div>
</div>
<div style="clear:both;"></div>
</div>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/jquery.numscroll.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">$(".shu1").numScroll();
$(".shu2").numScroll();
$(".shu3").numScroll();
$(".shu4").numScroll();
$(".shu5").numScroll();
$(".shu6").numScroll();
/*$(".num2").numScroll({
time:5000
});*/</script>
</body>
</html>
2.CSS
@charset "UTF-8";
.bg {
margin: 0 auto;
width: 100%;
min-height: 100vh;
background-repeat: no-repeat;
background-size: cover;
padding-top: 0;
padding: 0 .2rem;
background-color: #29292f
}
.title {
width: 100%;
font-size: .12rem;
line-height: .3rem;
color: #0efdff;
text-align: center;
font-weight: 700
}
.border_bg_leftTop {
position: absolute;
left: -.008rem;
top: -.04rem;
width: .37rem;
height: .05rem;
display: block;
background: #29292f url(../images/title_left_bg.png) no-repeat;
background-size: cover
}
.border_bg_rightTop {
position: absolute;
right: -.01rem;
top: -.01rem;
width: .1rem;
height: .1rem;
display: block;
background-size: cover
}
.border_bg_leftBottom {
position: absolute;
left: -.008rem;
bottom: -.008rem;
width: .1rem;
height: .1rem;
display: block;
background-size: cover
}
.border_bg_rightBottom {
position: absolute;
right: -.01rem;
bottom: -.01rem;
width: .08rem;
height: .08rem;
display: block;
background: url(../images/title_right_bg.png) no-repeat;
background-size: cover
}
.leftMain {
width: 75%;
float: left;
padding-right: .1rem;
padding-top: .1rem
}
.rightMain {
width: 25%;
float: left;
padding-top: .1rem
}
.leftMain_top {
width: 100%;
padding-bottom: .1rem
}
.leftMain_top ul {
display: flex;
display: -webkit-flex
}
.leftMain_top ul li {
float: left;
width: 25%;
padding-right: .1rem
}
.leftMain_top ul li:last-child {
padding: 0
}
.leftMain_top ul li .liIn {
border: .008rem solid rgba(14, 253, 255, .5);
width: 100%;
min-height: 60px;
position: relative;
padding: .08rem .05rem
}
.leftMain_top ul li .liIn h3 {
font-size: .08rem;
color: #fff;
margin-bottom: .05rem
}
.leftMain_top ul li .liIn .shu {
font-size: .12rem;
color: #0efdff;
font-family: dig;
margin-bottom: .02rem
}
.leftMain_top ul li .liIn .shu i {
font-size: .04rem;
margin-left: .06rem;
font-style: normal
}
.leftMain_top ul li .liIn .zi {
font-size: .04rem;
color: #fff;
position: relative;
z-index: 10
}
.leftMain_top ul li .liIn .zi .span1 {
margin-right: .1rem
}
.leftMain_middle {
width: 100%;
padding-bottom: .1rem;
display: flex;
display: -webkit-flex
}
.leftMain_middle .leftMain_middle_left {
width: 60%;
padding-right: .1rem
}
.leftMain_middle .leftMain_middle_left .leftMain_middle_leftIn {
border: .008rem solid rgba(14, 253, 255, .5);
width: 100%;
min-height: 60px;
position: relative;
padding: .08rem .05rem
}
.leftMain_middle .leftMain_middle_left .leftMain_middle_leftIn h3 {
font-size: .08rem;
color: #fff;
margin-bottom: .05rem
}
.leftMain_middle .leftMain_middle_left .leftMain_middle_leftIn .biaoge {
min-height: 200px
}
.leftMain_middle .leftMain_middle_right {
width: 40%
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn {
border: .008rem solid rgba(14, 253, 255, .5);
width: 100%;
min-height: 60px;
position: relative;
padding: .08rem .05rem
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn h3 {
font-size: .08rem;
color: #fff;
margin-bottom: .05rem
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge {
min-height: 200px
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai {
width: 100%;
overflow: hidden
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn {
display: flex;
display: -webkit-flex;
align-items: center;
color: #fff;
font-size: .06rem;
height: .18rem
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_left {
width: 25%;
position: relative;
padding-left: .14rem
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_left .bot {
width: .08rem;
height: .08rem;
background: #f78cf3;
border-radius: 1000px;
display: block;
position: absolute;
left: .02rem;
top: 0;
bottom: 0;
margin: auto 0
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn2 .liIn_left .bot {
background: #e7feb8
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn3 .liIn_left .bot {
background: #fdea8a
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn4 .liIn_left .bot {
background: #8ff9f8
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn5 .liIn_left .bot {
background: #d890fa
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn6 .liIn_left .bot {
background: #05d1fc
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_left zi {}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_line {
width: 58%;
height: .08rem;
background: rgba(255, 255, 255, .5);
border-radius: 2000px
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_line .line_lineIn {
width: 100%;
height: .08rem;
background: #f78cf3;
border-radius: 100px;
-webkit-animation: widthMove1 2s ease-in-out
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn2 .liIn_line .line_lineIn {
background: #e7feb8;
-webkit-animation: widthMove2 2s ease-in-out
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn3 .liIn_line .line_lineIn {
background: #fdea8a;
-webkit-animation: widthMove3 2s ease-in-out
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn4 .liIn_line .line_lineIn {
background: #8ff9f8;
-webkit-animation: widthMove4 2s ease-in-out
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn5 .liIn_line .line_lineIn {
background: #d890fa;
-webkit-animation: widthMove5 2s ease-in-out
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn6 .liIn_line .line_lineIn {
background: #05d1fc;
-webkit-animation: widthMove6 2s ease-in-out
}
@-webkit-keyframes {
0% {
width: 0%
}
100% {
width: 98.5%
}
}
@-webkit-keyframes {
0% {
width: 0%
}
100% {
width: 88.5%
}
}
@-webkit-keyframes {
0% {
width: 0%
}
100% {
width: 68.5%
}
}
@-webkit-keyframes {
0% {
width: 0%
}
100% {
width: 40.5%
}
}
@-webkit-keyframes {
0% {
width: 0%
}
100% {
width: 22.5%
}
}
@-webkit-keyframes {
0% {
width: 0%
}
100% {
width: 10.5%
}
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .num {
width: 17%;
font-family: dig;
padding-left: .02rem
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_bi ul {
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
width: 100%
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_bi ul li {
width: 33.3%;
text-align: center;
margin-bottom: .05rem
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_bi ul li .shu {
font-size: .14rem;
color: #0efdff;
font-family: dig;
padding: .12rem 0 .02rem;
font-weight: 400
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_bi ul li .zi {
font-size: .06rem;
color: #fff
}
.rightMain .rightMain_top {
width: 100%;
padding-bottom: .1rem
}
.rightMain .rightMain_topIn {
border: .008rem solid rgba(14, 253, 255, .5);
width: 100%;
min-height: 60px;
position: relative;
padding: .08rem .05rem
}
.rightMain .rightMain_topIn h3 {
font-size: .08rem;
color: #fff;
margin-bottom: .05rem
}
.rightMain .rightMain_topIn .biaoge {
min-height: 200px
}
.rightMain .rightMain_bottom {
width: 100%
}
.rightMain .rightMain_bottomIn {
border: .008rem solid rgba(14, 253, 255, .5);
width: 100%;
min-height: 60px;
position: relative;
padding: .08rem .05rem
}
.rightMain .rightMain_bottomIn h3 {
font-size: .08rem;
color: #fff;
margin-bottom: .05rem
}
.rightMain .rightMain_bottomIn .biaoge {
min-height: 200px
}
.rightMain .rightMain_bottomIn .biaoge_list {
overflow: hidden;
position: relative
}
.rightMain .rightMain_bottomIn .biaoge_list .biaoge_listIn .ul_list {
overflow: hidden;
position: relative
}
.rightMain .rightMain_bottomIn .biaoge_list .biaoge_listIn .ul_listIn {
-webkit-animation: 14s gundong linear infinite normal;
animation: 14s gundong linear infinite normal;
position: relative
}
@keyframes {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
100% {
-webkit-transform: translate3d(0, -30vh, 0);
transform: translate3d(0, -30vh, 0)
}
}
.rightMain .rightMain_bottomIn .biaoge_list ul {
display: flex;
display: -webkit-flex;
width: 100%
}
.rightMain .rightMain_bottomIn .biaoge_list .ul_title {
background: linear-gradient(left, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
background: -ms-linear-gradient(left, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
background: -moz-linear-gradient(left, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1))
}
.rightMain .rightMain_bottomIn .biaoge_list .ul_con {
border-bottom: .008rem solid rgba(14, 253, 255, .5)
}
.rightMain .rightMain_bottomIn .biaoge_list ul li {
width: 20%;
text-align: center;
color: #fff;
font-size: .06rem;
height: .2rem;
line-height: .2rem
}
.rightMain .rightMain_bottomIn .biaoge_list ul li:frist-child {
text-align: left
}
3.JavaScript
(function($) {
function isInt(num) {
//作用:是否为整数
//返回:true是 false否
var res = false;
try {
if (String(num).indexOf(".") == -1 && String(num).indexOf(",") == -1) {
res = parseInt(num) % 1 === 0 ? true : false;
}
} catch (e) {
res = false;
}
return res;
}
function isFloat(num) {
//作用:是否为小数
//返回:小数位数(-1不是小数)
var res = -1;
try {
if (String(num).indexOf(".") != -1) {
var index = String(num).indexOf(".") + 1; //获取小数点的位置
var count = String(num).length - index; //获取小数点后的个数
if (index > 0) {
res = count;
}
}
} catch (e) {
res = -1;
}
return res;
}
$.fn.numScroll = function(options) {
var settings = $.extend({
'time': 1500,
'delay': 0
}, options);
return this.each(function() {
var $this = $(this);
var $settings = settings;
var num = $this.attr("data-num") || $this.text(); //实际值
var temp = 0; //初始值
$this.text(temp);
var numIsInt = isInt(num);
var numIsFloat = isFloat(num);
var step = (num / $settings.time) * 10; //步长
setTimeout(function() {
var numScroll = setInterval(function() {
if (numIsInt) {
$this.text(Math.floor(temp));
} else if (numIsFloat != -1) {
$this.text(temp.toFixed(numIsFloat));
} else {
$this.text(num);
clearInterval(numScroll);
return;
}
temp += step;
if (temp > num) {
$this.text(num);
clearInterval(numScroll);
}
}, 1);
}, $settings.delay);
});
};
})(jQuery);
