当前位置:   article > 正文

Echart使用后台Map接口_对于eachart后端接口返回map类型的数据吗

对于eachart后端接口返回map类型的数据吗
<!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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163

后端代码()

  @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;
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/羊村懒王/article/detail/108781
推荐阅读
  

闽ICP备14008679号