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

如何运用vue+echarts前后端交互实现动态饼图

前言

我们做项目的时候，常常需要一些统计图来展示我们的数据，作为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+elementui+echarts前后端交互实现动态圆环图的详细内容，更多关于springboot动态圆环图的资料请关注其它相关文章！