好的，以下是一个简单的后台系统首页
统计demo静态
页面：
```
<!DOCTYPE html>
<html>
<head>
<title>后台系统首页
统计demo</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
</head>
<body>
<div>
<h1>用户
统计</h1>
<div id="user-chart" style="width: 800px; height: 400px;"></div>
</div>
<div>
<h1>订单
统计</h1>
<div id="order-chart" style="width: 800px; height: 400px;"></div>
</div>
<div>
<h1>数据
统计</h1>
<div id="data-chart" style="width: 800px; height: 400px;"></div>
</div>
<div>
<h1>日志
统计</h1>
<table>
<thead>
<tr>
<th>日期</th>
<th>访问量</th>
<th>操作量</th>
</tr>
</thead>
<tbody>
<tr>
<td>2019-01-01</td>
<td>100</td>
<td>50</td>
</tr>
<tr>
<td>2019-01-02</td>
<td>200</td>
<td>80</td>
</tr>
<tr>
<td>2019-01-03</td>
<td>300</td>
<td>100</td>
</tr>
</tbody>
</table>
</div>
<script>
// 用户
统计
var userChart = echarts.init(document.getElementById('user-chart'));
var userOption = {
title : {
text: '用户
统计',
subtext: '数据来自数据库',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:['普通用户','VIP用户','管理员']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'用户类型',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'普通用户'},
{value:310, name:'VIP用户'},
{value:234, name:'管理员'}
]
}
]
};
userChart.setOption(userOption);
// 订单
统计
var orderChart = echarts.init(document.getElementById('order-chart'));
var orderOption = {
title : {
text: '订单
统计',
subtext: '数据来自数据库',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:['待处理订单','已完成订单','已取消订单']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'订单状态',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'待处理订单'},
{value:310, name:'已完成订单'},
{value:234, name:'已取消订单'}
]
}
]
};
orderChart.setOption(orderOption);
// 数据
统计
var dataChart = echarts.init(document.getElementById('data-chart'));
var dataOption = {
title : {
text: '数据
统计',
subtext: '数据来自数据库',
x:'center'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['销售额','访问量','注册量']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value',
name : '销售额',
axisLabel : {
formatter: '{value} 元'
}
},
{
type : 'value',
name : '访问量/注册量',
axisLabel : {
formatter: '{value} 人'
}
}
],
series : [
{
name:'销售额',
type:'bar',
data:[200, 300, 400, 500, 600, 700, 800],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
{
name:'访问量',
type:'line',
yAxisIndex: 1,
data:[1000, 1200, 1500, 1800, 2000, 2200, 2400],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
},
{
name:'注册量',
type:'line',
yAxisIndex: 1,
data:[500, 600, 800, 1000, 1200, 1400, 1600],
markPoint : {
data : [
{name : '周最高', value : 1600, xAxis: 6, yAxis: 1600},
{name : '周最低', value : 500, xAxis: 0, yAxis: 500}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
}
]
};
dataChart.setOption(dataOption);
</script>
</body>
</html>
```
这个
页面使用了ECharts来制作图表，并使用了jQuery来简化代码。您可以将这个
页面作为一个模板，根据您自己的需求进行修改和定制。
5万+
非常没帮助
没帮助
一般
有帮助
非常有帮助
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
