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

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

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

在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 {@Autowiredprivate 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(selectcasewhen 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'endas nnd from member  where del_flag = 0)agroup 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，这里我没有加，写在了别的地方

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

若依点击菜单进入饼状图和柱状图相关推荐

若依项目制作饼状图和柱状图
这里的是根据年两分段做一个饼状图,根据性别人数制作柱状图 echarts+vue 饼状图先写一个实体类,将查到的数据放在实体类中,写一个mapper->mapper.xml->contr ...
jasper(二)：制作饼状图和柱状图
在新建一个框架之后我们也是要执行 add dataset,来添加一个链接数据库的语句,因为这是个饼状图,所以要用group by 全部放入右边的框架点完成接下来,就是要创建饼状图,就要点击窗口 ...
Flutter 饼状图、柱状图、拆线图、Flutter动态饼图、Flutter图表 flutter_echart 开发文档
在码农的世界里,优美的应用体验,来源于程序员对细节的处理以及自我要求的境界,年轻人也是忙忙碌碌的码农中一员,每天.每周,都会留下一些脚印,就是这些创作的内容,有一种执着,就是不知为什么,如果你迷茫,不 ...
封装构造函数，用canvas写饼状图和柱状图
封装构造函数,用canvas写饼状图和柱状图封装函数 // 场景 function XDLScence( options ) {this.stage = options.stage;//执行场景的初 ...
php生成饼状图柱形图,求一个饼状图或柱状图php生成类或例子
求一个饼状图或柱状图php生成类或例子时间:2006/7/19 6:10:04 作者:佚名人气:268 PHP代码:---------------------------------------- ...
Java后台生成图表——主代码（折线图，饼状图，柱状图，-》并产出图片PDF或其他格式的图片内容）
声明: 本文采用的数据均来源于网络,本人只用于学习记录,若有侵权,还望能及时联系. Maven 的 POM 依赖 <!--用于jfreechart生成图片 --&g ...
java导出pdf报告之六：使用jfreechart生成饼状图和柱状图
关于使用jfreechart生成饼状图和柱状图网上也有一大推,我在这里也不做太多介绍,就直接附上我的实现,并添加了一下注释,供大家参考. 生成饼状图: /*** @param name 图片的名称* ...
springboot+mybatisplus+thymeleaf导入导出excel表格和制作饼状图，柱状图
这是我们的项目结构. 我们导入的依赖. application.yml配置文件. goods实体类 type实体类 1.导出前端代码: JavaScript代码: 通过这里跳转到后端导出的工具 ...
SpringBoot、EasyPoi、Echarts 实现文档导入、出、图表显示 (饼状图、柱状图) 保姆级教程
一.介绍环境 EasyPOI: 现在我们就来介绍下EasyPoi,首先感谢EasyPoi 的开发者.EasyPoi开源 easypoi 是为了让开发者快速的实现excel,word,pdf的导入导出 ...

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

在后端写接口controller

后端写完写一下前端

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

若依点击菜单进入饼状图和柱状图相关推荐

最新文章

热门文章