648 lines
23 KiB
HTML
648 lines
23 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>数据分析</title>
|
|
<meta name="renderer" content="webkit" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1, maximum-scale=1"
|
|
/>
|
|
<link rel="stylesheet" href="/static/admin/css/other/console.css" />
|
|
</head>
|
|
|
|
<body>
|
|
<div class="pear-container">
|
|
<div class="layui-row layui-col-space10">
|
|
<div class="layui-col-md8">
|
|
<div class="layui-row layui-col-space10">
|
|
<div class="layui-col-md6">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">快捷菜单</div>
|
|
<div class="layui-card-body">
|
|
<div class="layui-row layui-col-space10">
|
|
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
|
|
<div
|
|
class="shortcut-menu"
|
|
data-id="home1"
|
|
data-title="主页"
|
|
data-url="http://www.baidu.com"
|
|
>
|
|
<i class="layui-icon layui-icon-home"></i>
|
|
</div>
|
|
<span class="shortcut-menu-label">主页</span>
|
|
</div>
|
|
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
|
|
<div
|
|
class="shortcut-menu"
|
|
data-id="home2"
|
|
data-title="弹层"
|
|
data-url="http://www.baidu.com"
|
|
>
|
|
<i class="layui-icon layui-icon-camera"></i>
|
|
</div>
|
|
<span class="shortcut-menu-label">弹层</span>
|
|
</div>
|
|
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
|
|
<div
|
|
class="shortcut-menu"
|
|
data-id="home2"
|
|
data-title="聊天"
|
|
data-url="http://www.baidu.com"
|
|
>
|
|
<i class="layui-icon layui-icon-star"></i>
|
|
</div>
|
|
<span class="shortcut-menu-label">聊天</span>
|
|
</div>
|
|
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
|
|
<div
|
|
class="shortcut-menu"
|
|
data-id="home3"
|
|
data-title="相机"
|
|
data-url="http://www.baidu.com"
|
|
>
|
|
<i class="layui-icon layui-icon-camera"></i>
|
|
</div>
|
|
<span class="shortcut-menu-label">相机</span>
|
|
</div>
|
|
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
|
|
<div
|
|
class="shortcut-menu"
|
|
data-id="home4"
|
|
data-title="表单"
|
|
data-url="http://www.baidu.com"
|
|
>
|
|
<i class="layui-icon layui-icon-console"></i>
|
|
</div>
|
|
<span class="shortcut-menu-label">表单</span>
|
|
</div>
|
|
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
|
|
<div
|
|
class="shortcut-menu"
|
|
data-id="home5"
|
|
data-title="安全"
|
|
data-url="http://www.baidu.com"
|
|
>
|
|
<i class="layui-icon layui-icon-auz"></i>
|
|
</div>
|
|
<span class="shortcut-menu-label">安全</span>
|
|
</div>
|
|
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
|
|
<div
|
|
class="shortcut-menu"
|
|
data-id="home6"
|
|
data-title="公告"
|
|
data-url="http://www.baidu.com"
|
|
>
|
|
<i class="layui-icon layui-icon-cart"></i>
|
|
</div>
|
|
<span class="shortcut-menu-label">公告</span>
|
|
</div>
|
|
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
|
|
<div
|
|
class="shortcut-menu"
|
|
data-id="home7"
|
|
data-title="更多"
|
|
data-url="http://www.baidu.com"
|
|
>
|
|
<i class="layui-icon layui-icon-app"></i>
|
|
</div>
|
|
<span class="shortcut-menu-label">更多</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md6">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">代办任务</div>
|
|
<div class="layui-card-body">
|
|
<div class="layui-row layui-col-space10">
|
|
<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
|
|
<div class="deputy">
|
|
<div class="deputy-label">待审评论</div>
|
|
<div class="deputy-count">21</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
|
|
<div class="deputy">
|
|
<div class="deputy-label">待审帖子</div>
|
|
<div class="deputy-count">32</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
|
|
<div class="deputy">
|
|
<div class="deputy-label">待审文章</div>
|
|
<div class="deputy-count">14</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
|
|
<div class="deputy">
|
|
<div class="deputy-label">待审用户</div>
|
|
<div class="deputy-count">63</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md12">
|
|
<div class="layui-card">
|
|
<div class="layui-card-body">
|
|
<div
|
|
class="layui-tab custom-tab layui-tab-brief"
|
|
lay-filter="docDemoTabBrief"
|
|
>
|
|
<div id="echarts-records-1" style="min-height: 400px"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-card">
|
|
<div
|
|
class="layui-card-body"
|
|
style="padding-top: 15px; padding-bottom: 15px"
|
|
>
|
|
<table class="layui-hide" id="ID-table-demo-data"></table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md4">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">留言板</div>
|
|
<div class="layui-card-body">
|
|
<ul class="message-board">
|
|
<li>
|
|
<p>要不要作为我的家人，搬来我家。</p>
|
|
<span>12月25日 19:92</span>
|
|
<a
|
|
href="javascript:;"
|
|
data-id="1"
|
|
class="layui-btn layui-btn-primary layui-btn-xs message-board-reply"
|
|
>回复</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<p>快乐的时候不敢尽兴，频繁警戒自己保持清醒。</p>
|
|
<span>4月30日 22:43</span>
|
|
<a
|
|
href="javascript:;"
|
|
data-id="1"
|
|
class="layui-btn layui-btn-primary layui-btn-xs message-board-reply"
|
|
>回复</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<p>夏天真的来了，尽管它还有些犹豫。</p>
|
|
<span>4月30日 22:43</span>
|
|
<a
|
|
href="javascript:;"
|
|
data-id="1"
|
|
class="layui-btn layui-btn-primary layui-btn-xs message-board-reply"
|
|
>回复</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<p>看似不可达到的高度，只要坚持不懈就可能到达。</p>
|
|
<span>4月30日 22:43</span>
|
|
<a
|
|
href="javascript:;"
|
|
data-id="1"
|
|
class="layui-btn layui-btn-primary layui-btn-xs message-board-reply"
|
|
>回复</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<p>当浑浊变成了一种常态，那么清白就成了一种罪过。</p>
|
|
<span>4月30日 22:43</span>
|
|
<a
|
|
href="javascript:;"
|
|
data-id="1"
|
|
class="layui-btn layui-btn-primary layui-btn-xs message-board-reply"
|
|
>回复</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<p>那是一种内在的东西，他们到达不了，也无法触及！</p>
|
|
<span>5月12日 01:25</span>
|
|
<a
|
|
href="javascript:;"
|
|
data-id="1"
|
|
class="layui-btn layui-btn-primary layui-btn-xs message-board-reply"
|
|
>回复</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<p>希望是一个好东西,也许是最好的,好东西是不会消亡的！</p>
|
|
<span>6月11日 15:33</span>
|
|
<a
|
|
href="javascript:;"
|
|
data-id="1"
|
|
class="layui-btn layui-btn-primary layui-btn-xs message-board-reply"
|
|
>回复</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<p>一切都在不可避免的走向庸俗。</p>
|
|
<span>2月09日 13:40</span>
|
|
<a
|
|
href="javascript:;"
|
|
data-id="1"
|
|
class="layui-btn layui-btn-primary layui-btn-xs message-board-reply"
|
|
>回复</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<p>路上没有灯火的时候，就点亮自己的头颅。</p>
|
|
<span>3月11日 12:30</span>
|
|
<a
|
|
href="javascript:;"
|
|
data-id="1"
|
|
class="layui-btn layui-btn-primary layui-btn-xs message-board-reply"
|
|
>回复</a
|
|
>
|
|
</li>
|
|
|
|
<li>
|
|
<p>
|
|
我们应该不虚度一生，应该能够说：＂我已经做了我能做的事。＂
|
|
</p>
|
|
<span>4月30日 22:43</span>
|
|
<a
|
|
href="javascript:;"
|
|
data-id="1"
|
|
class="layui-btn layui-btn-primary layui-btn-xs message-board-reply"
|
|
>回复</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<p>接近，是我对一切的态度，是我对一切态度的距离</p>
|
|
<span>6月11日 15:33</span>
|
|
<a
|
|
href="javascript:;"
|
|
data-id="1"
|
|
class="layui-btn layui-btn-primary layui-btn-xs message-board-reply"
|
|
>回复</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<p>没有锚的船当然也可以航行，只是紧张充满你的一生。</p>
|
|
<span>2月09日 13:40</span>
|
|
<a
|
|
href="javascript:;"
|
|
data-id="1"
|
|
class="layui-btn layui-btn-primary layui-btn-xs message-board-reply"
|
|
>回复</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
layui.use(
|
|
["layer", "echarts", "carousel", "element", "table"],
|
|
function () {
|
|
var $ = layui.jquery,
|
|
layer = layui.layer,
|
|
element = layui.element,
|
|
echarts = layui.echarts,
|
|
table = layui.table,
|
|
carousel = layui.carousel;
|
|
|
|
var inst = table.render({
|
|
elem: "#ID-table-demo-data",
|
|
cols: [
|
|
[
|
|
{ field: "id", title: "ID", width: 80, sort: true },
|
|
{ field: "username", title: "用户", width: 120 },
|
|
{ field: "sex", title: "性别", width: 80 },
|
|
{ field: "sign", title: "签名", minWidth: 160 },
|
|
{ field: "city", title: "城市", width: 80 },
|
|
{ field: "experience", title: "状态", width: 80, sort: true },
|
|
],
|
|
],
|
|
data: [
|
|
{
|
|
id: "10001",
|
|
username: "就眠儀式",
|
|
sex: "男",
|
|
city: "山东",
|
|
sign: "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。",
|
|
experience: "在线",
|
|
},
|
|
{
|
|
id: "10002",
|
|
username: "就眠儀式",
|
|
sex: "男",
|
|
city: "山东",
|
|
sign: "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。",
|
|
experience: "在线",
|
|
},
|
|
{
|
|
id: "10003",
|
|
username: "就眠儀式",
|
|
sex: "男",
|
|
city: "山东",
|
|
sign: "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。",
|
|
experience: "在线",
|
|
},
|
|
{
|
|
id: "10004",
|
|
username: "就眠儀式",
|
|
sex: "男",
|
|
city: "山东",
|
|
sign: "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。",
|
|
experience: "在线",
|
|
},
|
|
{
|
|
id: "10005",
|
|
username: "就眠儀式",
|
|
sex: "男",
|
|
city: "山东",
|
|
sign: "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。",
|
|
experience: "在线",
|
|
},
|
|
{
|
|
id: "10006",
|
|
username: "就眠儀式",
|
|
sex: "男",
|
|
city: "山东",
|
|
sign: "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。",
|
|
experience: "在线",
|
|
},
|
|
{
|
|
id: "10007",
|
|
username: "就眠儀式",
|
|
sex: "男",
|
|
city: "山东",
|
|
sign: "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。",
|
|
experience: "在线",
|
|
},
|
|
],
|
|
page: false,
|
|
});
|
|
|
|
var echartsRecordsOne = echarts.init(
|
|
document.getElementById("echarts-records-1"),
|
|
"walden",
|
|
);
|
|
|
|
$("body").on("click", "[data-url]", function () {
|
|
parent.layui.tab.addTabOnlyByElem("content", {
|
|
id: $(this).attr("data-id"),
|
|
title: $(this).attr("data-title"),
|
|
url: $(this).attr("data-url"),
|
|
close: true,
|
|
});
|
|
});
|
|
|
|
let color = [
|
|
"#0090FF",
|
|
"#36CE9E",
|
|
"#FFC005",
|
|
"#FF515A",
|
|
"#8B5CFF",
|
|
"#00CA69",
|
|
];
|
|
let echartData = [
|
|
{
|
|
name: "1",
|
|
value1: 100,
|
|
value2: 233,
|
|
},
|
|
{
|
|
name: "2",
|
|
value1: 138,
|
|
value2: 233,
|
|
},
|
|
{
|
|
name: "3",
|
|
value1: 350,
|
|
value2: 200,
|
|
},
|
|
{
|
|
name: "4",
|
|
value1: 173,
|
|
value2: 180,
|
|
},
|
|
{
|
|
name: "5",
|
|
value1: 180,
|
|
value2: 199,
|
|
},
|
|
{
|
|
name: "6",
|
|
value1: 150,
|
|
value2: 233,
|
|
},
|
|
{
|
|
name: "7",
|
|
value1: 180,
|
|
value2: 210,
|
|
},
|
|
{
|
|
name: "8",
|
|
value1: 230,
|
|
value2: 180,
|
|
},
|
|
];
|
|
|
|
let xAxisData = echartData.map((v) => v.name);
|
|
// ["1", "2", "3", "4", "5", "6", "7", "8"]
|
|
let yAxisData1 = echartData.map((v) => v.value1);
|
|
// [100, 138, 350, 173, 180, 150, 180, 230]
|
|
let yAxisData2 = echartData.map((v) => v.value2);
|
|
// [233, 233, 200, 180, 199, 233, 210, 180]
|
|
const hexToRgba = (hex, opacity) => {
|
|
let rgbaColor = "";
|
|
let reg = /^#[\da-f]{6}$/i;
|
|
if (reg.test(hex)) {
|
|
rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
|
|
"0x" + hex.slice(3, 5),
|
|
)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
|
|
}
|
|
return rgbaColor;
|
|
};
|
|
|
|
optionOne = {
|
|
color: color,
|
|
legend: {
|
|
right: 10,
|
|
top: 10,
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
formatter: function (params) {
|
|
let html = "";
|
|
params.forEach((v) => {
|
|
html += `<div style="color: #666;font-size: 14px;line-height: 24px">
|
|
<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
|
|
color[v.componentIndex]
|
|
};"></span>
|
|
${v.seriesName}.${v.name}
|
|
<span style="color:${
|
|
color[v.componentIndex]
|
|
};font-weight:700;font-size: 18px">${v.value}</span>
|
|
万元`;
|
|
});
|
|
return html;
|
|
},
|
|
extraCssText:
|
|
"background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
shadowStyle: {
|
|
color: "#ffffff",
|
|
shadowColor: "rgba(225,225,225,1)",
|
|
shadowBlur: 5,
|
|
},
|
|
},
|
|
},
|
|
grid: {
|
|
top: 100,
|
|
containLabel: true,
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
boundaryGap: false,
|
|
axisLabel: {
|
|
formatter: "{value}月",
|
|
textStyle: {
|
|
color: "#333",
|
|
},
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#D9D9D9",
|
|
},
|
|
},
|
|
data: xAxisData,
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
name: "单位：万千瓦时",
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: "#666",
|
|
},
|
|
},
|
|
nameTextStyle: {
|
|
color: "#666",
|
|
fontSize: 12,
|
|
lineHeight: 40,
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: "dashed",
|
|
color: "#E9E9E9",
|
|
},
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "2018",
|
|
type: "line",
|
|
smooth: true,
|
|
symbolSize: 8,
|
|
zlevel: 3,
|
|
lineStyle: {
|
|
normal: {
|
|
color: color[0],
|
|
shadowBlur: 3,
|
|
shadowColor: hexToRgba(color[0], 0.5),
|
|
shadowOffsetY: 8,
|
|
},
|
|
},
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: hexToRgba(color[0], 0.3),
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: hexToRgba(color[0], 0.1),
|
|
},
|
|
],
|
|
false,
|
|
),
|
|
shadowColor: hexToRgba(color[0], 0.1),
|
|
shadowBlur: 10,
|
|
},
|
|
},
|
|
data: yAxisData1,
|
|
},
|
|
{
|
|
name: "2019",
|
|
type: "line",
|
|
smooth: true,
|
|
symbolSize: 8,
|
|
zlevel: 3,
|
|
lineStyle: {
|
|
normal: {
|
|
color: color[1],
|
|
shadowBlur: 3,
|
|
shadowColor: hexToRgba(color[1], 0.5),
|
|
shadowOffsetY: 8,
|
|
},
|
|
},
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: hexToRgba(color[1], 0.3),
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: hexToRgba(color[1], 0.1),
|
|
},
|
|
],
|
|
false,
|
|
),
|
|
shadowColor: hexToRgba(color[1], 0.1),
|
|
shadowBlur: 10,
|
|
},
|
|
},
|
|
data: yAxisData2,
|
|
},
|
|
],
|
|
};
|
|
|
|
echartsRecordsOne.setOption(optionOne);
|
|
|
|
window.onresize = function () {
|
|
echartsRecordsOne.resize();
|
|
};
|
|
},
|
|
);
|
|
</script>
|
|
</body>
|
|
</html>
|