经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » Echarts » 查看文章
Springboot运用vue+echarts前后端交互实现动态圆环图
来源：jb51　　时间：2021/6/15 11:27:57　　对本文有异议

前言

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

一、环境配置

1.1 安装acharts

  1. //npm也一样
  2. cnpm install echarts --save

1.2 全局引用

main.js中配置

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

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

在这里插入图片描述

二、圆环图前端实现

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

  1. <template>
  2.   <div class="test2" style="width:600px;height:400px;">
  3.       <div id="myChart" style="width:100%;height:278px;float:left;"></div>
  4.   </div>
  5. </template>
  6.  

2.2 前端逻辑实现部分

引入echart

  1. import * as echarts from 'echarts'

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

  1. <script>
  2.      import * as echarts from 'echarts'
  3.      export default {
  4.        name: 'test2',
  5.        data () {
  6.          return {
  7.          queryInfo: {
  8.          query: "",
  9.          pageNum: 1,
  10.          pageSize: 4,//后端请求的数据类别4个，如果你有多个，就更改这个参数
  11.        },
  12.        queryInfof: {
  13.          query: "",
  14.          pageNum: 1,
  15.          pageSize: 100,
  16.        },
  17.            myChart: '',
  18.            opinionData2: [
  19.            
  20.            {"itemStyle":"#3F8FFF","name":"威胁攻击日志","value":200},
  21.            {"itemStyle":"#6DC8EC","name":"审计url异常","value":388},  
  22.            {"itemStyle":"#1FC48D","name":"正常网络日志","value":5287},         
  23.            {"itemStyle":"red","name":"流量日志异常","value":320}      
  24.            ]
  25.          }
  26.        },
  27.        mounted: function () {
  28.           this.drawLine();
  29.  
  30.        },
  31.      
  32.        methods: {
  33.           async  drawLine () {
  34.               // 调用post请求
  35.      /* const { data: res } = await this.$http.get("alldate", {
  36.         params: this.queryInfo
  37.       });
  38.       if (res.flag != "success") {
  39.         return this.$message.error("该数据获取失败！！！");
  40.       }
  41.  
  42.       console.log(res.flag)
  43.        this.opinionData2 = res.opinionData2; // 将返回数据赋值*/
  44.            this.myChart = echarts.init(document.getElementById('myChart'))
  45.            this.myChart.setOption({
  46.              title: {
  47.                text: '网络日志异常流量分析', // 主标题
  48.                subtext: '', // 副标题
  49.                x: 'left' // x轴方向对齐方式
  50.              },
  51.              grid: { containLabel: true },
  52.              tooltip: {
  53.                trigger: 'item',
  54.                formatter: '{a} <br/>{b} : {d}%'
  55.              },
  56.              // color: ['#1FC48D', '#F5A60A', '#6DC8EC', '#3F8FFF'],
  57.              color: ['#1FC48D', 'red', '#6DC8EC', '#3F8FFF'],
  58.              // backgroundColor: '#ffffff',
  59.              legend: {
  60.                orient: 'vertical',
  61.                icon: 'circle',
  62.                align: 'left',
  63.                x: 'right',
  64.                y: 'bottom',
  65.                data: ['审计url异常', '正常网络日志', '流量日志异常', '威胁攻击日志']
  66.              },
  67.              series: [
  68.                {
  69.                  name: '网络日志状态',
  70.                  type: 'pie',
  71.                  radius: ['50%', '70%'],
  72.                  avoidLabelOverlap: false,
  73.                  center: ['40%', '50%'],
  74.                  itemStyle: {
  75.                    emphasis: {
  76.                      shadowBlur: 10,
  77.                      shadowOffsetX: 0,
  78.                      shadowColor: 'rgba(0, 0, 0, 0.5)'
  79.                    },
  80.                    color: function (params) {
  81.                      // 自定义颜色
  82.                      var colorList = ['#1FC48D', 'red', '#6DC8EC', '#3F8FFF']
  83.                      return colorList[params.dataIndex]
  84.                    }
  85.                  },
  86.                  data: this.opinionData2
  87.                }
  88.              ]
  89.            })
  90.          },
  91.        }
  92.      }
  93.      </script>

2.3 展示（可按自己需求更改前端样式）

在这里插入图片描述

