若依点击菜单进入饼状图和柱状图_若依首页添加数据统计图

点击党员统计，显示饼状图和柱状图

第一步，先添加一个菜单，这里的组件路径要和项目中的目录相同

在vives添加echarts.vue

在index.js中添加跳转

在后端写接口controller

package com.ruoyi.system.controller;

import com.ruoyi.common.core.controller.BaseController;
import com.ruoyi.common.core.domain.AjaxResult;
import com.ruoyi.system.mapper.MemberMapper;
import com.ruoyi.system.vo.MemberEcharts;
import com.ruoyi.system.vo.gender;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.*;


@RestController
@RequestMapping("/system/bing")
public class EchartsController extends BaseController {
    @Autowired
    private MemberMapper memberMapper;
    /**
     * 查询年龄分段
     * @return
     */
    //饼状图
    @GetMapping("/pie")
    public AjaxResult pie(){
        List<MemberEcharts> member = memberMapper.selectAge();
        ArrayList<MemberEcharts> memberEcharts = new ArrayList<>();
        for (MemberEcharts echarts : member) {
            MemberEcharts memberEcharts1 = new MemberEcharts();
            memberEcharts1.setName(echarts.getName());
            memberEcharts1.setValue(echarts.getValue());
            memberEcharts.add(memberEcharts1);
        }
        //打印台数据
        for (MemberEcharts memberEchart : memberEcharts) {
            System.out.println("饼状图数据"+"=========="+memberEchart.getName()+memberEchart.getValue());
        }

        return AjaxResult.success(memberEcharts);
    }
    /**
     * 查询年龄分段
     * @return
     */
    @GetMapping(value = "/zhu")
    public AjaxResult zhu(){
        List<gender> genders = memberMapper.selectGender();
        ArrayList<gender> genderArrayList = new ArrayList<>();
        for (gender gender1 : genders) {
            gender gender = new gender();
            gender.setGender(gender1.getGender());
            gender.setCount(gender1.getCount());
            genderArrayList.add(gender);
        }
        //打印台数据
        for (gender gender : genderArrayList) {
            System.out.println("柱状图数据"+"=========="+gender.getGender()+gender.getCount());
        }
        return AjaxResult.success(genderArrayList);
    }
}

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

实体类，这里写了两个实体类

mapper

mapper.xml

 <!--查询成绩-->
    <select id="selectAge" resultType="com.ruoyi.system.vo.MemberEcharts">
        select nnd as name,count(*) as value from
        (
        select
        case
        when age>=20 and age &lt; 30 then '20-30'
        when age>=30 and age &lt; 40 then '30-40'
        when age>=40 and age &lt; 50 then '40-50'
        when age>=50 and age &lt; 60 then '50-60'
        WHEN age > 59 THEN '大于60'
        end
        as nnd from member  where del_flag = 0
        )
        a
        group by nnd
    </select>
    <!--查询性别-->
    <select id="selectGender" parameterType="string" resultType="com.ruoyi.system.vo.gender">
        SELECT gender as gender, count(gender) as count FROM member where del_flag = 0 group by gender;
    </select>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

后端写完写一下前端

这里是我写的echarts.vue

<template>
  <div>
    <el-row>
      <el-col :span="12">
<!--        margin:用于设置DIV的外延边距也就是到父容器的距离。-->
        <div id="bing" style="margin: 100px;width: 500px;height: 700px;float: bottom"></div>
      </el-col>
      <el-col :span="12">
        <div id="zhu" style="width: 500px;height: 800px;float: bottom"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {bing, zhu} from "@/api/system/member";

export default {
  name: "echarts",
  //参数
  data() {
    return {
      pName:[],//name值
      pValue:[],//value值
      myChartStyle: { float: "left", width: "100%", height: "400px" } //图表样式
    };
  },
  mounted() {
    this.$nextTick(()=>{
      this.getList();
      this.list();
    })
  },
  created() {
  },

  methods: {
     getList() {
       bing().then(res => {
         if (res.code == 200) {
           this.myEachars(res.data);
         }
       })
    },
    list() {
      zhu().then(res => {
        console.log(res)
        if (res.code==200){
          this.zhuzhuangtu(res.data);
        }else {
          //验证失败
          this.zhuzhuangtu(null);
        }
      })
    },
    zhuzhuangtu(datms) {

      //参数拼接
      var datas = []
      var xData=[]
      if (datms==null){
        datas.push(0,0);
        xData.push("男","女");
      }else {
        for (let i = 0; i < datms.length; i++) {
          var item = {
            value: datms[i].count,
          };
          var items = {
            value: datms[i].gender,
          };
          datas.push(item);
          xData.push(items);
        }
      }

      // 基本柱状图
      const option = {
        xAxis: {
          data: xData
        },
        yAxis: {},
        series: [
          {
            type: "bar", //形状为柱状图
            data: datas
          }
        ]
      };
      const myChart = echarts.init(document.getElementById("zhu"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    //饼图
    myEachars(datm) {
       //数据
      var datas = []
      for (let i = 0; i < datm.length; i++) {
        var item = {
          value: datm[i].value,
          name: datm[i].name,
        };
        datas.push(item);
      }
      console.log(datas);
      // 基于准备好的dom，初始化echarts实例
      var bing = echarts.init(document.getElementById('bing'));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '饼图',
        },
        legend: {
          top: 'bottom',
        },
        tooltip: {//鼠标移至有数据
          trigger: 'item'
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        series: [//将饼状图的折线部分换成百分比格式
          {
            name: '年龄饼状图',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            roseType: 'area',
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              normal:{
                label: {
                 show:true,
                  formatter:'{d}%'
                }
              }
            },
            data:datas//将数据赋值给date
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      bing.setOption(option);
    },
  }



}
</script>

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
166

写完页面应该写接收后端的接口，应该在src->api下加一个echarts.js，这里我没有加，写在了别的地方

差不多就这些，想起什么没写再加吧