编程技术

Document

大数据可视化大屏实战项目（36）运营大数据---HTML+CSS+JS【源码在文末】（可用于比赛项目或者作业参考中）

大数据可视化大屏实战项目（36）运营大数据—HTML+CSS+JS【源码在文末】（可用于比赛项目或者作业参考中🐕🐕🐕）

一，项目概览

☞☞☞☞☞☞项目演示链接：http://59.110.22.223:8080/Data/36/

☞☞☞☞☞☞项目演示链接：http://59.110.22.223:8080/Data/36/

image-20230907111943659

二，运行视频

☞☞☞☞☞☞B站演示视频：

三，部分代码讲解

<!DOCTYPE html>
<html lang="en">
<head>
    <!--
        访问地址：https://paycloud.vip

    -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/index.css">
    <title>运营数据</title>
    <script src="js/jquery-2.2.1.min.js"></script>
    <script src="js/rem.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
    <div class="t_container">
        <header class="t_h_bg">
            <span>运营大数据</span>
        </header>
        <main class="t_main">
            <div class="t_box">
                <header class="t_title">
                    <span>本月销售额</span>
                    <span class="t_number">230000.00</span>
                </header>
                <div class="t_list">
                    <div class="t_min">订单量 <i></i></div>
                    <div class="t_min">客流量 100 <i></i></div>
                    <div class="t_min">转换率 8% <i class="down"></i></div>
                </div>
                <div id="chart_1" class="echart" style="width: 100%; height: 2.4rem;"></div>
            </div>
            <div class="t_box">
                <header class="t_title">
                    <span>商品销售统计</span>
                </header>
                <div id="chart_2" class="echart" style="width: 100%; height: 3rem;"></div>
            </div>
            <div class="t_box">
                <header class="t_title">
                    <span>年度销售额走势图</span>
                </header>
                <div id="chart_3" class="echart" style="width: 100%; height: 3rem;"></div>
            </div>
            <div class="t_box">
                <div class="main_table t_btn8">
                    <table>
                        <thead>
                        <tr>
                            <th>销售价格</th>
                            <th>销售市场</th>
                            <th>销售任务</th> 
                            <th>销售量</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>21449</td>
                            <td>26667</td>
                            <td>18248</td>
                            <td>20166</td>
                        </tr>
                        <tr>
                            <td>12227</td>
                            <td>21140</td>
                            <td>18208</td>
                            <td>20115</td>
                        </tr>
                        <tr>
                            <td>14977</td>
                            <td>20505</td>
                            <td>25342</td>
                            <td>20114</td>
                        </tr>
                        <tr>
                            <td>17494</td>
                            <td>19647</td>
                            <td>20227</td>
                            <td>20135</td>
                        </tr>
                        <tr>
                            <td>16493</td>
                            <td>18812</td>
                            <td>20394</td>
                            <td>20124</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </main>
    </div>
</body>

</html>

代码解释如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <!--
        访问地址：https://paycloud.vip
    -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/index.css">
    <title>运营数据</title>
    <script src="js/jquery-2.2.1.min.js"></script>
    <script src="js/rem.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/index.js"></script>
</head>
<body>

