Springboot运用vue+echarts前后端交互实现动态圆环图

目录
  • 前言
  • 一、环境配置
    • 1.1 安装acharts
    • 1.2 全局引用
  • 二、圆环图前端实现
    • 2.1 先在vue页面添加渲染盒子
    • 2.2 前端逻辑实现部分
    • 2.3 展示(可按自己需求更改前端样式)
  • 三、前后端数据交互实现
    • 3.1 创建数据库
    • 3.2 后台代码的编写

前言

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

一、环境配置

1.1 安装acharts

//npm也一样
cnpm install echarts --save

1.2 全局引用

main.js中配置

//引入 echarts
import echarts from 'echarts'
//注册组件
Vue.prototype.$echarts = echarts

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

二、圆环图前端实现

2.1 先在vue页面添加渲染盒子

<template>
  <div class="test2" style="width:600px;height:400px;">
      <div id="myChart" style="width:100%;height:278px;float:left;"></div>
  </div>
</template>

2.2 前端逻辑实现部分

引入echart

import * as echarts from 'echarts'

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

<script>
     import * as echarts from 'echarts'
     export default {
       name: 'test2',
       data () {
         return {
         queryInfo: {
         query: "",
         pageNum: 1,
         pageSize: 4,//后端请求的数据类别4个,如果你有多个,就更改这个参数
       },
       queryInfof: {
         query: "",
         pageNum: 1,
         pageSize: 100,
       },
           myChart: '',
           opinionData2: [

           {"itemStyle":"#3F8FFF","name":"威胁攻击日志","value":200},
           {"itemStyle":"#6DC8EC","name":"审计url异常","value":388},
           {"itemStyle":"#1FC48D","name":"正常网络日志","value":5287},
           {"itemStyle":"red","name":"流量日志异常","value":320}
           ]
         }
       },
       mounted: function () {
          this.drawLine();

       },

       methods: {
          async  drawLine () {
              // 调用post请求
     /* const { data: res } = await this.$http.get("alldate", {
        params: this.queryInfo
      });
      if (res.flag != "success") {
        return this.$message.error("该数据获取失败!!!");
      }

      console.log(res.flag)
       this.opinionData2 = res.opinionData2; // 将返回数据赋值*/
           this.myChart = echarts.init(document.getElementById('myChart'))
           this.myChart.setOption({
             title: {
               text: '网络日志异常流量分析', // 主标题
               subtext: '', // 副标题
               x: 'left' // x轴方向对齐方式
             },
             grid: { containLabel: true },
             tooltip: {
               trigger: 'item',
               formatter: '{a} <br/>{b} : {d}%'
             },
             // color: ['#1FC48D', '#F5A60A', '#6DC8EC', '#3F8FFF'],
             color: ['#1FC48D', 'red', '#6DC8EC', '#3F8FFF'],
             // backgroundColor: '#ffffff',
             legend: {
               orient: 'vertical',
               icon: 'circle',
               align: 'left',
               x: 'right',
               y: 'bottom',
               data: ['审计url异常', '正常网络日志', '流量日志异常', '威胁攻击日志']
             },
             series: [
               {
                 name: '网络日志状态',
                 type: 'pie',
                 radius: ['50%', '70%'],
                 avoidLabelOverlap: false,
                 center: ['40%', '50%'],
                 itemStyle: {
                   emphasis: {
                     shadowBlur: 10,
                     shadowOffsetX: 0,
                     shadowColor: 'rgba(0, 0, 0, 0.5)'
                   },
                   color: function (params) {
                     // 自定义颜色
                     var colorList = ['#1FC48D', 'red', '#6DC8EC', '#3F8FFF']
                     return colorList[params.dataIndex]
                   }
                 },
                 data: this.opinionData2
               }
             ]
           })
         },
       }
     }
     </script>

2.3 展示(可按自己需求更改前端样式)

三、前后端数据交互实现

3.1 创建数据库

表结构:(根据你的业务需要创建)

表数据

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 id="getAlldate" 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用于配置数据库和端口号

# mysql
spring:
  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: root

