通过css和html构建能耗数据分析树状图

介绍

本文我给大家介绍如何使用CSS和HTML构造一个树状结构的树状图。树状结构我们在很多项目中要应用，如能耗分析、公司组织架构图、无限级分类等等。效果图如下：

html部分构建

树状图的数据结构是树形结构，我们通过嵌套ul和li来实现页面结构：

     <div class="tree"><ul><li><div class="box"><div class="node node-type1">综合能效</div></div><ul class="line-large"><li class="line-large"><div class="box"><div class="node node-type2">能耗指标</div></div><ul class="line-large"><li><div class="box"><div class="node node-type3"><div class="node-title1">总消耗</br>(t 标煤)</div><div class="node-target1">120</div></div></div><ul><li><div class="box"><div class="node node-type4"><div class="node-title1">供冷系统</br>(t 标煤)</div><div class="node-target1">40</div></div><div class="node node-type4 node-footer"><div class="node-target2">45%</div></div></div></li><li><div class="box"><div class="node node-type4"><div class="node-title1">供热系统</br>(t 标煤)</div><div class="node-target1">35</div></div><div class="node node-type4 node-footer"><div class="node-target2">65%</div></div></div></li><li><div class="box"><div class="node node-type4"><div class="node-title1">三联供系统</br>(t 标煤)</div><div class="node-target1">36</div></div><div class="node node-type4 node-footer"><div class="node-target2">45%</div></div></div></li><li><div class="box"><div class="node node-type4"><div class="node-title1">其他</br>(t 标煤)</div><div class="node-target1">9</div></div><div class="node node-type4 node-footer"><div class="node-target2">15%</div></div></div></li></ul></li><li class="box-right"><div class="box"><div class="node node-type3"><div class="node-title1">节能量</br>(t 标煤)</div><div class="node-target1">150</div></div></div><ul><li><div class="box"><div class="node node-type4"><div class="node-title1">三联供系统</br>(t 标煤)</div><div class="node-target1">90</div></div><div class="node node-type4 node-footer"><div class="node-target2">45%</div></div></div></li><li><div class="box"><div class="node node-type4"><div class="node-title1">可再生能源</br>(t 标煤)</div><div class="node-target1">60</div></div><div class="node node-type4 node-footer"><div class="node-target2">65%</div></div></div></li></ul></li></ul></li><li class="line-large"><div class="box"><div class="node node-type2">能效指标</div></div><ul class="line-large"><li class="box-left"><div class="box"><div class="node node-type3"><div class="node-title1">系统综合</br>能效</div><div class="node-target2">98%</div></div></div><ul><li><div class="box"><div class="node node-type4"><div class="node-title1">供冷系统</br>综合能效</div><div class="node-target2">45%</div></div></div></li><li><div class="box"><div class="node node-type4"><div class="node-title1">供热系统</br>综合能效</div><div class="node-target2">34%</div></div></div></li><li><div class="box"><div class="node node-type4"><div class="node-title1">三联供系统</br>综合能效</div><div class="node-target2">20%</div></div></div><ul><li><div class="box"><div class="node node-type5"><div class="node-title1">发电效率</div><div class="node-target2">20%</div></div></div></li><li><div class="box"><div class="node node-type5"><div class="node-title1">余热利用</br>效率</div><div class="node-target2">80%</div></div></div></li></ul></li></ul></li><li><div class="box"><div class="node node-type3"><div class="node-title1">清洁能源</br>发电占比</div><div class="node-target2">90%</div></div></div><ul><li><div class="box"><div class="node node-type4"><div class="node-title1">天然气</br>发电占比</div><div class="node-target2">45%</div></div></div></li><li><div class="box"><div class="node node-type4"><div class="node-title1">可再生能源</br>发电占比</div><div class="node-target2">55%</div></div></div><ul><li><div class="box"><div class="node node-type5"><div class="node-title1">风力占比</div><div class="node-target2">50%</div></div></div></li><li><div class="box"><div class="node node-type5"><div class="node-title1">光伏占比</div><div class="node-target2">50%</div></div></div></li></ul></li></ul></li></ul></li></ul></li></ul></div>

css部分构建