三、前后端数据交互实现

3.1 创建数据库

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

在这里插入图片描述

表数据

在这里插入图片描述

3.2 后台代码的编写

3.2.1 在bean包下创建QueryInfo类

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

  1. public class QueryInfo {
  2.     private String query;
  3.     private int pageNum=1;
  4.     private int pageSize=1;
  5.  
  6.     public QueryInfo() {
  7.     }
  8.  
  9.     public QueryInfo(String query, int pageNum, int pageSize) {
  10.         this.query = query;
  11.         this.pageNum = pageNum;
  12.         this.pageSize = pageSize;
  13.     }
  14.  
  15.     public String getQuery() {
  16.         return query;
  17.     }
  18.  
  19.     public int getPageNum() {
  20.         return pageNum;
  21.     }
  22.  
  23.     public int getPageSize() {
  24.         return pageSize;
  25.     }
  26.  
  27.     public void setQuery(String query) {
  28.         this.query = query;
  29.     }
  30.  
  31.     public void setPageNum(int pageNum) {
  32.         this.pageNum = pageNum;
  33.     }
  34.  
  35.     public void setPageSize(int pageSize) {
  36.         this.pageSize = pageSize;
  37.     }
  38.  
  39.     @Override
  40.     public String toString() {
  41.         return "QueryInfo{" +
  42.                 "query='" + query + '\'' +
  43.                 ", pageNum=" + pageNum +
  44.                 ", pageSize=" + pageSize +
  45.                 '}';
  46.     }
  47. }

3.2.2 在bean包下创建Showdate类

  1. public class Showdate {
  2.     private  String name;
  3.     private  String itemStyle;
  4.     private  int value;
  5.  
  6.  
  7.     public Showdate() {
  8.  
  9.     }
  10.  
  11.     public Showdate(String name, String itemStyle, int value) {
  12.         this.name = name;
  13.         this.itemStyle = itemStyle;
  14.         this.value = value;
  15.     }
  16.  
  17.     public String getName() {
  18.         return name;
  19.     }
  20.  
  21.     public void setName1(String name) {
  22.         this.name= name;
  23.     }
  24.  
  25.     public String getItemStyle() {
  26.         return itemStyle;
  27.     }
  28.  
  29.     public void setItemStyle(String itemStyle) {
  30.         this.itemStyle = itemStyle;
  31.     }
  32.  
  33.     public int getValue() {
  34.         return value;
  35.     }
  36.  
  37.     public void setValue(int value) {
  38.         this.value = value;
  39.     }
  40.  
  41.     @Override
  42.     public String toString() {
  43.         return "Showdate{" +
  44.                 "name='" + name + '\'' +
  45.                 ", itemStyle='" + itemStyle + '\'' +
  46.                 ", value=" + value +
  47.                 '}';
  48.     }
  49. }

3.2.3 在resources下创建Mapper

