<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>人员管理 - 快递代拿系统</title>
<script src="../../../assets/js/echarts.js"></script>
<script src="../../../assets/js/jquery3.3.1.min.js"></script>
</head>
<body>
<div class="panel-body" style="display: flex">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 500px;height:300px; " ></div>
<div id="main2" style="width: 500px;height:300px; " ></div>
<div id="line" style="width: 500px;height:300px; " ></div>
</div>
<script>
$.ajax({
contentType: "application/json",
type: "GET",
url: "/admin/express/getTongji",
dataType: "json",
success: function (data) {
console.log("所有"+data)
var maleCount = data.maleCount[0];
var tongji = data.tongji[0];
console.log(maleCount);
console.log(tongji);
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '接单员统计'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ['男生','女生']
},
yAxis: {},
series: [{
name: '数量',
type: 'bar',
data: [maleCount['male'],maleCount['female']]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
error: function () {
console.log("失败")
}
})
</script>
<script>
$.ajax({
contentType: "application/json",
type: "GET",
url: "/admin/express/getTongji",
dataType: "json",
success: function (data) {
console.log("所有"+data)
var tongji = data.tongji[0];
// 折线图
// 基于准备好的dom，初始化echarts实例
var line = echarts.init(document.getElementById('line'));
// 指定图表的配置项和数据
lineOption = {
// 标题
title: {
text: '订单完成情况'
},
// 图例
tooltip: {
show: true,
trigger: "axis",
backgroundColor: "#1677FF",
// {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
formatter: "{b}：{c}个"
},
xAxis: {
type: 'category',
data: ['等待配送','派送中','订单完成','订单异常']
},
yAxis: {
type: 'value'
},
series: [{
name: '价格',
data: [tongji['dengdaipeisong'],tongji['paisongzhong'] ,tongji['dingdanwancheng'],tongji['dingdanyichang']],
type: 'line'
}]
};
line.setOption(lineOption);
},
error: function () {
console.log("失败")
}
})
</script>
<script>
$.ajax({
contentType: "application/json",
type: "GET",
url: "/admin/express/getTongji",
dataType: "json",
success: function (data) {
console.log("所有"+data)
var order = data.orderDeatail[0];
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main2'));
// 指定图表的配置项和数据
var option = {
title: {
text: '订单数量统计'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ['今日','昨日','一周内']
},
yAxis: {},
series: [{
name: '数量',
type: 'bar',
data: [order['today'],order['yesterday'],order['week']]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
error: function () {
console.log("失败")
}
})
</script>
</body>
</html>
后端代码（）
@GetMapping("/getTongji")
public Map getTongji(){
Map<String,Object> map = new HashMap<>(16);
List<Tongji> list = new ArrayList<>();
Tongji tongji =expressService.getTongji();
List<MaleCount> list2 = new ArrayList<>();
MaleCount maleCount = expressService.getMale();
//统计订单状态
list.add(tongji);
//统计管理员男女
list2.add(maleCount);
OrderDetail orderDetail = new OrderDetail();
int today = expressService.getOrderDeatail();
orderDetail.setToday(today);
orderDetail.setYesterday(expressService.getOrderDeatail2()-today);
orderDetail.setWeek(expressService.getOrderDeatail3());
List<OrderDetail> list3 = new ArrayList<>();
list3.add(orderDetail);
map.put("tongji",list);
map.put("maleCount",list2);
map.put("orderDeatail",list3);
return map;
}
Vue添加Echart
<template>
<el-card>
<el-row class="tac">
<el-col :span="12">
<div id="studyChart" :style="{width: '480px', height: '400px'}"></div>
</el-col>
<el-col :span="12">
<div id="pie1" style="width: 600px;height:400px;"></div>
<!-- <div id="videoTimeChart" :style="{width: '480px', height: '400px'}"></div> -->
</el-col>
</el-row>
</el-card>
</template>
<script>
import request from "@/utils/request";
export default {
name: "Count",
data(){
return{
}
},
mounted() {
this.drawLineStudy()
this.videoTime()
},
methods:{
drawLineStudy(){
var logintime;
var playtime;
var downloadtime;
request.get("/count").then( res => {
console.log("信息"+res)
this.logintime= res.data.logintime
this.playtime= res.data.playtime
this.downloadtime= res.data.downloadtime
console.log("哈哈"+this.logintime)
let studyChart= this.$root.echarts.init(document.getElementById("studyChart"))
// 指定图表的配置项和数据
var option = {
title: {
text: '数据详情统计'
},
tooltip: {},
legend: {
data:['次数']
},
xAxis: {
data: ['登录总次数','播放总次数','下载总次数']
},
yAxis: {},
series: [{
name: '次数',
type: 'bar',
data: [this.logintime,this.playtime,this.downloadtime]
}]
};
studyChart.setOption(option)
})
},
videoTime(){
let myChart1= this.$root.echarts.init(document.getElementById("pie1"))
// var myChart1 = echarts.init(document.getElementById('pie1'));
var logintime;
var playtime;
var downloadtime;
var videoTime;
request.get("/count").then( res => {
this.logintime= res.data.logintime
this.playtime= res.data.playtime
this.downloadtime= res.data.downloadtime
this.videoTime=res.data.videoTime
// alert(this.videoTime)
let option1 = {
title:{
text:'按类型统计',
top:'bottom',
left:'center',
textStyle:{
fontSize: 14,
fontWeight: '',
color: '#333'
},
},//标题
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
/*formatter:function(val){ //让series 中的文字进行换行
console.log(val);//查看val属性，可根据里边属性自定义内容
var content = var['name'];
return content;//返回可以含有html中标签
},*/ //自定义鼠标悬浮交互信息提示，鼠标放在饼状图上时触发事件
},//提示框，鼠标悬浮交互时的信息提示
legend: {
show: false,
orient: 'vertical',
x: 'left',
data: ['50%-学生', '25%-老师', '25%-家长']
},//图例属性，以饼状图为例，用来说明饼状图每个扇区，data与下边series中data相匹配
graphic:{
type:'text',
left:'center',
top:'center',
style:{
text:'时长统计\n', //使用“+”可以使每行文字居中
textAlign:'center',
font:'italic bolder 16px cursive',
fill:'#000',
width:30,
height:30
}
},//此例饼状图为圆环中心文字显示属性，这是一个原生图形元素组件，功能很多
series: [
{
name:'总时长统计（秒）',//tooltip提示框中显示内容
type: 'pie',//图形类型，如饼状图，柱状图等
radius: ['35%', '65%'],//饼图的半径，数组的第一项是内半径，第二项是外半径。支持百分比，本例设置成环形图。具体可以看文档或改变其值试一试
//roseType:'area',是否显示成南丁格尔图，默认false
itemStyle: {
normal:{
label:{
show:true,
textStyle:{color:'#3c4858',fontSize:"18"},
formatter:function(val){ //让series 中的文字进行换行
return val.name.split("-").join("\n");}
},//饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。可以与itemStyle属性同级，具体看文档
labelLine:{
show:true,
lineStyle:{color:'#3c4858'}
}//线条颜色
},//基本样式
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',//鼠标放在区域边框颜色
textColor:'#000'
}//鼠标放在各个区域的样式
},
data: [
{value: this.videoTime, name: '播放总时长'},
// {value: 25, name: '老师'},
// {value: 25, name: '25%-家长'},
],//数据，数据中其他属性，查阅文档
color: ['#51CEC6','#FFB703','#5FA0FA'],//各个区域颜色
},//数组中一个{}元素，一个图，以此可以做出环形图
],//系列列表
};
myChart1.setOption(option1);
})
},
}
}
</script>
<style scoped>
</style>
3631
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
