Springboot項目中運用vue+ElementUI+echarts前后端交互實現(xiàn)動態(tài)圓環(huán)圖(推薦)
更新時間：2021年06月19日 16:00:57 作者：沉默著忍受
今天給大家?guī)硪黄坛剃P于Springboot項目中運用vue+ElementUI+echarts前后端交互實現(xiàn)動態(tài)圓環(huán)圖的技能，包括環(huán)境配置及圓環(huán)圖前端后端實現(xiàn)代碼，感興趣的朋友一起看看吧
如何運用vue+echarts前后端交互實現(xiàn)動態(tài)餅圖
前言
我們做項目的時候，常常需要一些統(tǒng)計圖來展示我們的數(shù)據(jù)，作為web開發(fā)人員，會實現(xiàn)統(tǒng)計圖是我們必會的技能。我將帶大家來實現(xiàn)動態(tài)餅圖的實現(xiàn)
一、環(huán)境配置
1.1 安裝acharts
//npm也一樣 cnpm install echarts --save
1.2 全局引用
main.js中配置
//引入 echarts import echarts from 'echarts' //注冊組件 Vue.prototype.$echarts = echarts
全局注冊好組件之后就讓我們進入正題吧，第一步先繪制圓環(huán)圖吧。先上結果圖：
二、圓環(huán)圖前端實現(xiàn)
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 前端邏輯實現(xiàn)部分
引入echart
import * as echarts from 'echarts'
注意：這里有一個大坑，如果你安裝的是高版本的echarts,一定要按我這個來，import echarts from 'echarts'網(wǎng)上很多人都這么分享會發(fā)生init函數(shù)初始化錯誤
<script>
import * as echarts from 'echarts'
export default {
name: 'test2',
data () {
return {
queryInfo: {
query: "",
pageNum: 1,
pageSize: 4,//后端請求的數(shù)據(jù)類別4個，如果你有多個，就更改這個參數(shù)
},
queryInfof: {
query: "",
pageNum: 1,
pageSize: 100,
},
myChart: '',
opinionData2: [
{"itemStyle":"#3F8FFF","name":"威脅攻擊日志","value":200},
{"itemStyle":"#6DC8EC","name":"審計url異常","value":388},
{"itemStyle":"#1FC48D","name":"正常網(wǎng)絡日志","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("該數(shù)據(jù)獲取失?。。?！");
}
console.log(res.flag)
this.opinionData2 = res.opinionData2; // 將返回數(shù)據(jù)賦值*/
this.myChart = echarts.init(document.getElementById('myChart'))
this.myChart.setOption({
title: {
text: '網(wǎng)絡日志異常流量分析', // 主標題
subtext: '', // 副標題
x: 'left' // x軸方向對齊方式
},
grid: { containLabel: true },
tooltip: {
trigger: 'item',
formatter: '{a} <br/> : vvxyksv9kd%'
},
// 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異常', '正常網(wǎng)絡日志', '流量日志異常', '威脅攻擊日志']
},
series: [
{
name: '網(wǎng)絡日志狀態(tài)',
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 展示（可按自己需求更改前端樣式）
三、前后端數(shù)據(jù)交互實現(xiàn)
3.1 創(chuàng)建數(shù)據(jù)庫
表結構：（根據(jù)你的業(yè)務需要創(chuàng)建）
表數(shù)據(jù)
3.2 后臺代碼的編寫
3.2.1 在bean包下創(chuàng)建QueryInfo類
該類實現(xiàn)得到前端請求的數(shù)據(jù)條數(shù)。相當于分頁功能。
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包下創(chuàng)建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下創(chuàng)建Mapper
1.在Mapper中創(chuàng)建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下創(chuàng)建application.yml用于配置數(shù)據(jù)庫和端口號
# 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下創(chuàng)建ShowdateDao
里面有兩個接口，如果你需要操作數(shù)據(jù)庫，就需要在ShowdateDao中編寫接口方法；
在ShowDataMapper.xml中編寫sql語句。
我這里實現(xiàn)了修改和查找；
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下創(chuàng)建ShowdateController
在ShowdateController中要注解使用空間
@Autowired
ShowdateDao showdateDao;//你需要傳給前端的數(shù)據(jù)庫表
@Autowired
FlowDao flowDao;//你的數(shù)據(jù)來源的效果數(shù)據(jù)庫表
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;
//前臺刷新日志數(shù)據(jù)
@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;
}
//數(shù)據(jù)庫數(shù)據(jù)來源的實現(xiàn)方法，就是改變數(shù)據(jù)庫表Date1中得數(shù)據(jù)
@RequestMapping("/getupdata")
public String updateDate(QueryInfo queryInfo){
String s = "流量日志異常";
String s1 ="審計url異常";
String s2 ="威脅攻擊日志";
String s3 ="正常網(wǎng)絡日志";
/*int count = getUserList(queryInfo);
int count1 =getChickList(queryInfo); //四個方法需要你自己根據(jù)具體業(yè)務實現(xiàn)
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("異常日志數(shù)量:"+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: [
//清空前端測試數(shù)據(jù)
]
}
},
mounted: function () {
this.drawLine();
},
created() {
this.getdateList(); //每次進入頁面刷新數(shù)據(jù)庫數(shù)據(jù)實現(xiàn)動態(tài)數(shù)據(jù)綁定
},
methods: {
async drawLine () {
// 調用post請求，獲得后臺數(shù)據(jù)庫的數(shù)值
const { data: res } = await this.$http.get("alldate", {
params: this.queryInfo
});
if (res.flag != "success") {
return this.$message.error("該數(shù)據(jù)獲取失?。。。?);
}
console.log(res.flag)
this.opinionData2 = res.opinionData2; // 將返回數(shù)據(jù)賦值
this.myChart = echarts.init(document.getElementById('myChart'))
this.myChart.setOption({
title: {
text: '網(wǎng)絡日志異常流量分析', // 主標題
subtext: '', // 副標題
x: 'left' // x軸方向對齊方式
},
grid: { containLabel: true },
tooltip: {
trigger: 'item',
formatter: '{a} <br/> : vvxyksv9kd%'
},
// 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異常', '正常網(wǎng)絡日志', '流量日志異常', '威脅攻擊日志']
},
series: [
{
name: '網(wǎng)絡日志狀態(tài)',
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("該數(shù)據(jù)獲取失?。。。?);
}
console.log(res)
},
}
}
</script>
后臺返回數(shù)據(jù)：
以上就是Springboot項目中運用vue+ElementUI+echarts前后端交互實現(xiàn)動態(tài)圓環(huán)圖的詳細內容，更多關于Springboot動態(tài)圓環(huán)圖的資料請關注腳本之家其它相關文章！
相關文章
Java8中關于Function.identity()的使用
這篇文章主要介紹了Java8中關于Function.identity()的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
MyBatis insert操作插入數(shù)據(jù)之后返回插入記錄的id
今天小編就為大家分享一篇關于MyBatis插入數(shù)據(jù)之后返回插入記錄的id，小編覺得內容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-03-03
這篇文章主要介紹了java自定義類加載器如何實現(xiàn)類隔離問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-11-11
這篇文章主要介紹了JAVA的并發(fā)，文中圖解非常細致，代碼幫助大家更好的理解和學習，感興趣的朋友可以了解下2021-09-09
java拋出異常后,后續(xù)代碼是否繼續(xù)執(zhí)行詳解
這篇文章主要給大家介紹了關于java拋出異常后,后續(xù)代碼是否繼續(xù)執(zhí)行詳?shù)南嚓P資料,在Java編程中,異常是當程序執(zhí)行時遇到問題時拋出的一種特殊情況,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了SpringBoot整合OpenCV的實現(xiàn)示例。文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
這篇文章主要為大家介紹了Flink時間和窗口邏輯處理源碼分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
SpringBoot3整合SpringDoc OpenAPI生成接口文檔的詳細過程
SpringDoc OpenAPI 是一個強大的工具,能夠幫助我們輕松生成 OpenAPI 3.0 規(guī)范的文檔,并提供交互式的 Swagger UI 界面,所以本文給大家介紹了SpringBoot3整合SpringDoc OpenAPI生成接口文檔的詳細過程,需要的朋友可以參考下2024-07-07
這篇文章詳細介紹了SpringBoot整合mybatisplus的全過程，文中有詳細的代碼示例，具有一定的參考價值，需要的朋友可以參考一下2023-04-04
這篇文章主要介紹了Java中的繼承與接口使用,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02