场景

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

Echarts3官网:

https://www.echartsjs.com/index.html

获取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 标签引入。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><!-- 引入 ECharts 文件 --><script src="echarts.min.js"></script>
</head>
</html>

绘制一个简单的图表

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

<body><!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --><div id="main" style="width: 600px;height:400px;"></div>
</body>

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

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><script src="echarts.min.js"></script>
</head>
<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data:['销量']},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>
</body>
</html>

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

以上是官网示例。

实现

html中引入echarts

<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.js"></script>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;border:1px dashed #000;"></div>

在模板中已经引入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",        //返回数据形式为jsonsuccess : function(result) {//请求成功时执行该函数内容，result即为服务器返回的json对象if (result) {for(var i=0;i<result.length;i++){names.push(result[i].name);values.push(result[i].num);}myChart.hideLoading();    //隐藏加载动画myChart.setOption({title: {text: '物料运输件数',x: 'center'},tooltip: {trigger: 'item',formatter: "{a} <br/>{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

package 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")@ResponseBodypublic List<Echarts> echartsShow(Model model) {List<Echarts> list = new ArrayList<Echarts>();list.add(new Echarts("正极车间",100));list.add(new Echarts("负极车间",200));list.add(new Echarts("立体仓库",300));list.add(new Echarts("清洁车间",400));return list;}

效果

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

echarts 饼状图 java_SpringBoot+Echarts实现请求后台数据显示饼状图
场景 SpringBoot搭建后台获取数据,前端可视化使用echarts的饼状图. Echarts3官网获取Echarts 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供 ...
一篇读懂springboot用echarts实现实时柱状图和饼状图查询
1.业务说明将数据库中的数据分别以柱状图和饼状图呈现出来 gitee项目路径:https://gitee.com/ziac/ls.git 2.1 柱状图需要引入的js 建议去echarts官网直接用 ...
php链接echarts教程,图文详解echarts的使用方法（饼状图实例）
在页面布局时经常需要插入一些图表,比如饼状图,柱状图,地图等等,但是这些代码比较难写,因此我们通常会用借助echarts,那你知道如何使用echarts吗?这篇文章就和大家讲讲echarts的使用方法 ...
echarts柱状图显示百分比_Echarts 饼状图显示信息,内容,值,百分比都显示的代码更改图例等问题汇总...
增加了显示比例,显示内容显示比例代码显示完整代码: series: [{name:'访问来源',type:'pie',radius: ['50%', '70%'],avoidLabelOverlap ...
SpringBoot+Echarts实现一次ajax请求返回并显示多个饼状图
场景 SpringBoot+Echarts实现请求后台数据显示饼状图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/899211 ...
SpringBoot+MyBatisPlus+Echarts实现查询并显示平均时长占比饼状图
场景数据库中每个数据都有开始时间以及结束时间两个字段. 需要根据创建时间筛选出当天的四种类型的数据的平均执行时间. SpringBoot+Echarts实现请求后台数据显示饼状图: https:// ...
Springboot+poi+thymeleaf 做导入导出用echarts.js做饼状图和树形图
创建一个SpringBoot项目项目架构 pom文件和yml配置 server:port: 8081spring:datasource:driver-class-name: com.mysql.cj ...
SpringBoot、EasyPoi、Echarts 实现文档导入、出、图表显示 (饼状图、柱状图) 保姆级教程
一.介绍环境 EasyPOI: 现在我们就来介绍下EasyPoi,首先感谢EasyPoi 的开发者.EasyPoi开源 easypoi 是为了让开发者快速的实现excel,word,pdf的导入导出 ...
如何用SpringBoot+Thymeleaf+Echart生成好看的柱状图，折线图，饼状图
一.前言上篇文章我们用POI技术读取Excel并生成了相应的图表.但是实际的效果比较一般,因为本身WPS生成图表就比较简单,如果用程序操作远比人工耗时费力,效果远不如一些付费模板.如下图所示: 然后 ...

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

场景