基于Echarts+HTML5可视化数据大屏展示—某省物流大数据平台

原创

java李杨勇 2021-09-26 09:46:13 ©著作权

文章标签 echarts html5 物流大数据平台 CSS javascript 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者java李杨勇的原创作品，请联系作者获取转载授权，否则将追究法律责任

大数据平台中心
具体数据模块详情
代码目录：

基于Echarts+HTML5可视化数据大屏展示—某省物流大数据平台_html5_02

主要代码实现：

主页HTML布局：

基于Echarts+HTML5可视化数据大屏展示—某省物流大数据平台_javascript_03

基于Echarts+HTML5可视化数据大屏展示—某省物流大数据平台_echarts_04

<div class="header">
<div class="bg_header">
<div class="header_nav fl t_title">
            物流大数据服务平台
</div> 
</div>
</div>

<!--main-->
<div class="data_content">
<div class="data_time">
        温馨提示: 点击模块后跳转至详情页面。        
</div>

<div class="data_main">
<div class="main_left fl">
<div class="left_1 t_btn6" style="cursor: pointer;">
<!--左上边框-->
<div class="t_line_box">
<i class="t_l_line"></i> 
<i class="l_t_line"></i> 
</div> 
<!--右上边框-->
<div class="t_line_box">
<i class="t_r_line"></i> 
<i class="r_t_line"></i> 
</div> 
<!--左下边框-->
<div class="t_line_box">
<i class="l_b_line"></i> 
<i class="b_l_line"></i> 
</div> 
<!--右下边框-->
<div class="t_line_box">
<i class="r_b_line"></i> 
<i class="b_r_line"></i> 
</div> 
<div class="main_title">
<img src="img/t_1.png" alt="">
                  湖南省货运收入
</div>
<div id="chart_1" class="chart" style="width:100%;height: 280px;"></div>
</div>
<div class="left_2" style="cursor: pointer;">
<!--左上边框-->
<div class="t_line_box">
<i class="t_l_line"></i> 
<i class="l_t_line"></i> 
</div> 
<!--右上边框-->
<div class="t_line_box">
<i class="t_r_line"></i> 
<i class="r_t_line"></i> 
</div> 
<!--左下边框-->
<div class="t_line_box">
<i class="l_b_line"></i> 
<i class="b_l_line"></i> 
</div> 
<!--右下边框-->
<div class="t_line_box">
<i class="r_b_line"></i> 
<i class="b_r_line"></i> 
</div> 
<div class="main_title">
<img src="img/t_2.png" alt="">
                    湖南省地图
</div>
<div id="chart_2" class="chart t_btn9" style="width:100%;height: 280px;"></div>
</div>
</div>
<div class="main_center fl">
<div class="center_text">
<!--左上边框-->
<div class="t_line_box">
<i class="t_l_line"></i> 
<i class="l_t_line"></i> 
</div> 
<!--右上边框-->
<div class="t_line_box">
<i class="t_r_line"></i> 
<i class="r_t_line"></i> 
</div> 
<!--左下边框-->
<div class="t_line_box">
<i class="l_b_line"></i> 
<i class="b_l_line"></i> 
</div> 
<!--右下边框-->
<div class="t_line_box">
<i class="r_b_line"></i> 
<i class="b_r_line"></i> 
</div> 
<div class="main_title">
<img src="img/t_3.png" alt="">
                    中国地图
</div>
<div id="chart_map" style="width:100%;height:610px;"></div>
</div>
</div>

</table>
</div>
</div>
</div>
</div>

CSS样式文件

   .t_title{
width: 100%;
height: 100%;
text-align: center;
font-size: 2.5em;
line-height: 80px;
color: #fff;
        }
#chart_map{
cursor: pointer;
        }
.t_show{
position: absolute;
top: 0;
right: 0;
border-radius: 2px;
background: #2C58A6;
padding: 2px 5px;
color: #fff;
cursor: pointer;
        }