使用若依SpringBoot+ajax显示ECharts饼图折线
Echarts参考Echarts官网示例本篇博客只是简单的运用ajax前后交互的小案例。直接上代码sqlSET FOREIGN_KEY_CHECKS=0;-- ------------------------------ Table structure for dky_echarts-- ----------------------------DROP TABLE IF EXISTS `echar
·
Echarts
本篇博客只是简单的运用ajax前后交互的小案例。直接上代码
sql
SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for dky_echarts
-- ----------------------------
DROP TABLE IF EXISTS `echarts`;
CREATE TABLE `echarts` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(45) DEFAULT NULL,
`num` int(11) DEFAULT '0',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;
-- ----------------------------
-- Records of dky_echarts
-- ----------------------------
INSERT INTO `echarts` VALUES ('1', '苹果', '9');
INSERT INTO `echarts` VALUES ('2', '香蕉', '3');
INSERT INTO `echarts` VALUES ('3', '葡萄', '6');
INSERT INTO `echarts` VALUES ('4', '火龙果', '10');
INSERT INTO `echarts` VALUES ('5', '草莓', '20');
image.html
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<th:block th:include="include :: header('可视化列表')"/>
</head>
<body class="gray-bg">
<div class="container-div">
<div class="row">
<div class="col-xs-6">
<div class="ibox-content">
<div id="lineEcharts" class="echarts"></div>
</div>
</div>
<div class="col-xs-6">
<div class="ibox-content">
<div id="pieEcharts" class="echarts"></div>
</div>
</div>
</div>
</div>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<th:block th:include="include :: footer"/>
<th:block th:include="include :: echarts-js"/>
<script th:inline="javascript">
var prefix = ctx + "state/image";
//折线图
$(document).ready(function () {
//初始化ehcharts实例
var lineChart = echarts.init(document.getElementById("lineEcharts"));
//数据加载完之前先显示一段简单的loading动画
lineChart.showLoading();
//指定图表的配置项和数据
var names = []; //类别数组（实际放x轴坐标值）
var nums = []; //销量数组（Y坐标值）
$.ajax({
type: "post",
async: "true",//异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url: prefix + "/list",
data: {},
dataType: "json",
success: function (result) {
if (result) {
for (var i = 0; i < result.length; i++) {
names.push(result[i].name);
nums.push(result[i].num);
}
lineChart.hideLoading();//隐藏加载动画
lineChart.setOption({//加载数据图表
title: {
text: '折线图',
},
//工具箱
//保存图片
toolbox: {
show: true,
feature: {
saveAsImage: {
show: true
}
}
},
//图例-每一条数据的名字叫销量
legend: {
data: ['销量']
},
//x轴
xAxis: {
type: 'category',
boundaryGap: false,
data: names
},
//y轴没有显式设置，根据值自动生成y轴
yAxis: {
type: 'value'
},
//数据-data是最终要显示的数据
series: [{
name: '销量',
type: 'line',
data: nums
}]
})
}
},
error: function (errorMsg) {
alert("图表请求数据失败");
lineChart.hideLoading();
}
})
})
//饼图
$(document).ready(function () {
var pieChart = echarts.init(document.getElementById("pieEcharts"));
//数据加载完之前先显示一段简单的loading动画
pieChart.showLoading();
//指定图表的配置项和数据
var names = []; //类别数组（实际放x轴坐标值）
var nums = []; //销量数组（Y坐标值）
$.ajax({
type: "post",
async: "true",//异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url: prefix + "/list",
data: {},
dataType: "json",
success: function (result) {
debugger
if (result) {
for (var i = 0; i < result.length; i++) {
names.push(result[i].name);
var obj = new Object();
obj.name = result[i].name;
obj.value = result[i].num;
nums.push(obj);
}
pieChart.hideLoading();//隐藏加载动画
pieChart.setOption({//加载数据图表
title: {
text: '饼图',
x: 'center'
},
//工具箱
//保存图片
toolbox: {
show: true,
feature: {
saveAsImage: {
show: true
}
}
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data: names
},
calculable: true,
series: [{
name: '销量',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: nums,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsextX: 0,
shadowColor: 'rgba(0,0,0,0.5)'
}
}
}]
})
}
}
})
})
</script>
</body>
</html>
Echarts.java
public class Echarts extends BaseEntity
{
private static final long serialVersionUID = 1L;
private String name;
private int num;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getNum() {
return num;
}
public void setNum(int num) {
this.num = num;
}
}
mapper.xml
<select id="findAll" resultType="Echarts">
SELECT name,num FROM dky_echarts
</select>
mapper.java
public interface EchartsMapper {
public List<Echarts> findAll(Echarts echarts);
}
service层省略…
EchartsController.java
package com.ruoyi.web.controller.state;
import java.util.List;
import com.google.gson.Gson;
import com.ruoyi.common.core.controller.BaseController;
import com.ruoyi.sate.domain.Echarts;
import com.ruoyi.sate.service.IEchartsService;
import org.apache.shiro.authz.annotation.RequiresPermissions;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
/**
* @author myy
* @date 2020-08-29
*/
@Controller
@RequestMapping("/state/image")
public class EchartsController extends BaseController
{
private String prefix = "state/image";
private static final Logger LOG = LoggerFactory.getLogger(EchartsController.class);
@Autowired
private IEchartsService echartsService;
@RequiresPermissions("state:image:view")
@GetMapping()
public String image()
{
return prefix + "/image";
}
/**
* 查询echarts列表
*/
@RequiresPermissions("state:image:list")
@PostMapping("/list")
@ResponseBody
public String list(Echarts echarts)
{
List<Echarts> list = echartsService.findAll(echarts);
//转换json
Gson gson = new Gson();
String str = gson.toJson(list);
//获取list中第一个字段name和num
System.err.println(list.get(0).getName()+"----"+list.get(0).getNum());
return str;
}
}
转换json依赖
<!-- gson转换json-->
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.8.2</version>
</dependency>
界面
快速构建 Web 应用程序
更多推荐
5
0- 0
已为社区贡献1条内容
所有评论(0)