<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>
无标题文档
</title>
<link href="jscss/bootstrap.min.css" rel="stylesheet">
<link href="jscss/jquery.contextMenu.min.css" rel="stylesheet">
<link href="jscss/font-awesome.min.css" rel="stylesheet">
<link href="jscss/animate.min.css" rel="stylesheet">
<link href="jscss/style.min.css" rel="stylesheet">
<link href="jscss/skins.css" rel="stylesheet">
<link href="jscss/ry-ui.css" rel="stylesheet">
<link href="jscss/extend.css" rel="stylesheet">
<link href="jscss/layui.css" rel="stylesheet">
<link href="jscss/global.css" rel="stylesheet">
<link href="jscss/styleCard.css" rel="stylesheet">
<link rel="stylesheet" href="jscss//css/layui.css">
<style>
body{padding: 16px;}
</style>
<script src="jscss/jquery.min.js"></script>
<script src="jscss/bootstrap.min.js"></script>
<style type="text/css">
<style type="text/css">
<!-- .STYLE0{ font-family: "宋体"; font-size: 8pt; color: #000000; } --></style>
</head>
<body>
<div>
<form class="layui-form" method="get" lay-filter="top" id="AAA">
<div class="row">
<div class="col-xl-3 col-sm-6 col-12">
<div class="card flex-fill fb sm-box">
<i class="fab fa-facebook"></i>
<h6>
50,095
</h6>
<p>
Likes
</p>
</div>
</div>
<div class="col-xl-3 col-sm-6 col-12">
<div class="card flex-fill twitter sm-box">
<i class="fab fa-twitter"></i>
<h6>
48,596
</h6>
<p>
Follows
</p>
</div>
</div>
<div class="col-xl-3 col-sm-6 col-12">
<div class="card flex-fill insta sm-box">
<i class="fab fa-instagram"></i>
<h6>
52,085
</h6>
<p>
Follows
</p>
</div>
</div>
<div class="col-xl-3 col-sm-6 col-12">
<div class="card flex-fill linkedin sm-box">
<i class="fab fa-linkedin-in"></i>
<h6>
69,050
</h6>
<p>
Follows
</p>
</div>
</div>
</div>
<!-- 使用 layui-container 作为主要容器 -->
<div class="layui-container">
<!-- 创建一行 -->
<div class="layui-row">
<div class="layui-col-md6">
<div id="lineChart" style="width:100%; height: 400px;"></div>
</div>
<div class="layui-col-md6">
<div id="barChart" style="width:100%; height: 400px;"></div>
</div>
</div>
<!-- 创建一行 -->
<div class="layui-row">
<div class="layui-col-md6">
<div id="stripChart" style="width:100%; height: 400px;"></div>
</div>
<div class="layui-col-md6">
<div id="pieChart" style="width:100%; height: 400px;"></div>
</div>
</div>
</div>
</form>
</div>
<script type="text/javascript" src="jscss/layui.js"></script>
<script type="text/javascript" src="jscss/echarts.min.js"></script>
<script>
layui.use(["form", "util", "laydate", "rate", "slider"],
function() {
var $ = layui.$;
var form = layui.form;
var layer = layui.layer;
var util = layui.util;
var laydate = layui.laydate;
//日期
laydate.render({
elem: "#date"
});
var lineChartDom = document.getElementById('lineChart');
var lineChart = echarts.init(lineChartDom);
var option;
option = {
title: {
text: 'Stacked Line'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
name: 'Email',
type: 'line',
smooth: true,
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
smooth: true,
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
smooth: true,
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
smooth: true,
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
smooth: true,
data: [820, 932, 901, 934, 1290, 1330, 1320]
}]
};
option && lineChart.setOption(option);
var barChartDom = document.getElementById('barChart');
var barChart = echarts.init(barChartDom);
var option;
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
option && barChart.setOption(option);
// 基于准备好的dom，初始化echarts实例
var stripChartDom = document.getElementById('stripChart');
var stripChart = echarts.init(stripChartDom);
// 指定图表的配置项和数据
var option = {
yAxis: {
type: 'category',
data: ['苹果', '香蕉', '橙子', '葡萄', '草莓']
},
xAxis: {
type: 'value'
},
series: [{
data: [5, 20, 36, 10, 10],
type: 'bar'
}]
};
// 使用刚指定的配置项和数据显示图表。
option && stripChart.setOption(option);
var pieChartDom = document.getElementById('pieChart');
var pieChart = echarts.init(pieChartDom);
var option;
option = {
title: {
text: 'Referer of a Website',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [{
value: 1048,
name: 'Search Engine'
},
{
value: 735,
name: 'Direct'
},
{
value: 580,
name: 'Email'
},
{
value: 484,
name: 'Union Ads'
},
{
value: 300,
name: 'Video Ads'
}],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
option && pieChart.setOption(option);
});
</script>
</body>
</html>