这段HTML代码是一个基本的HTML文档结构，它包含了以下几个关键部分：

  1. <!DOCTYPE html>：这是HTML5的文档类型声明，告诉浏览器将会使用HTML5标准来解析页面。

  2. <html lang="en">：这是HTML文档的根元素，lang="en"属性指示页面使用英语作为主要语言。

  3. <head>：这个部分包含了一些元数据和外部资源的链接。让我们逐一解释：

    • <meta charset="UTF-8">：这个元标签指定了文档的字符编码为UTF-8，确保页面能正确显示各种字符和符号。

    • <meta name="viewport" content="width=device-width, initial-scale=1.0">：这个元标签用于移动设备的响应式设计。它告诉浏览器根据设备宽度来调整页面的缩放，确保在不同屏幕上正确显示。

    • <meta http-equiv="X-UA-Compatible" content="ie=edge">：这个元标签设置IE浏览器的兼容性模式，以确保页面在不同版本的IE浏览器上正确渲染。

    • <link rel="stylesheet" href="css/index.css">：这个链接元素引入了一个名为"index.css"的外部样式表，用于定义页面的样式和布局。

    • <title>运营数据</title>：这个元素定义了页面的标题，它会显示在浏览器的标签页上，作为页面的标识。

    • <script>：这些<script>元素引入了外部JavaScript文件，用于在页面中添加交互性和动态功能。其中包括jQuery库、rem.js、echarts.min.js和index.js。

  4. <body>：这是页面的主体部分，包含了页面的实际内容。让我们进一步解释页面的主体内容。

    <div class="t_container">
        <header class="t_h_bg">
            <span>运营大数据</span>
        </header>
        <main class="t_main">
            <div class="t_box">
                <header class="t_title">
                    <span>本月销售额</span>
                    <span class="t_number">230000.00</span>
                </header>
                <div class="t_list">
                    <div class="t_min">订单量 <i></i></div>
                    <div class="t_min">客流量 100 <i></i></div>
                    <div class="t_min">转换率 8% <i class="down"></i></div>
                </div>
                <div id="chart_1" class="echart" style="width: 100%; height: 2.4rem;"></div>
            </div>
            <div class="t_box">
                <header class="t_title">
                    <span>商品销售统计</span>
                </header>
                <div id="chart_2" class="echart" style="width: 100%; height: 3rem;"></div>
            </div>
            <div class="t_box">
                <header class="t_title">
                    <span>年度销售额走势图</span>
                </header>
                <div id="chart_3" class="echart" style="width: 100%; height: 3rem;"></div>
            </div>
            <div class="t_box">
                <div class="main_table t_btn8">
                    <table>
                        <thead>
                        <tr>
                            <th>销售价格</th>
                            <th>销售市场</th>
                            <th>销售任务</th> 
                            <th>销售量</th>
                        </tr>
                        </thead>
                        <tbody>
                        <!-- 此处省略了一些表格数据，可根据实际需要添加 -->
                        </tbody>
                    </table>
                </div>
            </div>
        </main>
    </div>
</body>
</html>

在页面的主体部分，可以看到以下内容：

  1. <div class="t_container">：这个<div>元素是页面内容的容器，用于包装页面的整体结构。

  2. <header class="t_h_bg">：这是页面的顶部标头，包含了一个标题 “运营大数据”。

  3. <main class="t_main">：这是页面的主要内容区域，包含了

四个数据展示框（<div class="t_box">）和一个数据表格。

  1. <div class="t_box">：这是一个数据展示框，包含了以下内容：

    • <header class="t_title">：数据展示框的标题，例如 “本月销售额” 和 “商品销售统计”。

    • <span>：一些文本内容，用于描述数据。

    • <div class="t_list">：一个包含了数据项的列表，例如订单量、客流量和转换率。

    • <div id="chart_1" class="echart" style="width: 100%; height: 2.4rem;"></div>：一个具有ID为 “chart_1” 的<div>元素，用于显示ECharts图表。这个图表的宽度和高度已经在内联样式中设置为100%宽度和2.4rem高度，以确保图表占满整个框。

  2. 类似地，还有两个其他的数据展示框，分别包含了 “商品销售统计” 和 “年度销售额走势图” 的数据以及相应的图表。

  3. <div class="main_table t_btn8">：这是一个包含表格的<div>元素，包括了一个HTML表格，用于展示销售数据。表格包含了<thead>（表头）和<tbody>（表格主体）两个部分。

  4. <table>：HTML表格的开始标签，用于定义一个表格。

  5. <thead>：表格的表头部分，包含了一个表格行（<tr>）和表头单元格（<th>），用于描述每列的内容。

  6. <tbody>：表格的主体部分，包含了多个表格行，每行都包含了销售数据，以<td>（表格数据单元格）的形式呈现。

这段HTML代码主要描述了一个包含运营数据和图表的网页。通过使用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/1T9DUX-JHige-7UMEVFbjEA?pwd=nljy
提取码：nljy

创作不易，项目已加密，有偿（—2.9r—，可修改页面，做实验报告，代码讲解，待上服务器等…）

请私信作者（v）15135757306

注：非白嫖仅为维护服务器，若想白嫖请CSDN私信我（大概率可能时间忙顾不上回复）

若侵权请私信作者下架博客