大数据可视化大屏实战项目（55）模板【待填充】—HTML+CSS+JS【源码在文末】（可用于比赛项目或者作业参考中🐕🐕🐕）
一，项目概览
☞☞☞☞☞☞项目演示链接：http://59.110.22.223:8080/Data/55/
☞☞☞☞☞☞项目演示链接：http://59.110.22.223:8080/Data/55/
二，运行视频
☞☞☞☞☞☞B站演示视频：
三，部分代码讲解
<!doctype html>
<html>
<head>
<!doctype html>
<html>
<head>
<!--
访问地址：https://paycloud.vip
-->
<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/icon.css" rel="stylesheet">
<link type="text/css" href="css/index.css" rel="stylesheet">
<script type="text/javascript">
document.documentElement.style.fontSize = document.documentElement.clientWidth /768*100 + 'px';
</script>
<script src="js/echarts.min.js"></script>
</head>
<style>
.abc{
}
</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>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<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">
option = {
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="js/jquery-1.11.0.min.js" type="text/javascript"></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>
当然，我很高兴解释你提供的HTML代码。这段代码看起来是用于创建一个网页或仪表板的HTML文档。让我们逐步解释这段代码：
<!doctype html>
<html>
<head>
<!--
访问地址：https://paycloud.vip
-->
<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>
<!-- 头部内容的其余部分，包括CSS和JavaScript链接 -->
</head>
<body>
<div class="bg">
<!-- 网页的主要内容 -->
<div class="title">联心菜市场</div>
<div class="leftMain">
<!-- 左侧主要内容 -->
<!-- 具体内容在这里，包括标题、图表等 -->
</div>
<div class="rightMain">
<!-- 右侧主要内容 -->
<!-- 具体内容在这里，包括标题、图表等 -->
</div>
</div>
<!-- 大屏 -->
<!-- 数字增长累加动画 -->
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></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();
</script>
<!-- 大屏 -->
</body>
</html>
这段代码的主要结构如下：
<!doctype html>: 声明文档类型为HTML5。<html>: HTML文档的根元素。<head>: 包含文档的元信息和引用的外部资源，如CSS和JavaScript文件。<meta>: 提供关于文档的元信息，如字符集、描述和关键词。<title>: 设置网页的标题为"联心菜市场"。<body>: 包含页面的可见内容，包括文本、图像、图表等。<div class="bg">: 一个带有类名为"bg"的<div>元素，可能用于包裹页面的主要内容。
在<body>标签内，有两个主要部分：
-
<div class="title">联心菜市场</div>: 这是一个具有类名"title"的<div>元素，通常用于显示页面的标题或标语。 -
<div class="leftMain">和<div class="rightMain">: 这些是两个具有类名"leftMain"和"rightMain"的<div>元素，可能用于分别显示左侧和右侧的主要内容。根据你的需求，这些部分可能包含标题、图表、数据表格等内容。
在页面底部，有一些JavaScript代码的引用和调用：
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>: 引用了jQuery库的一个版本。<script src="js/jquery.numscroll.js" type="text/javascript" charset="utf-8"></script>: 引用了一个名为"jquery.numscroll.js"的JavaScript文件，它可能用于实现数字增长累加动画。- 最后一个
<script>块包含一些JavaScript代码，它使用jQuery选择器选择元素并调用numScroll()函数，可能是用于实现数字增长动画效果。
总之，这段代码创建了一个网页，其中包含了一些HTML元素、CSS和JavaScript，用于构建一个包含标题、图表和数字增长动画效果的网页或仪表板。根据你的需求，你可以进一步添加和修改内容。
可视化图表的使用技巧
1、柱状图
柱状图中的颜色尽量不要超过3种。
柱状图柱子间的宽度和间隙要是适当。住在太窄，用户的视觉可能会集中在两个柱子之间的负空间
对多个数据系列排序时，最好复合一定的逻辑，用直观的方式引导用户更好的查看数据，此时可以通过升序和降序排列。
2、折线图
折线图连接各点可以使用直线和曲线，这样更美观，数据展示更加清晰
折线的颜色要清晰，尽量不要使用与背景色和坐标轴相近的颜色
折线图中的线条尽量不要超过4条，过多的线条会导致界面混乱，无法阅读。
3、饼图
饼图适合用来展示单一维度数据的占比，要求其数值没有零或者负值，并确保各个分块占比总和为100%。
饼图不适合用于精确数据的比较，因此当各类别数据占比相似时，很难分辨出哪个类别占比比较大。
大多数人的视觉习惯是按照顺时针自上而下的顺序去观察，因此在绘制饼图时建议从12点钟开始沿着顺时针右边的第一个分块绘制饼图最大的数据分块，这样可以有效地强调其重要性
4、散点图
如果一个散点图没有显示变量的任何关系，那么或许该图表类型不是次数据的最佳选择
散点图只有在足够多的数据点并且数据间有相关性时，才能呈现很好的结果。
如果数据包含不同系列，可以给不同系列使用不同的颜色
数据功能图介绍
在大数据的可视化图中，按照数据的作用和功能可以把图分为比较类图、分布类图、流程类图、地图类图、占比类图、区间类图、关联类图、时间类图和趋势类图等。
1、比较类图
比较类图可视化的方法通常是显示值与值之间的不同和相似之处，使用图形的长度、宽度、位置、面积、角度和颜色来比较数值的大小，通常用于展示不同分类间的数值对比一级不同时间点的数据对比。常见的比较类图主要有柱状图、双向柱状图、气泡图、子弹图、色块图、漏斗图和直方图等
2、分布类图
分布类图可视化的方法通常是显示频率，将数据分散在一个区间或分组，并使用图形的为、大小、颜色的渐变程度类表现数据的分布。分布类图通常用于展示连续数据上数值的分布情况。常见的分布类图主要有箱型图、热力图、散点图、分布曲线图、色块图和直方图
3、流程类图
流程类图可视化的方法通常是显示流程流转和流程流量。一般流程都会呈现出多个环节，每个环节之间会有相应的流量关系，因此这类图形可以很好的表示这些流量关系。常见的流程图主要有漏斗图和桑基图
4、地图类图
地图类图可视化的方法是显示地理区域上的数据，并在显示是使用地图作为背景，通过图形的位置来表现数据的地理位置。地图类图通常用来展示数据在不同地理区域上的分布情况。常见的地图类图主要有待气泡的地图和统计地图
5、占比类图
占比类图可视化的范式是显示同一维度上的占比关系。常见的占比类图主要有换图、马赛克图、堆叠面积图、堆叠柱状图和矩形树图
6、区间类图
区间类图可视化的方法是显示同一维度上值的上限和下限之间的差异。区间类图使用图形的大小和位置表示数值的上限和下限，通常用于表示数据在某一分类（时间点）上的最大值和最小值。常见的区间类图主要有仪表盘图和堆叠面积图
7、关联类图
关联类图可视化的方法显示数据之间的相互关系。关联类图使用图形的嵌套和位置表示数据之间的关系，通常用于表示数据之间的前后顺序、父子关系和相关性。常见的关联类图主要有和弦图、桑基图、矩阵树图、树状图和韦恩图
8、时间类图
时间类图可视化的方法显示以时间为特定维度的数据。时间类图使用图形的位置表现出数据在时间深的房补，通常用于表现数据在时间维度上的趋势和变化。常见的实践类图主要有面截图、K线图、卡吉图和螺旋图
9、趋势类图
趋势类图可视化的方式分析数据的变化趋势，趋势类图使用图形的位置表现出数据在连续区域上的分布，通常展示数据在连续区域上的大小变化的规律。常见的趋势类图主要有面积图、K线图、折线图和回归曲线图
四，源码
链接：https://pan.baidu.com/s/1jqdqCsflPwEUeNiWiwHNQA?pwd=nljy
提取码：nljy
创作不易，项目已加密，有偿（—3r—，可修改页面，做实验报告，代码讲解，待上服务器等…）
请私信作者（v）15135757306
注：非白嫖仅为维护服务器，若想白嫖请CSDN私信我（大概率可能时间忙顾不上回复）
若侵权请私信作者下架博客
扫一扫
1362
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
