SpringBoot+Echarts实现请求后台数据显示饼状图

SpringBoot+Echarts实现请求后台数据显示饼状图

场景

SpringBoot搭建后台获取数据，前端可视化使用echarts的饼状图。

Echarts3官网

获取Echarts

从官网-界面选择你需要的版本-，根据开发者功能和体积上的需求，我们提供了不同打包的-，如果你在体积上没有要求，可以直接-完整版本。开发环境建议-源代码版本，包含了常见的错误提示和警告。

在 ECharts 的 github 上-最新的 release 版本，解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库。

通过 npm 获取 echarts，npm install echarts --save，详见“在 webpack 中使用 echarts”

cdn 引入，你可以在 cdnjs，npmcdn 或者国内的 bootcdn 上找到 ECharts 的最新版本。

引入 ECharts

ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 javascript 库一样用 script 标签引入。

绘制一个简单的图表

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

这样你的第一个图表就诞生了！

以上是官网示例。

实现

html中引入echarts

在模板中已经引入jquery，这里不再引入。

编写js

$(document).ready(function() {

// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据

var names=[];

var values=[];

//数据加载完之前先显示一段简单的loading动画

myChart.showLoading();

$.ajax({

type : "post",

async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）

url : "/wmsLogisticMonitoring/EcharsShow", //请求发送到dataActiont处

data : {},

dataType : "json", //返回数据形式为json

success : function(result) {

//请求成功时执行该函数内容，result即为服务器返回的json对象

if (result) {

for(var i=0;i

names.push(result[i].name);

values.push(result[i].num);

}

myChart.hideLoading(); //隐藏加载动画

myChart.setOption(

{

title: {

text: '物料运输件数',

x: 'center'

},

tooltip: {

trigger: 'item',

formatter: "{a}
{b} : {c} ({d}%)"

},

legend: {

orient: 'vertical',

left: 'left',

data: names

},

series: [

{

name: '物料来源',

type: 'pie',

radius: '55%',

center: ['50%', '60%'],

data: result,

itemStyle: {

emphasis: {

shadowBlur: 10,

shadowOffsetX: 0,

shadowColor: 'rgba(0, 0, 0, 0.5)'

}

}

}

]

}

);

}

},

error : function(errorMsg) {

//请求失败时执行该函数

alert("图表请求数据失败!");

myChart.hideLoading();

}

});//end ajax

});//刷新方法结束

SpringBoot后台编写

编写实体类Echarts

packawhaoMgdepXge com.ws.bus.sys.vo.LogisticsMonitoring;

import lombok.Data;

/**

* Created by badao on 2019/5/7.

*/

@Data

public class Echarts {

private String name;

private Integer value;

public Echarts(String name, Integer value) {

this.name = name;

this.value = value;

}

public Echarts() {

}

}

编写后台Controller

@Description("获取Echarts数据")

@RequestMapping("/EcharsShow")

@ResponseBody

public List echartsShow(Model model) {

List list = new ArrayList();

list.add(new Echarts("正极车间",100));

list.add(new Echarts("负极车间",200));

list.add(new Echarts("立体仓库",300));

list.add(new Echarts("清洁车间",400));

return list;

}

效果

names.push(result[i].name);

values.push(result[i].num);

}

myChart.hideLoading(); //隐藏加载动画

myChart.setOption(

{

title: {

text: '物料运输件数',

x: 'center'

},

tooltip: {

trigger: 'item',

formatter: "{a}
{b} : {c} ({d}%)"

},

legend: {

orient: 'vertical',

left: 'left',

data: names

},

series: [

{

name: '物料来源',

type: 'pie',

radius: '55%',

center: ['50%', '60%'],

data: result,

itemStyle: {

emphasis: {

shadowBlur: 10,

shadowOffsetX: 0,

shadowColor: 'rgba(0, 0, 0, 0.5)'

}

}

}

]

}

);

}

},

error : function(errorMsg) {

//请求失败时执行该函数

alert("图表请求数据失败!");

myChart.hideLoading();

}

});//end ajax

});//刷新方法结束

SpringBoot后台编写

编写实体类Echarts

packawhaoMgdepXge com.ws.bus.sys.vo.LogisticsMonitoring;

import lombok.Data;

/**

* Created by badao on 2019/5/7.

*/

@Data

public class Echarts {

private String name;

private Integer value;

public Echarts(String name, Integer value) {

this.name = name;

this.value = value;

}

public Echarts() {

}

}

编写后台Controller

@Description("获取Echarts数据")

@RequestMapping("/EcharsShow")

@ResponseBody

public List echartsShow(Model model) {

List list = new ArrayList();

list.add(new Echarts("正极车间",100));

list.add(new Echarts("负极车间",200));

list.add(new Echarts("立体仓库",300));

list.add(new Echarts("清洁车间",400));

return list;

}

效果

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。