使用css样式在节点生成连接线（通过before和after属性可以在节点前后生成2个元素，设置50%的宽度和边线即可实现节点之间的连线）

.tree li
{float:left;text-align:center;list-style-type:none;position:relative;transition:all .5s;-webkit-transition:all .5s;-moz-transition:all .5s;padding:30px 5px 0;/*上段竖线*/position：relative;
}.tree li::before,.tree li::after
{content:'';position:absolute;top:0;right:50%;border-top:1px solid #56698A;/*横线*/width:50%;height:30px;/*上段竖线*/
}

对于不同的节点我们设置了不同的样式

.node
{border:1px solid #26375F;text-decoration:none;color:#FFFFFF;font-family:arial,verdana,tahoma;font-size:.85em;display:inline-block;transition:all .5s;-webkit-transition:all .5s;-moz-transition:all .5s;padding:0.4em .4em;
}.node-type1
{font-size:1em;background-color: #0089FD;padding:0.2em 1.1em;border-radius:0em .6em .6em .6em;
}.node-type2
{font-size:.9em;background-color: #611DEE;padding:0.3em 1.2em;border-radius:0em .6em .6em .6em;
}.node-type3
{color:#00B7BB;border-color:#00B7BB;
}.node-type4
{color:#9DF5FE;border-color:#9DF5FE;
}.node-type5
{color:#85F79D;border-color:#85F79D;
}

项目代码https://download.csdn.net/download/qq243348167/85674034

通过css和html构建能耗数据分析树状图相关推荐

ztree插件树状图
开发工具与关键技术:MVC 作者:Mr_恺撰写时间:2019年6月27日树状图不知道大家有没有做过,要不是做项目,项目中有这个需求,我也没有那么快能接触到这过功能,刚开始的时候对这个功能真的一脸懵 ...
php 好看的树状图,php中构建树状图
/** * 指定根层级的树状图 * @param array $list 初始数组 * @param int $root 最上级一条数据的id * @param string $pk 每一条数据的id ...
HTML+CSS自定义树状图
HTML+CSS自定义树状图主体部分 css部分主体部分 <div class="test"><ul class="domtree"> ...
超详细的html+css基础知识树状图~HTML标签
前言学习任何新知识,最重要的永远都是搭建属于自己的知识框架,随后学习的细碎知识点往框架里面填入,最后形成一棵属于自己的知识大树.本系列的博客专注更新总结好的思维导图,希望可以帮助大家快速理清知识结构 ...
echart关系树状图_干货 | 25个常用Matplotlib图的Python代码
50个Matplotlib图的汇编,在数据分析和可视化中最有用.此列表允许您使用Python的Matplotlib和Seaborn库选择要显示的可视化对象. 1.关联散点图带边界的气泡图带线性回 ...
json树状图可视化_12个流行的Python数据可视化库总结
总结了10个不同领域的 Python 数据可视化库,有常用的,也有比较小众的. 1. matplotlib matplotlib是Python数据可视化库的OG.尽管它已有十多年的历史,但仍然是Pyt ...
一款很好用的JQuery dtree树状图插件（一）
一款很好用的JQuery dtree树状图插件树状图 -dtree 由于他的节点设置思想不错,使连接数据库的数据库设计比较方便. 下载dtree资源包,引用一下dtree.css和dtree.js ...
html树状图右侧_树状图及制作方法（Excel 2016/Excel 2013）
↑↑↑关注ExcelEasy,让Excel更简单树状图是一种展示层次结构数据的图表,可以很好的揭示各类别数据的比例关系及类别内数据的组成结构.今天为大家详细介绍一下树状图的制作方法树状图在Exce ...
聚类树状图_聚集聚类和树状图-解释
聚类树状图 Agglomerative Clustering is a type of hierarchical clustering algorithm. It is an unsupervised ...
数据可视化【十一】树状图
Constructing a node-link tree visualization 首先将节点之间的连线画出来. 使用json函数读取文件以后,使用hierarchy等函数得到连线的数组,然后绑定 ...

通过css和html构建能耗数据分析树状图

介绍

html部分构建

css部分构建

通过css和html构建能耗数据分析树状图相关推荐

最新文章

热门文章