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 treevalue: 10,children: [{name: 'nodeAa', // First leaf of first treevalue: 4}, {name: 'nodeAb', // Second leaf of first treevalue: 6}]}, {name: 'nodeB', // Second treevalue: 20,children: [{name: 'nodeBa', // Son of first treevalue: 20,children: [{name: 'nodeBa1', // Granson of first treevalue: 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>