|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>Title</title>
|
|
|
<link rel="stylesheet" type="text/css" href="msgList.css">
|
|
|
<link rel="stylesheet" href="./assets/css/style.css">
|
|
|
<script type="text/javascript" src="./assets/js/jquery.js"></script>
|
|
|
</head>
|
|
|
<style>
|
|
|
#pie {
|
|
|
width: 400px;
|
|
|
height: 400px;
|
|
|
}
|
|
|
</style>
|
|
|
<script type="text/javascript" src="echarts.js"></script>
|
|
|
<header class="top-navigation">
|
|
|
<div class="container">
|
|
|
<a class="logo" aria-label="MDN homepage"><svg id="mdn-docs-logo" x="0" y="0" viewBox="0 0 694.9 10.4" style="enable-background:new 0 0 694.9 104.4" role="img"><title>MDN Web Docs</title>
|
|
|
<button title="Open main menu" type="button" class="button action has-icon main-menu-toggle" aria-haspopup="true" aria-label="Open main menu" aria-expanded="true"><span class="button-wrap"><span class="icon icon-menu "></span><span class="visually-hidden">Open main menu</span></span></button>
|
|
|
</div>
|
|
|
</header>
|
|
|
<body>
|
|
|
<div class="chart-container">
|
|
|
<!--
|
|
|
- #CHART CARD
|
|
|
-->
|
|
|
|
|
|
<div class="chart-card">
|
|
|
|
|
|
<h4 class="h3">消息类别统计表</h4>
|
|
|
<table class="card-table">
|
|
|
<tbody class="table-body flex-center">
|
|
|
<tr class="table-row flex-center">
|
|
|
<th class="table-heading" scope="col">北京</th>
|
|
|
|
|
|
<td class="table-data">
|
|
|
<div class="chart-bar" data-chart-bar="beijing"></div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
|
|
|
<tr class="table-row flex-center">
|
|
|
<th class="table-heading" scope="col">上海</th>
|
|
|
|
|
|
<td class="table-data">
|
|
|
<div class="chart-bar" data-chart-bar="shanghai"></div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
|
|
|
<tr class="table-row flex-center">
|
|
|
<th class="table-heading" scope="col">长沙</th>
|
|
|
|
|
|
<td class="table-data">
|
|
|
<div class="chart-bar" data-chart-bar="长沙"></div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
|
|
|
<span class="tooltip text" data-tooltip></span>
|
|
|
|
|
|
<div class="wrapper flex-center">
|
|
|
|
|
|
<div class="card-meta">
|
|
|
<p class="text">最近7天总共有：</p>
|
|
|
|
|
|
<data class="meta-value" value="478.33">478条</data>
|
|
|
</div>
|
|
|
|
|
|
<div class="card-meta">
|
|
|
<data class="meta-value small" value="2.4">+2.4%</data>
|
|
|
|
|
|
<p class="text">from last month</p>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
<!--
|
|
|
- custom js link
|
|
|
-->
|
|
|
<script src="./assets/js/script.js" type="module" defer></script>
|
|
|
<div class="piechart" id="pie"></div>
|
|
|
<script>
|
|
|
var pie = echarts.init(document.getElementById('pie'));
|
|
|
pieOption = {
|
|
|
title: {
|
|
|
text: '数据统计饼状图'
|
|
|
},
|
|
|
tooltip: {
|
|
|
show: true,
|
|
|
trigger: "item",
|
|
|
backgroundColor: "#1677FF",
|
|
|
// {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
|
|
|
formatter: "{a}：{b}<br/>{c}吨({d}%)"
|
|
|
},
|
|
|
color: ['#3e87ff', '#65b2f3', '#b9cfec'],
|
|
|
series: [
|
|
|
{
|
|
|
name: '品种',
|
|
|
type: 'pie',
|
|
|
// 数组的第一项是内半径，第二项是外半径；可以设置不同的内外半径显示成圆环图
|
|
|
radius: '50%',
|
|
|
// 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标；设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度
|
|
|
center: ['50%', '50%'],
|
|
|
data: [
|
|
|
{ value: 2000, name: '北京' },
|
|
|
{ value: 2000, name: '上海' },
|
|
|
{ value: 2000, name: '长沙' },
|
|
|
|
|
|
],
|
|
|
itemStyle: {
|
|
|
// 显示图例
|
|
|
normal: {
|
|
|
label: {
|
|
|
show: true
|
|
|
},
|
|
|
labelLine: {
|
|
|
show: true
|
|
|
}
|
|
|
},
|
|
|
emphasis: {
|
|
|
// 图形阴影的模糊大小
|
|
|
shadowBlur: 10,
|
|
|
// 阴影水平方向上的偏移距离
|
|
|
shadowOffsetX: 0,
|
|
|
// 阴影颜色
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
pie.setOption(pieOption);
|
|
|
</script>
|
|
|
|
|
|
<div class="my_msg_list">
|
|
|
<div class="my_msg_list_view">
|
|
|
<div class="my_msg_list_box">
|
|
|
<div class="my_msg_list_con">
|
|
|
<div class="my_msg_list_title">
|
|
|
<span >消息列表：</span>
|
|
|
<a class="fr">清空所有消息</a>
|
|
|
<span class="line fr"></span>
|
|
|
<a class="fr">全部标记为已读</a>
|
|
|
</div>
|
|
|
<div class="ule">
|
|
|
<div class="lie"><a href="#home">服务器列表</a></div>
|
|
|
<div class="lie"><a href="#news">距离上次响应时间</a></div>
|
|
|
<div class="lie"><a href="#contact">当前服务器状态</a></div>
|
|
|
<div class="lie"><a href="#about">返回消息报头</a></div>
|
|
|
</div>
|
|
|
<div class="ula">
|
|
|
<div class="lia"><a href="#home"><span><div class="square"></div></span>北京</a></div>
|
|
|
<div class="lia"><a href="#news">
|
|
|
<script language="javascript"type="text/javascript">
|
|
|
a = $.ajax({
|
|
|
url: "./assets/js/data.json",
|
|
|
type: "GET",
|
|
|
dataType: "json",
|
|
|
async: false,
|
|
|
success: function(data) {
|
|
|
}
|
|
|
});
|
|
|
aa=a.recentTime ;
|
|
|
result=$.parseJSON(a["recentTime"])
|
|
|
</script>
|
|
|
</a></div>
|
|
|
<div class="lia"><a href="#contact">正常</a></div>
|
|
|
<div class="lia"><a href="#about">TCP</a></div>
|
|
|
</div>
|
|
|
<div class="fr options_info options-f">
|
|
|
<a class="btn-rush csdnc-trash" style="float: right;">
|
|
|
<img src="./assets/images/delete.png"
|
|
|
width="20px"
|
|
|
height="20px">
|
|
|
</a>
|
|
|
<em class="data-time" style="float: right;padding-right:10px">2019-03-28</em>
|
|
|
</div>
|
|
|
<div class="msg_content ">第一个测试发送消息的内容</div>
|
|
|
</li>
|
|
|
<li class="msg_list_ul_li">
|
|
|
<div class="ula">
|
|
|
<div class="lia"><a href="#home">长沙</a></div>
|
|
|
<div class="lia"><a href="#news">1300ms</a></div>
|
|
|
<div class="lia"><a href="#contact">受损</a></div>
|
|
|
<div class="lia"><a href="#about">TCP</a></div>
|
|
|
</div>
|
|
|
<div class="fr options_info options-f">
|
|
|
<a class="btn-rush csdnc-trash" style="float: right;">
|
|
|
<img src="./assets/images/delete.png"
|
|
|
width="20px"
|
|
|
height="20px">
|
|
|
</a>
|
|
|
<em class="data-time" style="float: right;padding-right:10px">2019-03-28</em>
|
|
|
</div>
|
|
|
<div class="msg_content ">第一个测试发送消息的内容</div>
|
|
|
</li>
|
|
|
<li class="msg_list_ul_li">
|
|
|
<div class="ula">
|
|
|
<div class="lia"><a href="#home">上海</a></div>
|
|
|
<div class="lia"><a href="#news">70ms</a></div>
|
|
|
<div class="lia"><a href="#contact">繁忙</a></div>
|
|
|
<div class="lia"><a href="#about">TCP</a></div>
|
|
|
</div>
|
|
|
<div class="fr options_info options-f">
|
|
|
<a class="btn-rush csdnc-trash" style="float: right;">
|
|
|
<img src="./assets/images/delete.png"
|
|
|
width="20px"
|
|
|
height="20px">
|
|
|
</a>
|
|
|
<em class="data-time" style="float: right;padding-right:10px">2019-03-28</em>
|
|
|
</div>
|
|
|
<div class="msg_content ">第三个测试发送消息的内容，大声说出你们的爱</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
|
|
|
<div class="page-box">
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<script src="./assets/js/script.js" type="module" defer></script>
|
|
|
</>
|
|
|
</html> |