mybatis:
  mapper-locations: classpath:mapper/*.xml
  type-aliases-package: com.example.demo.model
server:
  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;
@Repository
public 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;

@RestController
public 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全部代码:

   <script>
     import * as echarts from 'echarts'
     export default {
       name: 'test2',
       data () {
         return {
         queryInfo: {
         query: "",
         pageNum: 1,
         pageSize: 4,
       },
       queryInfof: {
         query: "",
         pageNum: 1,
         pageSize: 100,
       },
           myChart: '',
           opinionData2: [

//清空前端测试数据
           ]
         }
       },
       mounted: function () {
          this.drawLine();

       },
       created() {
         this.getdateList();  //每次进入页面刷新数据库数据实现动态数据绑定
      },
       methods: {
          async  drawLine () {
              // 调用post请求,获得后台数据库的数值
      const { data: res } = await this.$http.get("alldate", {
        params: this.queryInfo
      });
      if (res.flag != "success") {
        return this.$message.error("该数据获取失败!!!");
      }

      console.log(res.flag)
       this.opinionData2 = res.opinionData2; // 将返回数据赋值
           this.myChart = echarts.init(document.getElementById('myChart'))
           this.myChart.setOption({
             title: {
               text: '网络日志异常流量分析', // 主标题
               subtext: '', // 副标题
               x: 'left' // x轴方向对齐方式
             },
             grid: { containLabel: true },
             tooltip: {
               trigger: 'item',
               formatter: '{a} <br/>{b} : {d}%'
             },
             // color: ['#1FC48D', '#F5A60A', '#6DC8EC', '#3F8FFF'],
             color: ['#1FC48D', 'red', '#6DC8EC', '#3F8FFF'],
             // backgroundColor: '#ffffff',
             legend: {
               orient: 'vertical',
               icon: 'circle',
               align: 'left',
               x: 'right',
               y: 'bottom',
               data: ['审计url异常', '正常网络日志', '流量日志异常', '威胁攻击日志']
             },
             series: [
               {
                 name: '网络日志状态',
                 type: 'pie',
                 radius: ['50%', '70%'],
                 avoidLabelOverlap: false,
                 center: ['40%', '50%'],
                 itemStyle: {
                   emphasis: {
                     shadowBlur: 10,
                     shadowOffsetX: 0,
                     shadowColor: 'rgba(0, 0, 0, 0.5)'
                   },
                   color: function (params) {
                     // 自定义颜色
                     var colorList = ['#1FC48D', 'red', '#6DC8EC', '#3F8FFF']
                     return colorList[params.dataIndex]
                   }
                 },
                 data: this.opinionData2
               }
             ]
           })
         },
         async getdateList() {
      // 调用post请求
      const { data: res } = await this.$http.get("getupdata", {
        params: this.queryInfof
      });
      if (res != "success") {
        return this.$message.error("该数据获取失败!!!");
      }
      console.log(res)
        },
       }
     }
     </script>

后台返回数据:

到此这篇关于Springboot运用vue+echarts前后端交互实现动态圆环图的文章就介绍到这了,更多相关Springboot vue动态圆环图 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue+springboot图片上传和显示的示例代码

    一.前言 在使用spring boot做后台系统,vue做前端系统,给客户开发一套系统时候,其中用到了图片上传和显示的功能. 二.环境 前端:vue 前端组件:tinymce 后台:spring boot:2.2.3 三.正文 在客户开发一套门户管理系统时,集成了tinymce组件,用于编辑内容,springboot不同于其他项目.  是集成tomcat的,文件和图片是不能直接访问的.所以我在做集成富文本编辑器时,需要处理图片的问题. 这个问题跟上传头像等显示图片的功能是类似的.下面记录详情步骤

  • Springboot运用vue+echarts前后端交互实现动态圆环图

    目录 前言 一.环境配置 1.1 安装acharts 1.2 全局引用 二.圆环图前端实现 2.1 先在vue页面添加渲染盒子 2.2 前端逻辑实现部分 2.3 展示(可按自己需求更改前端样式) 三.前后端数据交互实现 3.1 创建数据库 3.2 后台代码的编写 前言 我们做项目的时候,常常需要一些统计图来展示我们的数据,作为web开发人员,会实现统计图是我们必会的技能.我将带大家来实现动态饼图的实现 一.环境配置 1.1 安装acharts //npm也一样 cnpm install echa

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

    目录 如何运用vue+echarts前后端交互实现动态饼图 前言 一.环境配置 1.1 安装acharts 1.2 全局引用 二.圆环图前端实现 2.1 先在vue页面添加渲染盒子 2.2 前端逻辑实现部分 2.3 展示(可按自己需求更改前端样式) 三.前后端数据交互实现 3.1 创建数据库 3.2 后台代码的编写 如何运用vue+echarts前后端交互实现动态饼图 前言 我们做项目的时候,常常需要一些统计图来展示我们的数据,作为web开发人员,会实现统计图是我们必会的技能.我将带大家来实现动

  • SpringBoot+mybatis+Vue实现前后端分离项目的示例

    目录 一.SpringBoot环境搭建 1.项目的数据库 2.项目所需依赖 3.application.yml文件 4.入口类 二.vue实现前后端分离 1.前端页面 2.springBoot控制层 3.mapper文件 4.项目完整源代码 vue前后端分离实现功能:员工的增删改(先实现数据回显之后,再进行修改)查 一.SpringBoot环境搭建 1.项目的数据库 /* Navicat Premium Data Transfer Source Server : windows Source S

  • SpringBoot使用WebSocket实现前后端交互的操作方法

    目录 背景 实现 一.导入依赖 二.新建WebSocket配置类,注入Bean 三.新建WebSocket服务端,在其中处理websocket逻辑 四.客户端实现,可以借助FreeMarker模板工具直接写在ftl文件里. 五.测试 背景 我们都知道http协议只能在浏览器单方面向服务器发起请求时获得响应,然而服务器不能主动向浏览器推送消息,想要实现浏览器的主动推送目前有两种主流的实现方式: 轮询:缺点很多,但是实现简单 websocket: 在浏览器和服务器之间建立TCP连接,实现全双工通信

  • vue.js前后端数据交互之提交数据操作详解

    本文实例讲述了vue.js前后端数据交互之提交数据操作.分享给大家供大家参考,具体如下: 前端小白刚开始做页面的时候,我们的前端页面中经常会用到表单,所以学会提交表单也是一个基本技能,其实用ajax就能实现,但他的原始语法有点...额 ...复杂,所以这里给大家提供一种用vue-resource向后端提交数据. (1)第一步,先在template中写一个表单: <el-form :model="ruleForm" :rules="rules" ref=&quo

  • Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)

    Vue-CLI项目-axios模块前后端交互(类似ajax提交)08.31自我总结,内容如下: Vue-CLI项目-axios前后端交互 一.模块的安装 npm install axios --save #--save可以不用写 二.配置main.js import axios from 'axios' Vue.prototype.$axios = axios; 三.使用 created() { // 组件创建成功的钩子函数 // 拿到要访问课程详情的课程id let id = this.$ro

  • Android的简单前后端交互(okHttp+springboot+mysql)

    前言 前阵子发现了个有意思又好用的框架--okHttp.由于课程设计需要,无意间发现了这个框架,打算利用此框架与后端交互,可以参考前后端分离的项目,把android当做前端,springboot当做后端,以下是二者的简单交互. okHttp说明 (1)android网络框架之OKhttp 一个处理网络请求的开源项目,是安卓端最火热的轻量级框架,由移动支付Square公司贡献(该公司还贡献了Picasso) 用于替代HttpUrlConnection和Apache HttpClient (2)ok

  • SpringBoot+VUE实现前后端分离的实战记录

    一,前端VUE项目 这里使用VUE UI创建一个VUE项目 命令行输入vue ui进入 手动配置项目 选中这三个 点击下一步->点击创建项目 用IDEA打开刚才创建的项目 IDEA中的安装vue插件并重启 IDEA控制台中输入vue add axios安装axios 新建一个Show.vue 在index,js的routes中配置它的路由 编写Show,vue向后端请求数据并展示 <template> <div> <table> <tr> <td

  • springboot vue接口测试前后端树节点编辑删除功能

    目录 基于springboot+vue 的测试平台开发 一.编辑功能 1. 编辑页外显 2. 实现后端接口 3. 前后联调 4. 测试 二.删除功能 1. 后端接口 2. 前端实现 3. 测试 基于springboot+vue 的测试平台开发 继续更新. 一.编辑功能 1. 编辑页外显 点击树节点的编辑按钮,打开对话框,展示原有的节点名称. 本来树形控件里没有自带的编辑操作,我直接加了一个按钮在上面,绑定点击事件调用edit(data)方法. 为了确认 data 可用,我在edit方法中打印了一

  • springboot vue项目管理前后端实现编辑功能

    目录 基于springboot+vue 的测试平台开发 一.打开编辑页面显示数据 1. 编辑按钮 2. 编写 handleUpdate 方法处理数据外显 二.保存编辑页面的内容 1. 后端增加 update 接口 2. 前端页面修改 基于springboot+vue 的测试平台开发 继续更新 今天实现项目列表的编辑功能: 点击[编辑]按钮,打开对话框,显示此条记录的信息修改对话框表单内容,点击对话框[保存]按钮,更新此条记录 一.打开编辑页面显示数据 1. 编辑按钮 之前复制的 table 组件

随机推荐