文章详情页

Springboot项目中运用vue+ElementUI+echarts前后端交互实现动态圆环图(推荐)

【字号：大中小】日期：2022-09-28 17:32:22浏览：8作者：猪猪

目录如何运用vue+echarts前后端交互实现动态饼图前言一、环境配置1.1 安装acharts1.2 全局引用二、圆环图前端实现 2.1 先在vue页面添加渲染盒子2.2 前端逻辑实现部分2.3 展示（可按自己需求更改前端样式）三、前后端数据交互实现3.1 创建数据库3.2 后台代码的编写如何运用vue+echarts前后端交互实现动态饼图前言

我们做项目的时候，常常需要一些统计图来展示我们的数据，作为web开发人员，会实现统计图是我们必会的技能。我将带大家来实现动态饼图的实现

一、环境配置1.1 安装acharts

//npm也一样cnpm install echarts --save1.2 全局引用

main.js中配置

//引入 echartsimport echarts from ’echarts’//注册组件Vue.prototype.$echarts = echarts

全局注册好组件之后就让我们进入正题吧，第一步先绘制圆环图吧。先上结果图：

Springboot项目中运用vue+ElementUI+echarts前后端交互实现动态圆环图(推荐)

二、圆环图前端实现 2.1 先在vue页面添加渲染盒子

<template> <div style='width:600px;height:400px;'> <div style='width:100%;height:278px;float:left;'></div> </div></template>2.2 前端逻辑实现部分

引入echart

import * as echarts from ’echarts’

注意：这里有一个大坑，如果你安装的是高版本的echarts,一定要按我这个来，import echarts from ’echarts’网上很多人都这么分享会发生init函数初始化错误

Springboot项目中运用vue+ElementUI+echarts前后端交互实现动态圆环图(推荐)

三、前后端数据交互实现3.1 创建数据库

表结构：（根据你的业务需要创建）

Springboot项目中运用vue+ElementUI+echarts前后端交互实现动态圆环图(推荐)

表数据

Springboot项目中运用vue+ElementUI+echarts前后端交互实现动态圆环图(推荐)

3.2 后台代码的编写

3.2.1 在bean包下创建QueryInfo类

该类实现得到前端请求的数据条数。相当于分页功能。

public class QueryInfo { private String query; private int pageNum=1; private int pageSize=1; public QueryInfo() { } public QueryInfo(String query, int pageNum, int pageSize) {this.query = query;this.pageNum = pageNum;this.pageSize = pageSize; } public String getQuery() {return query; } public int getPageNum() {return pageNum; } public int getPageSize() {return pageSize; } public void setQuery(String query) {this.query = query; } public void setPageNum(int pageNum) {this.pageNum = pageNum; } public void setPageSize(int pageSize) {this.pageSize = pageSize; } @Override public String toString() {return 'QueryInfo{' +'query=’' + query + ’’’ +', pageNum=' + pageNum +', pageSize=' + pageSize +’}’; }}

3.2.2 在bean包下创建Showdate类

public class Showdate { private String name; private String itemStyle; private int value; public Showdate() { } public Showdate(String name, String itemStyle, int value) {this.name = name;this.itemStyle = itemStyle;this.value = value; } public String getName() {return name; } public void setName1(String name) {this.name= name; } public String getItemStyle() {return itemStyle; } public void setItemStyle(String itemStyle) {this.itemStyle = itemStyle; } public int getValue() {return value; } public void setValue(int value) {this.value = value; } @Override public String toString() {return 'Showdate{' +'name=’' + name + ’’’ +', itemStyle=’' + itemStyle + ’’’ +', value=' + value +’}’; }}

3.2.3 在resources下创建Mapper

1.在Mapper中创建ShowDataMapper.xml

<?xml version='1.0' encoding='UTF-8' ?><!DOCTYPE mapper PUBLIC '-//mybatis.org//DTD Mapper 3.0//EN''http://mybatis.org/dtd/mybatis-3-mapper.dtd'><mapper namespace='com.naughty.userlogin02.dao.ShowdateDao'> <select resultType='com.naughty.userlogin02.bean.Showdate'>SELECT * FROM date1<if test='name!=null '> WHERE name like #{name}</if>LIMIT #{pageStart},#{pageSize} </select> <update id='updatenew'>UPDATE date1 SET value = #{count} WHERE name = #{name} </update></mapper>

2.在resources下创建application.yml用于配置数据库和端口号

# mysqlspring: datasource: #MySQL配置 driverClassName: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/weblog?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=UTC username: root password: rootmybatis: mapper-locations: classpath:mapper/*.xml type-aliases-package: com.example.demo.modelserver: port: 9000

