springboot vue echarts,vue echart动态图表
我们做项目的时候，经常需要一些统计图表来展示我们的数据。作为web开发人员，实现统计图是我们的必备技能。我将带你认识动态饼状图。有兴趣的可以看看。
目录
前言一、环境配置1.1安装acharts1.2全局参考二。环图前端实现2.1先在vue页面上添加渲染框2.2前端逻辑实现部分2.3显示(可以根据自己的需要改变前端样式)三。前端和后端数据交互的实现3.1数据库的创建3.2后台代码的编写。
前言
我们做项目的时候，经常需要一些统计图表来展示我们的数据。作为web开发人员，实现统计图是我们的必备技能。我将带你认识动态饼状图。
一、环境配置
1.1 安装acharts
//npm也一样。
cnpm安装电子海图-保存
1.2 全局引用
main.js中的配置
//介绍电子海图
从“电子海图”导入电子海图
//注册组件
Vue.prototype.$echarts=echarts
全球注册组件后，让我们进入正题。第一步是画环形图。以上结果图表：
二、圆环图前端实现
2.1 先在vue页面添加渲染盒子
模板
div class= test 2 style= width:600 px；高度：400像素；
div id= myChart style= width:100%；高度：278px float:left；/div
/div
/模板
2.2 前端逻辑实现部分
介绍echart
从“echarts”导入*作为echarts
注意：这里有一个大洞。如果你安装了高版本的echarts，一定要以我为榜样。从‘echarts’网导入e charts很多人都是这样分享的，init函数会出现初始化错误。
脚本
从“echarts”导入*作为echarts
导出默认值{
名称：“测试2”，
data () {
返回{
查询信息：{
查询： ，
pageNum: 1，
PageSize: 4，//后端请求的数据类别有4个。如果有多个，请更改此参数。
},
queryInfof: {
查询： ，
pageNum: 1，
页面大小：100，
},
我的图表： ，
意见数据2: [
{item style: # 3f8ffff ， name :威胁攻击日志， value:200}，
{itemStyle:#6DC8EC ， name :审核url异常， value:388}，
{itemStyle:#1FC48D ， name :正常网络日志， value:5287}，
{itemStyle:red ， name :流量日志异常， value:320}
]
}
},
已安装：函数(){
this . drawline()；
},
方法：{
异步绘制线(){
//调用post请求
/* const { data: res }=等待此消息。$http.get(alldate ，{
params: this.queryInfo
});
if (res.flag！=成功){
归还这个。$message.error(数据采集失败！);
}
console.log(资源标志)
this . opinion data 2=RES . opinion data 2；//分配返回的数据*/
this . myChart=echarts . init(document . getelementbyid( myChart ))
this.myChart.setOption({
标题：{
Text:异常网络日志流量分析，//主标题
文本：，//副标题
x:左//x轴对齐
},
网格：{ containLabel: true }，
工具提示：{
触发器：“项目”，
格式化程序：“{a} br/{b} : {d}%”
},
//color: [#1FC48D ， #F5A60A ， #6DC8EC ， #3F8FFF]，
颜色：[#1FC48D ，红色， #6DC8EC ， #3F8FFF]，
//background color:“# ffffff”，
图例：{
方向：“垂直”，
图标：“圆形”，
对齐：“左”，
x:右，
y:底部，
数据：[审核url异常，正常网络日志，流量日志异常，威胁攻击日志]
},
系列：[
{
名称：“日志状态”，
类型：“饼图”，
半径：[50% ， 70%]，
avoidalabeloverlap:false，
中心：[40% , 50%],
项目样式：{
重点：{
暗影模糊：10,
shadowOffsetX: 0，
阴影颜色： rgba(0，0，0，0.5)
},
颜色：函数（参数){
//自定义颜色
var colorList=[#1FC48D ， red ， #6DC8EC ， #3F8FFF]
返回颜色列表[params.dataIndex]
}
},
数据：this.opinionData2数据2
}
]
})
},
}
}
/脚本
2.3 展示（可按自己需求更改前端样式）
三、前后端数据交互实现
3.1 创建数据库
表结构：(根据你的业务需要创建)
表数据
3.2 后台代码的编写
3.2.1 在豆包下创建信息查询类
该类实现得到前端请求的数据条数。相当于分页功能。
公共类查询信息{
私有字符串查询；
private int pageNum=1；
private int pageSize=1；
公共查询信息(){
}
public QueryInfo(String query，int pageNum，int pageSize) {
this.query=查询
this.pageNum=pageNum
this.pageSize=pageSize
}
公共字符串getQuery() {
返回查询；
}
public int getPageNum() {
返回页次
}
public int getPageSize() {
返回页面大小
}
公共void setQuery(字符串查询){
this.query=查询
}
public void setPageNum(int pageNum){
this.pageNum=pageNum
}
public void setPageSize(int pageSize){
this.pageSize=pageSize
}
@覆盖
公共字符串toString() {
返回" QueryInfo{ "
查询= 查询 \
，pageNum= pageNum
，pageSize= pageSize
};
}
}
3.2.2 在豆包下创建演出日期类
公共类显示日期{
私有字符串名称；
私有字符串项目样式
私有int值；
公开放映日期(){
}
public Showdate(String name，String itemStyle，int value) {
this.name=name
这个。项目风格=项目风格；
这个值=值
}
公共字符串getName() {
返回名称；
}
公共void setName1(字符串名称){
this.name=name
}
公共字符串getItemStyle() {
返回项目类型
}
公共void setitem样式(字符串项样式){
这个。项目风格=项目风格；
}
public int getValue() {
返回值；
}
public void setValue(int value) {
这个值=值
}
@覆盖
公共字符串toString() {
返回Showdate{
name= name \
，itemStyle= itemStyle \
,值=值
};
}
}
3.2.3 在资源下创建制图人
1.在制图人中创建ShowDataMapper.xml
？可扩展标记语言版本=1.0 编码=UTF八号？
！DOCTYPE Mapper PUBLIC -//mybatis。 org//DTD映射器3.0//EN
http://我的巴蒂斯。org/dtd/my batis-3-mapper。 dtd
映射器命名空间= com。淘气。用户登录02。道。显示日期
select id= getall date 结果type= com。淘气。用户登录02。比恩。显示日期
SELECT * FROM date1
if test=name！=null
其中名称如#{name}
/如果
限制#{pageStart}，#{pageSize}
/选择
更新id=updatenew
更新日期一设置值=#{count}，其中名称=#{name}
/更新
/映射器
2.在资源下创建应用程序。阳明海运股份有限公司用于配置数据库和端口号
# mysql
春天：
数据源：
#MySQL配置
驱动程序类名：com。MySQL。CJ。JDBC。驾驶员
网址：JDBC:MySQL://localhost:3306/weblog？使用unicode=true字符编码=UTF-8 usessl=false服务器时区=UTC
用户名：根
密码：根
mybatis:
映射器-位置：类路径：映射器/*。可扩展标记语言
类型-别名-包：com.example.demo.model
服务器：
端口：9000
3.2.4 在大刀下创建ShowdateDao
里面有两个接口，如果你需要操作数据库，就需要在ShowdateDao中编写接口方法；
在ShowDataMapper.xml中编写结构化查询语言语句。
我这里实现了修改和查找；
导入com。淘气。用户登录02。比恩。显示日期；
导入org。阿帕奇。伊巴提斯。注释。param
导入org。spring框架。刻板印象。知识库；
导入Java。util。列表；
@仓库
公共接口ShowdateDao {
public ListShowdate getAlldate(@ Param( name )String name，@ Param( pageStart )int pageStart，@ Param( pageSize )int pageSize)；
public int updatenew(字符串名，int计数);
}
3.2.5 在控制器下创建ShowdateController
在ShowdateController中要注解使用空间
@自动连线
ShowdateDao showdateDao//你需要传给前端的数据库表
@自动连线
FlowDao flowDao//你的数据来源的效果数据库表
包com。淘气。用户登录02。控制器；
导入com。阿里巴巴。快速JSON。JSON
导入com。淘气。用户登录02。比恩。*;
导入com。淘气。用户登录02。道。验刀；
导入com。淘气。用户登录02。道。flowdao
导入com。淘气。用户登录02。道。平安刀；
导入com。淘气。用户登录02。道。显示datedao
导入org。spring框架。豆子。工厂。注释。自动连线；
导入org。spring框架。网络。绑定。注释。*;
导入Java。util。hashmap
导入Java。util。列表；
导入Java。util。堆栈；
@RestController
公共类ShowdateController {
@自动连线
ShowdateDao
@自动连线
弗洛道弗洛道
//前台刷新日志数据
@交叉起源
@RequestMapping(/alldate)//前端请求通道
公共字符串getAlldateList(查询信息查询信息){
系统。出去。println(查询信息)；
int pageStart=(查询信息。get pagenum()-1)*查询信息。获取pagesize()；
列表显示日期日期=显示日期。获取alldate( % 查询信息。getquery() % ，pageStart，查询信息。get pagesize())；
for(int I=0；我约会。size()；i ){
System.out.println(dates.get(i)).toString())；
}
//校验
//封装校验后的流量日志
HashMapString，Object RES=new HashMap()；
res.put(flag ， success )；
res.put(opinionData2 ，日期);
字符串date _ JSON=JSON。tojsonstring(RES)；
系统。出去。println(date _ JSON。tostring())；
返回日期_ json
}
//数据库数据来源的实现方法，就是改变数据库表日期一中得数据
@RequestMapping(/getupdata )
公共字符串更新日期(查询信息查询信息){
字符串s=流量日志异常；
字符串s1=审计全球资源定位器(统一资源定位器)异常；
字符串s2=威胁攻击日志；
字符串s3=正常网络日志；
/* int count=get userlist(查询信息)；
int count 1=getChickList(查询信息)；//四个方法需要你自己根据具体业务实现
int count 2=获取安全日期(查询信息)；
int count 3=allBlognum(查询信息)-(count count 1 count 2)；*/
showdateDao.updatenew(s，count)；
showdateDao.updatenew(s1，count 1)；
showdateDao.updatenew(s2，count 2)；
int i=showdateDao.updatenew(s3，count 3)；
System.out.println(异常类型：)的；
System.out.println(异常日志数量：计数);
String str=i 0？"成功":"错误";
返回字符串；
}
}
3.2.6 修改前端接口
射流研究…全部代码：
脚本
从“电子海图”导入*作为展示
导出默认值{
名称："测试2",
data () {
返回{
查询信息：{
查询： ,
pageNum: 1，
页面大小：4,
},
queryInfof: {
查询： ,
pageNum: 1，
页面大小：100,
},
我的图表： ,
意见数据2: [
//清空前端测试数据
]
}
},
已安装：函数(){
这个。drawline()；
},
已创建(){
这个。get datelist()；//每次进入页面刷新数据库数据实现动态数据绑定
},
方法：{
异步绘制线(){
//调用邮政请求，获得后台数据库的数值
const { data: res }=等待此消息. http.get(alldate ，{
params: this.queryInfo
});
if (res.flag！=成功){
归还这个message.error(该数据获取失败！);
}
console.log(资源标志)
这个。意见数据2=研究意见数据2；//将返回数据赋值
这个。myChart=echarts。init(文档。getelementbyid( myChart ))
this.myChart.setOption({
标题：{
文本： 网络日志异常流量分析, //主标题
潜台词： ,//副标题
x:左//x轴方向对齐方式
},
网格：{ containLabel: true }，
工具提示：{
触发器："项目",
格式化程序：" {a} br/{b} : {d}% "
},
//color: [#1FC48D ， #F5A60A ， #6DC8EC ， #3F8FFF]，
颜色：[#1FC48D ，红色， #6DC8EC ， #3F8FFF]，
//背景色：" # ffffff "，
图例：{
方向："垂直",
图标："圆形",
对齐："左",
x:右，
y:底部，
数据：[审计全球资源定位器(统一资源定位器)异常, 正常网络日志, 流量日志异常, 威胁攻击日志]
},
系列：[
{
名称： 网络日志状态，
类型："饼图",
半径：[50% , 70%],
avoidalabeloverlap:false，
中心：[40% , 50%],
项目样式：{
重点：{
暗影模糊：10,
shadowOffsetX: 0，
阴影颜色： rgba(0，0，0，0.5)
},
颜色：函数（参数){
//自定义颜色
var colorList=[#1FC48D ， red ， #6DC8EC ， #3F8FFF]
返回颜色列表[params.dataIndex]
}
},
数据：this.opinionData2数据2
}
]
})
},
异步getdateList() {
//调用邮政请求
const { data: res }=等待此消息http.get(getupdata ，{
params: this.queryInfof
});
if (res！=成功){
归还这个message.error(该数据获取失败！);
}
console.log(res)
},
}
}
/脚本
后台返回数据：
到此这篇关于跳羚运用vue echarts前后端交互实现动态圆环图的文章就介绍到这了，更多相关跳羚队动态圆环图内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。