目錄

?

基本概念

代碼及演示

---

?

基本概念

這里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的使用及数据的修改的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。