Vue3-（九）Vue中使用Echarts时后端传的数据的格式问题

本文最后更新于：April 30, 2022 am

积土成山，风雨兴焉；积水成渊，蛟龙生焉；积善成德，而神明自得，圣心备焉。故不积跬步，无以至千里，不积小流无以成江海。齐骥一跃，不能十步，驽马十驾，功不在舍。面对悬崖峭壁，一百年也看不出一条裂缝来，但用斧凿，能进一寸进一寸，能进一尺进一尺，不断积累，飞跃必来，突破随之。

目录

主要记录Echarts从后台获取到的数据的格式问题，因为在Echarts中，每一种图形所要的数据格式是不一样的。比如

柱状图：[ { x : [ ] } ，{ y : [ ] } ] （这个需要特别注意，比较容易错）

饼状图：[ {value:123,name:’abc’} ，{value:12,name:’def’} ]

因为我自己也只用到了柱状图和饼状图，所以这里就记录这两种图形所需要的数据格式。

柱状图

前端

封装在了方法中，主要是方便动态加载数据。

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
getShow(){
      var option = {
        color: ['#17abd5'],
        title: {
          text: '年级分布情况',
          subtext: '数据统计',
          textStyle: {
            color: '#31b9cb'
          },
          left: 'center'
        },
        toolbox: {
          feature: {
            saveAsImage: {},
            dataView: {},
            magicType: {
              type: ['bar', 'line']
            }
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '数量',
            type: 'bar',
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'red' //0%处的颜色
                },
                  {
                    offset: 1,
                    color: 'blue' //100%处的颜色
                  }
                ]
              }
            },
            markPoint: {
              data: [
                {
                  type: 'max',
                  name: '这是最大值'
                },
                {
                  type: 'min',
                  name: '这是最小值'
                }
              ]
            },
            markLine: {
              data: [
                {
                  type: 'average',
                  name: '这是平均值' //这个name并不会在页面中显示
                }
              ]
            },
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            },
            data: []
          }
        ]
      }

      var chartDom = document.getElementById('grade');
      var myChart = echarts.init(chartDom);

      this.$http.get("/item/getGradeByTypeId/"+this.typebh).then(res => {
        if (res.statusCode == '200') {
          option.xAxis.data = res.data.x
          option.series[0].data = res.data.y
          myChart.setOption(option);
        }else{
          ElMessage.error('加载失败！')
        }
      }).catch(() => {
        ElMessage.error('数据加载失败！')
      })
      option && myChart.setOption(option);
    }

后端

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
public R getGradeByTypeId(@PathVariable String typeId){

        QueryWrapper<Item> qw = new QueryWrapper<>();
        qw.eq("typeID",typeId);
        // 对应报名表编号的所有人
        List<Item> items = itemMapper.selectList(qw);

        //找出所有的年级
        Set<String> grades = new HashSet<>();

        for(Item it: items){
            grades.add(it.getItemCount());
        }

        //找出每一个年级对应的人数
            //年级
        List<String> gradess = new ArrayList<>();
            //每个年级的人员
        List<Integer> values = new ArrayList<>();
        Map<String, Object> map = new HashMap<>();
        for(String grade: grades){
            gradess.add(grade);

            QueryWrapper<Item> qwmid = new QueryWrapper<>();
            qwmid.eq("item_grade",grade);
            qwmid.eq("typeID",typeId);
            Integer integer = itemMapper.selectCount(qwmid);
            values.add(integer);
        }
        map.put("x",CollUtil.newArrayList(gradess));
        map.put("y",CollUtil.newArrayList(values));
        return R.SUCCESS(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
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
getShow(){
      var chartDom = document.getElementById('professional');
      var myChart = echarts.init(chartDom);
      var option = {
        title: {
          text: '专业分布情况',
          subtext: '数据统计',
          textStyle: {
            color: '#aa31cb'
          },
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: function(arg){
            return arg.name+":\n"+arg.value+" \n"+"占比:"+arg.percent+"%"
          }
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          // data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        series: [
          {
            name: '专业分布',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            selectedMode: 'multiple',
            selectedOffset: 30
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);

      this.$http.get("/item/getProfessionByTypeId/"+this.typebh).then(res => {
        if (res.statusCode == '200') {
          console.log(res.data)
          // option.xAxis.data = res.data.x
          option.series[0].data = res.data
          myChart.setOption(option);
        }else{
          ElMessage.error('加载失败！')
        }
      }).catch(() => {
        ElMessage.error('数据加载失败！')
      })
      option && myChart.setOption(option);
    }

后端

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
public R getProfessionByTypeId(@PathVariable String typeId){
        QueryWrapper<Item> qw = new QueryWrapper<>();
        qw.eq("typeID",typeId);
        // 对应报名表的所有人
        List<Item> items = itemMapper.selectList(qw);

        //获取专业
        Set<String> pros = new HashSet<>();
        for(Item it: items){
            pros.add(it.getDescription());
        }

        //找出每一个专业对应的人数
        List<EchartsR> ans = new ArrayList<>();
        for(String it: pros){
            EchartsR r = new EchartsR();
            r.setName(it);

            QueryWrapper<Item> qwmid = new QueryWrapper<>();
            qwmid.eq("description",it);
            qwmid.eq("typeID",typeId);
            Integer integer = itemMapper.selectCount(qwmid);
            r.setValue(integer);
            ans.add(r);
        }
        return R.SUCCESS(ans);

    }

类EchartsR

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
package com.tothefor.pojo.dto;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.ToString;

/**
 * @Author DragonOne
 * @Date 2022/4/29 22:43
 * @墨水记忆 www.tothefor.com
 */

@Data
@AllArgsConstructor
@NoArgsConstructor
@ToString
public class EchartsR {
    private String name;
    private Integer value;
}