SpringBoot+Echarts實現請求後臺資料顯示餅狀圖

阿新 • • 發佈：2020-01-07

場景

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 標籤引入。

<!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,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",//返回資料形式為json
    success : 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.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")
  @ResponseBody
  public 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;
  }

效果