基本概念

这里2D的一般使用这个js文件：echarts.js

3D的一般使用这个js文件：echarts-gl.min.js

thymeleaf这个模版引擎，可以返回一个div，如下所示：

    //刷新雷达图@GetMapping("/refreshRadarGraph/{value}")public String refreshRadarGraph(@PathVariable("value") Integer value, Model model){.........return "admin/radarGraph::flush";}

通过::XXX，可以直接返回这一部分的数据。前端可以使用jQuery中的load()函数进行异步调用！

就可以实现局部替换。

JavaScript如下：

        <script type="text/javascript">function change(){//alert("onclick");var url = '/refreshRadarGraph/'+ $('#intValue').val();$('#flush').load(url);}</script>

显示如下：

<div id="flush" th:fragment="flush"><script th:inline="javascript">var value1 = [[${someInfo.get(0)}]];option = {title: {text: '基础雷达图'},tooltip: {},legend: {data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']},radar: {// shape: 'circle',name: {textStyle: {color: '#fff',backgroundColor: '#999',borderRadius: 3,padding: [3, 5]}},indicator: [{ name: '销售（sales）', max: 6500},{ name: '管理（Administration）', max: 16000},{ name: '信息技术（Information Techology）', max: 30000},{ name: '客服（Customer Support）', max: 38000},{ name: '研发（Development）', max: 52000},{ name: '市场（Marketing）', max: 25000}]},series: [{name: '预算 vs 开销（Budget vs spending）',type: 'radar',// areaStyle: {normal: {}},data : [{value : [4300, 10000, 28000, 35000, 50000, 19000],name : '预算分配（Allocated Budget）'},{value : [value1, 14000, 28000, 31000, 42000, 21000],name : '实际开销（Actual Spending）'}]}]};;if (option && typeof option === "object") {myChart.setOption(option, true);}</script>

通过：[[${someInfo.get(0)}]]这种方式可以获取后端的数据！

记得设置如下：

<script th:inline="javascript">

代码及演示

程序运行截图如下：

把实际销售值改了后！

响应如下：

数据如下：

关键代码如下：

<div id="flush" th:fragment="flush"><script th:inline="javascript">var value1 = [[${someInfo.get(0)}]];option = {title: {text: '基础雷达图'},tooltip: {},legend: {data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']},radar: {// shape: 'circle',name: {textStyle: {color: '#fff',backgroundColor: '#999',borderRadius: 3,padding: [3, 5]}},indicator: [{ name: '销售（sales）', max: 6500},{ name: '管理（Administration）', max: 16000},{ name: '信息技术（Information Techology）', max: 30000},{ name: '客服（Customer Support）', max: 38000},{ name: '研发（Development）', max: 52000},{ name: '市场（Marketing）', max: 25000}]},series: [{name: '预算 vs 开销（Budget vs spending）',type: 'radar',// areaStyle: {normal: {}},data : [{value : [4300, 10000, 28000, 35000, 50000, 19000],name : '预算分配（Allocated Budget）'},{value : [value1, 14000, 28000, 31000, 42000, 21000],name : '实际开销（Actual Spending）'}]}]};;if (option && typeof option === "object") {myChart.setOption(option, true);}</script></div>

后端代码如下：

    //雷达图@GetMapping("/radar")public String toRadarGraphPage(Model model){List<Integer> list = new ArrayList<>();list.add(4000);model.addAttribute("someInfo", list);return "admin/radarGraph";}//刷新雷达图@GetMapping("/refreshRadarGraph/{value}")public String refreshRadarGraph(@PathVariable("value") Integer value, Model model){System.out.println("refreshRadarGraph called the value is  : " + value);List<Integer> list = new ArrayList<>();list.add(value);model.addAttribute("someInfo", list);return "admin/radarGraph::flush";}

Spring Boot笔记-echarts的使用及数据的修改相关推荐

Spring Boot笔记-get请求发送json数据（方便前端vue解析）
目录基本概念代码与实例基本概念这里有一个思路,后端只发送Json数据,前端vue去解析.这样的话,就可以做到前后端分离,耦合性就很低了. 代码与实例程序运行截图如下: 得到后,使用vue去解 ...
【收藏】spring boot+websocket+echarts 后台推送数据用echarts展示
https://gitee.com/heibaifu/websocket.git 下载工程到本地,运行WebsocketApplication,浏览器访问http://localhost:8080/i ...
使用Spring Boot JPA Specification实现使用JSON数据来查询实体数据
文章目录使用Spring Boot JPA Specification实现使用JSON数据来查询实体数据需求概要 JSON 结构的设计使用策略模式执行不同的查询条件构造查询条件主逻辑具体的代 ...
Spring Boot笔记-普通异常错误截取及构造错误页面
在web开发过程中,数据问题会有异常,会抛到页面上,这样造成用户体验差. 目前这个笔记是使用Spring Boot获取异常,并构造新的界面程序运行截图如下: 另外一个: 这样的话就达到了页面友好的效 ...
Spring Boot笔记总结
总结一下自己最近学的springboot笔记 yaml语法 #对象 student:name: juziage: 666 #行内写法 kid: {name: jujuju,age: 888}#数组 c ...
我去！看完这份Spring Boot笔记，成功教面试官做人
写在前面 Java各种开发框架发展了很多年,影响了一代又一代的程序员.但环顾当前Java开源世界中的流行技术框架,能同时满足快速开发和分布式系统架构,还是群众基础最好.功能最全.基于Spring技术的 ...
Spring Boot项目利用MyBatis Generator进行数据层代码自动生成
概述 MyBatis Generator (简称 MBG) 是一个用于 MyBatis和 iBATIS的代码生成器.它可以为 MyBatis的所有版本以及 2.2.0之后的 iBATIS版本自动生成 ...
Spring Boot数据库操作原理及整合druid数据源和mybatis
在Spring Boot中如果需要访问数据库,我需要导入以下两个依赖: <dependency><groupId>org.springframework.boot</gr ...
Spring Boot笔记-自动配置（Spring Boot封装成jar被其他项目引用）
特点: 这里也就是自己写个Service注册到别人的SpringBoot项目中,然后别人来调用这个Service,这个Service,先读取自己的application.properties,再读取引 ...

Spring Boot笔记-echarts的使用及数据的修改

基本概念

代码及演示

Spring Boot笔记-echarts的使用及数据的修改相关推荐

最新文章

热门文章