1.jq22模板下载：http://www.jq22.com/jquery-info22538
2.layUI下载（layUI-v2.5.5）：https://www.layui.com/
3.jquery下载（Development 3.4.1）：https://jquery.com/download/
【网页直接打开文件Ctrl+S即可】
4.ecahrts下载：https://www.echartsjs.com/zh/download.html
【选择方法三在线定制】
5.webstorm激活码：https://blog.csdn.net/ft_sunshine/article/details/92065158
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>功耗分析</title>
<link href="../css/common.css" rel="stylesheet">
<link rel="stylesheet" href="../plugins/layui/css/layui.css">
<script src="../plugins/jquery-3.3.1.min.js"></script>
<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
<script src="../plugins/bmap.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5ieMMexWmzB9jivTq6oCRX9j&callback"></script>
<script src="../js/common.js"></script>
<script src="../js/index.js"></script>
<script src="../plugins/laydate/laydate.js"></script>
<script src="../plugins/layui/layui.js"></script>
</head>
<body>
<!--顶部-->
<header class="header left">
<div class="left nav">
<ul>
<li class="nav_active"><i class="nav_1"></i><a href="index.html">XXXX</a> </li>
<li><i class="nav_2"></i><a href="quota.html">XXXX</a> </li>
<li><i class="nav_3"></i><a href="trend.html">XXXX</a> </li>
<li><i class="nav_4"></i><a href="chronic.html">XXXX</a> </li>
</ul>
</div>
<div class="header_center left" style="position:relative">
<h2><strong>Modem功耗自动化分析</strong></h2>
</div>
<div class="right nav text_right">
<ul>
</ul>
</div>
</header>
<!--内容部分-->
<div class="con left">
<div style="color:white; font-size: 18px;margin-left: 3%">2019-12-01 00:00-23:00</div>
<!--数据总概-->
<div class="con_div">
<div class="con_div_text left">
<div class="layui-progress layui-progress-big " lay-showPercent="true" style="height: 50%;margin-top: 3%;margin-left: 1%">
<div class="layui-progress-bar" lay-percent="40%" style="height: 100%;background-color: #ff4e4e !important"></div>
</div>
<p style="font-size: x-large;color:white;text-align: center">XXXX</p>
</div>
<div class="con_div_text left">
<div class="layui-progress layui-progress-big " lay-showPercent="true" style="height: 50%;margin-top: 3%;margin-left: 1%">
<div class="layui-progress-bar" lay-percent="90%" style="height: 100%;background-color: green"></div>
</div>
<p style="font-size: x-large;color:white;text-align: center">XXXX</p>
</div>
<div class="con_div_text left">
<div class="layui-progress layui-progress-big " lay-showPercent="true" style="height: 50%;margin-top: 3%;margin-left: 1%">
<div class="layui-progress-bar" lay-percent="80%" style="height: 100%;background-color: blueviolet"></div>
</div>
<p style="font-size: x-large;color:white;text-align: center">XXXX</p>
</div>
<div class="con_div_text left">
<div class="layui-progress layui-progress-big " lay-showPercent="true" style="height: 50%;margin-top: 3%;margin-left: 1%">
<div class="layui-progress-bar" lay-percent="65%" style="height: 100%;background-color: yellow"></div>
</div>
<p style="font-size: x-large;color:white;text-align: center">XXXX</p>
</div>
</div>
<!--统计分析图-->
<div class="div_any">
<div class="left div_any01">
<div class="div_any_child" lay-show="flase">
<div class="div_any_title"><img src="../img/jq22-images/title_1.png">各医院采集数据量</div>
<div id="main"></div>
</div>
<div class="div_any_child">
<div class="div_any_title"><img src="../img/jq22-images/title_2.png">各医院门诊住院费用</div>
<p id="histogramChart" class="p_chart"></p>
</div>
</div>
<div class="div_any02 left ">
<div class="div_any_child div_height" >
<div class="div_any_title any_title_width" style="z-index: 999"><img src="../img/jq22-images/title_0.png">XXXXX </div>
<div id ="main1" style="width:97.5%;height:93%;display: inline-block;padding-left: 1.25%;padding-top:2.2%;background-color: white"></p>
</div>
</div>
</div>
</div>
</body>
<script>
//注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
layui.use('element', function(){
var element = layui.element;
});
</script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
series: [{
type: 'treemap',
data: [{
name: 'nodeA', // First tree
value: 10,
children: [{
name: 'nodeAa', // First leaf of first tree
value: 4
}, {
name: 'nodeAb', // Second leaf of first tree
value: 6
}]
}, {
name: 'nodeB', // Second tree
value: 20,
children: [{
name: 'nodeBa', // Son of first tree
value: 20,
children: [{
name: 'nodeBa1', // Granson of first tree
value: 20
}]
}]
}]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
<script>
//myChart1.showLoading();
$.get('../data/product.json', function (data) {
var myChart1 = echarts.init(document.getElementById('main1'));
myChart1.hideLoading();
myChart1.setOption(option = {
title: {
text: 'Sankey Diagram'
},
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'sankey',
data: data.nodes,
links: data.links,
focusNodeAdjacency: true,
levels: [{
depth: 0,
itemStyle: {
color: '#fbb4ae'
},
lineStyle: {
color: 'source',
opacity: 0.6
}
}, {
depth: 1,
itemStyle: {
color: '#b3cde3'
},
lineStyle: {
color: 'source',
opacity: 0.6
}
}, {
depth: 2,
itemStyle: {
color: '#ccebc5'
},
lineStyle: {
color: 'source',
opacity: 0.6
}
}, {
depth: 3,
itemStyle: {
color: '#decbe4'
},
lineStyle: {
color: 'source',
opacity: 0.6
}
}],
lineStyle: {
normal: {
curveness: 0.5
}
}
}
]
});
});
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据可视化demo</title>
<link href="../css/common.css" rel="stylesheet">
<link rel="stylesheet" href="../plugins/layui/css/layui.css">
<script src="../plugins/jquery-3.3.1.min.js"></script>
<script src="../plugins/jquery-3.3.1.min.js"></script>
<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
<script src="../js/common.js"></script>
<script src="../js/trend.js"></script>
<script src="../plugins/layui/layui.js"></script>
</head>
<body>
<!--顶部-->
<header class="header left">
<div class="left nav">
<ul>
<li><i class="nav_1"></i><a href="index.html">XXXX</a> </li>
<li><i class="nav_2"></i><a href="quota.html">XXXX</a> </li>
<li><i class="nav_3"></i><a href="trend.html">XXXX</a> </li>
<li class="nav_active"><i class="nav_4"></i><a href="chronic.html">XXXX</a> </li>
</ul>
</div>
<div class="header_center left" style="position:relative">
<h2><strong>Modem功耗自动化分析</strong></h2>
</div>
</header>
<!--内容部分-->
<!--统计分析图-->
<div class="layui-collapse" lay-accordion>
<div class="layui-colla-item">
<h2 class="layui-colla-title">杜甫</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">李清照</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">鲁迅</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">杜甫</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">杜甫</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">杜甫</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">杜甫</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">杜甫</h2>
<div class="layui-colla-content layui-show">内容区域</div>
</div>
</div>
</body>
<script>
layui.use('element', function(){
var element = layui.element;
});
</script>
</html>
5415
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