1.在Mapper中创建ShowDataMapper.xml

  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <!DOCTYPE mapper  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  3.         "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
  4.  
  5. <mapper namespace="com.naughty.userlogin02.dao.ShowdateDao">
  6.  
  7.  
  8.     <select id="getAlldate" resultType="com.naughty.userlogin02.bean.Showdate">
  9.         SELECT * FROM date1
  10.         <if test="name!=null ">
  11.             WHERE name like #{name}
  12.         </if>
  13.         LIMIT #{pageStart},#{pageSize}
  14.     </select>
  15.  
  16.     <update id="updatenew">
  17.         UPDATE date1 SET value = #{count} WHERE name = #{name}
  18.     </update>
  19.  
  20.  
  21. </mapper>

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

  1. # mysql
  2. spring:
  3.   datasource:
  4.     #MySQL配置
  5.     driverClassName:  com.mysql.cj.jdbc.Driver
  6.     url: jdbc:mysql://localhost:3306/weblog?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=UTC
  7.     username: root
  8.     password: root
  9.  
  10. mybatis:
  11.   mapper-locations: classpath:mapper/*.xml
  12.   type-aliases-package: com.example.demo.model
  13. server:
  14.   port: 9000

3.2.4 在Dao下创建ShowdateDao

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

  1. import com.naughty.userlogin02.bean.Showdate;
  2. import org.apache.ibatis.annotations.Param;
  3. import org.springframework.stereotype.Repository;
  4.  
  5. import java.util.List;
  6. @Repository
  7. public interface ShowdateDao {
  8.  
  9.     public List<Showdate> getAlldate(@Param("name") String name, @Param("pageStart") int pageStart, @Param("pageSize") int pageSize);
  10.  
  11.     public int updatenew(String name, int count);
  12. }
  13.  

3.2.5 在Controller下创建ShowdateController

在ShowdateController中要注解使用空间

  1.    @Autowired
  2.     ShowdateDao showdateDao;//你需要传给前端的数据库表
  3.     @Autowired
  4.     FlowDao flowDao;//你的数据来源的效果数据库表
  1. package com.naughty.userlogin02.controller;
  2.  
  3. import com.alibaba.fastjson.JSON;
  4. import com.naughty.userlogin02.bean.*;
  5. import com.naughty.userlogin02.dao.CheckDao;
  6. import com.naughty.userlogin02.dao.FlowDao;
  7. import com.naughty.userlogin02.dao.SafeDao;
  8. import com.naughty.userlogin02.dao.ShowdateDao;
  9. import org.springframework.beans.factory.annotation.Autowired;
  10. import org.springframework.web.bind.annotation.*;
  11.  
  12. import java.util.HashMap;
  13. import java.util.List;
  14. import java.util.Stack;
  15.  
  16. @RestController
  17. public class ShowdateController {
  18.  
  19.     @Autowired
  20.     ShowdateDao showdateDao;
  21.     @Autowired
  22.     FlowDao flowDao;
  23. //前台刷新日志数据
  24.     @CrossOrigin
  25.     @RequestMapping("/alldate")//前端请求通道
  26.     public String getAlldateList(QueryInfo queryInfo){
  27.         System.out.println(queryInfo);
  28.         int pageStart = (queryInfo.getPageNum()-1)*queryInfo.getPageSize();
  29.         List<Showdate> dates = showdateDao.getAlldate("%"+queryInfo.getQuery()+"%",pageStart,queryInfo.getPageSize());
  30.    
  31.       for(int i =0;i<dates.size();i++){
  32.           System.out.println(dates.get(i).toString());
  33.       }
  34.         //校验
  35.         //封装校验后的流量日志
  36.         HashMap<String, Object> res = new HashMap<>();
  37.         res.put("flag","success");
  38.         res.put("opinionData2",dates );
  39.         String date_json= JSON.toJSONString(res);
  40.         System.out.println(date_json.toString());
  41.         return date_json;
  42.     }
  43.  
  44. //数据库数据来源的实现方法，就是改变数据库表Date1中得数据
  45.     @RequestMapping("/getupdata")
  46.     public String updateDate(QueryInfo queryInfo){
  47.  
  48.         String s = "流量日志异常";
  49.         String s1 ="审计url异常";
  50.         String s2 ="威胁攻击日志";
  51.         String s3 ="正常网络日志";
  52.         /*int count = getUserList(queryInfo);
  53.         int count1 =getChickList(queryInfo);  //四个方法需要你自己根据具体业务实现
  54.         int count2 =getSafeDate(queryInfo);
  55.         int count3 =allBlognum(queryInfo)-(count+count1+count2);*/
  56.         showdateDao.updatenew(s,count);
  57.         showdateDao.updatenew(s1,count1);
  58.         showdateDao.updatenew(s2,count2);
  59.         int i= showdateDao.updatenew(s3,count3);
  60.         System.out.println("异常类型:"+s);
  61.         System.out.println("异常日志数量:"+count);
  62.         String str = i >0?"success":"error";
  63.         return str;
  64.     }
  65.  
  66. }
  67.  

3.2.6 修改前端接口

