若依点击菜单进入饼状图和柱状图

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

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

在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);
    }
}

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

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>

后端写完写一下前端

这里是我写的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>

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

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