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

作者：羊村懒王 | 2024-02-18 15:17:16

踩

对于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