Js全部代码：

  1.    <script>
  2.      import * as echarts from 'echarts'
  3.      export default {
  4.        name: 'test2',
  5.        data () {
  6.          return {
  7.          queryInfo: {
  8.          query: "",
  9.          pageNum: 1,
  10.          pageSize: 4,
  11.        },
  12.        queryInfof: {
  13.          query: "",
  14.          pageNum: 1,
  15.          pageSize: 100,
  16.        },
  17.            myChart: '',
  18.            opinionData2: [
  19.      
  20. //清空前端测试数据
  21.            ]
  22.          }
  23.        },
  24.        mounted: function () {
  25.           this.drawLine();
  26.  
  27.        },
  28.        created() {
  29.          this.getdateList();  //每次进入页面刷新数据库数据实现动态数据绑定
  30.       },
  31.        methods: {
  32.           async  drawLine () {
  33.               // 调用post请求，获得后台数据库的数值
  34.       const { data: res } = await this.$http.get("alldate", {
  35.         params: this.queryInfo
  36.       });
  37.       if (res.flag != "success") {
  38.         return this.$message.error("该数据获取失败！！！");
  39.       }
  40.  
  41.       console.log(res.flag)
  42.        this.opinionData2 = res.opinionData2; // 将返回数据赋值
  43.            this.myChart = echarts.init(document.getElementById('myChart'))
  44.            this.myChart.setOption({
  45.              title: {
  46.                text: '网络日志异常流量分析', // 主标题
  47.                subtext: '', // 副标题
  48.                x: 'left' // x轴方向对齐方式
  49.              },
  50.              grid: { containLabel: true },
  51.              tooltip: {
  52.                trigger: 'item',
  53.                formatter: '{a} <br/>{b} : {d}%'
  54.              },
  55.              // color: ['#1FC48D', '#F5A60A', '#6DC8EC', '#3F8FFF'],
  56.              color: ['#1FC48D', 'red', '#6DC8EC', '#3F8FFF'],
  57.              // backgroundColor: '#ffffff',
  58.              legend: {
  59.                orient: 'vertical',
  60.                icon: 'circle',
  61.                align: 'left',
  62.                x: 'right',
  63.                y: 'bottom',
  64.                data: ['审计url异常', '正常网络日志', '流量日志异常', '威胁攻击日志']
  65.              },
  66.              series: [
  67.                {
  68.                  name: '网络日志状态',
  69.                  type: 'pie',
  70.                  radius: ['50%', '70%'],
  71.                  avoidLabelOverlap: false,
  72.                  center: ['40%', '50%'],
  73.                  itemStyle: {
  74.                    emphasis: {
  75.                      shadowBlur: 10,
  76.                      shadowOffsetX: 0,
  77.                      shadowColor: 'rgba(0, 0, 0, 0.5)'
  78.                    },
  79.                    color: function (params) {
  80.                      // 自定义颜色
  81.                      var colorList = ['#1FC48D', 'red', '#6DC8EC', '#3F8FFF']
  82.                      return colorList[params.dataIndex]
  83.                    }
  84.                  },
  85.                  data: this.opinionData2
  86.                }
  87.              ]
  88.            })
  89.          },
  90.          async getdateList() {
  91.       // 调用post请求
  92.       const { data: res } = await this.$http.get("getupdata", {
  93.         params: this.queryInfof
  94.       });
  95.       if (res != "success") {
  96.         return this.$message.error("该数据获取失败！！！");
  97.       }
  98.       console.log(res)
  99.         },
  100.        }
  101.      }
  102.      </script>
  103.

在这里插入图片描述

后台返回数据：

在这里插入图片描述

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

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Echarts热门文章

  • Python+Pyecharts实现散点图的绘制
  • vue+echarts5实现中国地图的示例代码
  • echarts中几种渐变方式的具体实现方式
  • Echart Bar双柱状图样式最全详解
  • vue echarts实现柱状图动态展示
  • 如何利用echarts画雷达图和折柱混合
  • Echarts Bar横向柱状图实例代码
  • ECharts图表动态修改series显示隐藏
  • 【Dotnet 工具箱】跨平台图表库 LiveCharts2
  • vue2?利用echarts?单独绘制省份的步骤

    • Echarts推荐文章

  • Echarts设置饼状图保证你看的明明白白
  • .NET开源、功能强大、跨平台的图表库 - LiveCharts2
  • echarts X轴类目名太长时隐藏，hover时显示全部
  • vue3+ts打开echarts的正确方式
  • echarts设置多条折线不是你想的那样简单
  • 将ECharts图表插入到Word文档中
  • echarts中几种渐变方式的具体实现方式
  • vue中echarts关系图动态增删节点以及连线方式
  • 如何利用echarts画雷达图和折柱混合
  • pyecharts的Tab和Legend布局详情

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号