Springboot+echarts实现可视化
现在在做毕设，做一个电商平台日志分析系统，需要结合可视化，达到一个直观的效果
1.搭建springboot项目，maven搭建，这是项目整体架构
2.后台代码：
@RestController
@RequestMapping("/wanglk_bds")
public class VisualController {
@Autowired
private VisualInterface visualInterface;
/**
* 每一天的访问用户量
* @return
*/
@RequestMapping(value="/bar-simple",method=RequestMethod.GET,produces="application/json")
@ResponseBody
public List<DayTotal> getDateTotal(){
List<DayTotal> all = visualInterface.getAll();
return all;
}
}
@Service
public class VisualInterfaceImpl implements VisualInterface {
@Autowired
VisualMapper visualMapper;
@Override
public List<DayTotal> getAll() {
List<DayTotal> totals = visualMapper.selectAllFromTable();
return totals;
}
}
@Mapper
public interface VisualMapper {
List<DayTotal> selectAllFromTable();
}
<?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.wanglk_bds.visual.mapper.VisualMapper"> <resultMap id="BaseResultMap" type="com.wanglk_bds.visual.bean.DayTotal"> <result column="date" jdbcType="VARCHAR" property="date" /> <result column="total" jdbcType="VARCHAR" property="total" /> </resultMap> <sql id="Base_Column_List"> date,total </sql> <select id="selectAllFromTable" resultMap="BaseResultMap"> select <include refid="Base_Column_List" /> from keyword </select> </mapper>
3.前端代码：
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<script type="text/javascript" src="echarts.min.js"></script>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<div id="mainChart" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
<script type="text/javascript">
var dom = document.getElementById("mainChart");
var myChart = echarts.init(dom);
myChart.clear();
$.ajax({
method:'get',
url:'http://localhost:8888/wanglk_bds/bar-simple',
dataType:'json',
success:function(data){
var option = {
xAxis: {
name: '日期',
type: 'category',
data: [data[0].date,
data[1].date,
data[2].date,
data[3].date,
data[4].date,
data[5].date,
data[6].date,
data[7].date,
data[8].date,
data[9].date,
data[10].date,
data[11].date]
},
yAxis: {
name:'访问量'
},
series: [{
data: [data[0].total,
data[1].total,
data[2].total,
data[3].total,
data[4].total,
data[5].total,
data[6].total,
data[7].total,
data[8].total,
data[9].total,
data[10].total,
data[11].total],
type: 'bar'
}]
};
myChart.setOption(option, true);
}
});
</script>
</body>
</html>
4.总结：
代码没什么技术含量，都能写出来，但是过程中出现的错误不是每个人都有
1.后台 controller层使用的注解 restcontroller 返回json格式的数据
2.mybatis自动生成文件的xml出错，为解决，
3.前台使用echarts的时候，将echarts部分放进ajax的success函数中，
4.还有css和js代码的位置问题，加载先后顺序
5.端口问题
6.使用本地tomcat部署springboot项目
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
java控制台实现可视化日历小程序
本文实例为大家分享了java可视化日历小程序的具体代码,供大家参考,具体内容如下 废话不多说,直接上代码 import java.text.DateFormat; import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.Date; import java.util.GregorianCalendar; /** * 可视化日历程序
-
Springboot+echarts实现可视化
现在在做毕设,做一个电商平台日志分析系统,需要结合可视化,达到一个直观的效果 1.搭建springboot项目,maven搭建,这是项目整体架构 2.后台代码: @RestController @RequestMapping("/wanglk_bds") public class VisualController { @Autowired private VisualInterface visualInterface; /** * 每一天的访问用户量 * @return */ @Req
-
SpringBoot+ECharts是如何实现数据可视化的
一.提出任务 查询班级表数据,利用ECharts绘制各班人数柱形图. (一)班级数据 (二)运行效果 二.实现步骤 (一)创建数据库与表 1.创建数据库 - test create database test; 2.创建数据表 - t_class 创建表结构 CREATE TABLE `t_class` ( `id` int(11) NOT NULL AUTO_INCREMENT, `class` varchar(50) CHARACTER SET utf8 COLLATE utf8_gener
-
Vue Echarts实现可视化世界地图代码实例
Echarts实现可视化世界地图模拟迁徙,以我自己开发过程. 下载Echarts依赖: npm install echarts 成功以后引入依赖: import echarts from 'echarts' peopleInsertCharts为生成echarts容器. let myChart = echarts.init(document.getElementById('peopleInsertCharts')) 容器一定要给宽高,否则echarts生成初始化页面不会显示.需要自适应的可以js
-
基于vue+echarts数据可视化大屏展示的实现
获取 ECharts 的路径有以下几种,请根据您的情况进行选择: 1) 最直接的方法是在 ECharts 的官方网站中挑选适合您的版本进行下载,不同的打包下载应用于不同的开发者功能与体积的需求,或者您也可以直接下载完整版本:开发环境建议下载源代码版本,包含了常见的错误提示和警告. 2) 也可以在 ECharts 的 GitHub 上下载最新的 release 版本,解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库. 3) 或者通过 npm 获取 echarts,npm
-
Django使用echarts进行可视化展示的实践
本文以学生成绩折线图展示为例 条件准备 电脑上有myslq数据库 有 echarts 的 js 文件 连接mysql # settings.py 文件 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', # mysql 数据库名 'NAME': 'chaochao', # mysql 登陆用户名 'USER': 'root', # myslq 登陆密码 'PASSWORD': 'chaochao666', 'HOST'
-
基于vue+echarts 数据可视化大屏展示的方法示例
获取 ECharts 的路径有以下几种,请根据您的情况进行选择: 1) 最直接的方法是在 ECharts 的官方网站中挑选适合您的版本进行下载,不同的打包下载应用于不同的开发者功能与体积的需求,或者您也可以直接下载完整版本:开发环境建议下载源代码版本,包含了常见的错误提示和警告. 2) 也可以在 ECharts 的 GitHub 上下载最新的 release 版本,解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库. 3) 或者通过 npm 获取 echarts,npm
-
一文详解Vue如何整合Echarts实现可视化界面
目录 一.什么是可视化 二.什么是Echarts 三.Echarts的优点 四.Vue 整合Echarts 下载Echarts依赖 Vue引入Echarts 测试使用Echarts 五.效果图 一.什么是可视化 可视化就是可以通过视觉进行传达的. 再专业一点就可以解释为可视化(Visualization)是利用计算机图形学和图像处理技术,将数据转换成图形或图像在屏幕上显示出来,再进行交互处理的理论.方法和技术. 将数据通俗的在屏幕中展现出来! 二.什么是Echarts 一个纯JavaScript
-
SpringBoot+Echarts实现请求后台数据显示饼状图
场景 SpringBoot搭建后台获取数据,前端可视化使用echarts的饼状图. Echarts3官网 获取Echarts 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体积上没有要求,可以直接下载完整版本.开发环境建议下载源代码版本,包含了常见的错误提示和警告. 在 ECharts 的 GitHub 上下载最新的 release 版本,解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库. 通过 npm 获取 ec
-
springboot Actuator的指标监控可视化功能详解
springboot为我们提供了丰富的指标监控功能SpringBoot Actuator SpringBoot Actuator是springboot为简化我们对微服务项目的监控功能抽取出来的模块,使得我们每个微服务快速引用即可获得生产界别的应用监控.审计等功能. 后序文章会更新使用 我们先来看看怎么可视化 我们可以通过github上的开源项目 这里 我们创建一个springboot项目 作为可视化的服务端 使用新功能首先都是引入依赖 需要web项目 <dependency> <grou
-
使用antv替代Echarts实现数据可视化图表详解
目录 前言 面积图 常用参数文档 图表 度量 scale 提示 tooltip 坐标系 axis chart.line(options) chart.area(options) geom.position() geom.color() geom.shape() 柱状图 数据标签 label chart.coordinate() chart.interval(options) 地图 地图容器配置项 map 地图等级 viewLevel 小结 前言 技术永无止尽,多看看不同风景 周一,还在愉快的为移