3.2.4 在Dao下创建ShowdateDao

里面有两个接口，如果你需要操作数据库，就需要在ShowdateDao中编写接口方法；在ShowDataMapper.xml中编写sql语句。我这里实现了修改和查找；

import com.naughty.userlogin02.bean.Showdate;import org.apache.ibatis.annotations.Param;import org.springframework.stereotype.Repository;import java.util.List;@Repositorypublic interface ShowdateDao { public List<Showdate> getAlldate(@Param('name') String name, @Param('pageStart') int pageStart, @Param('pageSize') int pageSize); public int updatenew(String name, int count);}

3.2.5 在Controller下创建ShowdateController

在ShowdateController中要注解使用空间

@Autowired ShowdateDao showdateDao;//你需要传给前端的数据库表 @Autowired FlowDao flowDao;//你的数据来源的效果数据库表

package com.naughty.userlogin02.controller;import com.alibaba.fastjson.JSON;import com.naughty.userlogin02.bean.*;import com.naughty.userlogin02.dao.CheckDao;import com.naughty.userlogin02.dao.FlowDao;import com.naughty.userlogin02.dao.SafeDao;import com.naughty.userlogin02.dao.ShowdateDao;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.bind.annotation.*;import java.util.HashMap;import java.util.List;import java.util.Stack;@RestControllerpublic class ShowdateController { @Autowired ShowdateDao showdateDao; @Autowired FlowDao flowDao;//前台刷新日志数据 @CrossOrigin @RequestMapping('/alldate')//前端请求通道 public String getAlldateList(QueryInfo queryInfo){System.out.println(queryInfo);int pageStart = (queryInfo.getPageNum()-1)*queryInfo.getPageSize();List<Showdate> dates = showdateDao.getAlldate('%'+queryInfo.getQuery()+'%',pageStart,queryInfo.getPageSize()); for(int i =0;i<dates.size();i++){ System.out.println(dates.get(i).toString()); }//校验//封装校验后的流量日志HashMap<String, Object> res = new HashMap<>();res.put('flag','success');res.put('opinionData2',dates );String date_json= JSON.toJSONString(res);System.out.println(date_json.toString());return date_json; }//数据库数据来源的实现方法，就是改变数据库表Date1中得数据 @RequestMapping('/getupdata') public String updateDate(QueryInfo queryInfo){String s = '流量日志异常';String s1 ='审计url异常';String s2 ='威胁攻击日志';String s3 ='正常网络日志';/*int count = getUserList(queryInfo);int count1 =getChickList(queryInfo); //四个方法需要你自己根据具体业务实现int count2 =getSafeDate(queryInfo);int count3 =allBlognum(queryInfo)-(count+count1+count2);*/showdateDao.updatenew(s,count);showdateDao.updatenew(s1,count1);showdateDao.updatenew(s2,count2);int i= showdateDao.updatenew(s3,count3);System.out.println('异常类型:'+s);System.out.println('异常日志数量:'+count);String str = i >0?'success':'error';return str; }}

3.2.6 修改前端接口

Js全部代码：

Springboot项目中运用vue+ElementUI+echarts前后端交互实现动态圆环图(推荐)

后台返回数据：

Springboot项目中运用vue+ElementUI+echarts前后端交互实现动态圆环图(推荐)

以上就是Springboot项目中运用vue+ElementUI+echarts前后端交互实现动态圆环图的详细内容，更多关于Springboot动态圆环图的资料请关注好吧啦网其它相关文章！

Spring

上一条：vue3使用vue-router的完整步骤记录下一条：Vue实现动态样式的多种方法汇总

相关文章：

1. HTML <!DOCTYPE> 标签2. CSS 使用Sprites技术实现圆角效果3. CSS可以做的几个令你叹为观止的实例分享4. 详解盒子端CSS动画性能提升5. xpath简介_动力节点Java学院整理6. 利用CSS3新特性创建透明边框三角7. ASP实现加法验证码8. 怎样才能用js生成xmldom对象，并且在firefox中也实现xml数据岛？9. HTML DOM setInterval和clearInterval方法案例详解10. 存储于xml中需要的HTML转义代码

排行榜

					
					docker 查看容器日志命令的实现
H5页面使用audio标签播放音频
详解盒子端CSS动画性能提升
HTML DOM setInterval和clearInterval方法案例详解
PHP字符串前后字符或空格删除方法介绍
HTML <!DOCTYPE> 标签
CSS 使用Sprites技术实现圆角效果
使用FormData进行Ajax请求上传文件的实例代码
xpath简介_动力节点Java学院整理
存储于xml中需要的HTML转义代码
Docker stop停止/remove删除所有容器
				

热门标签