Echarts+SpringMvc顯示後臺實時資料

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

Echarts圖表資料一般都是從後臺資料庫實時取資料的傳輸資料大多采用JSON資料格式
本文通過springmvc來攔截資料請求完成資料顯示

以下是工程目錄

該工程在一個springmvc的基礎程式碼上搭建其中action類中只有ChartsAction有關
其中用到的包有其中有部分沒用到的spring包不影響使用
因為本文會介紹兩種json傳輸辦法 jackjson和fastjson 所有兩種的包都有插入

1. 新建專案匯入所需jar包
2. 新建顯示介面html檔案 zhuxing.html

在此工程中採用封裝函式填充的方式建立圖表
將option封裝成獨立函式 div當做容器可以根據注入的option改變表格

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/echarts-all.js"></script>
<script src="js/macarons.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/getbar.js"></script>
</head>
<body>
 <div id="main" style="width: 1000px; height: 500px"></div>
 <script type="text/javascript">
  //初始化表格
  var myChart = echarts.init(document.getElementById('main'),'macarons');
  //載入option配置
  myChart.setOption(getlinebar());
 </script>
</body>
</html>

3.新建所需資料庫注入所需資料

這是不同瀏覽器在市場的佔比

4.配置springmvc

echarts採用ajax請求獲取json資料通過springmvc進行攔截
首先在web.xml加入servlet

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xmlns="http://xmlns.jcp.org/xml/ns/javaee"
 xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee 
 http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
 id="WebApp_ID" version="3.1">

 <servlet>
  <servlet-name>springmvc</servlet-name>
  <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
  <init-param>
   <param-name>contextConfigLocation</param-name>
   <param-value>/WEB-INF/spmvc-servlet.xml</param-value>
  </init-param>
  <load-on-startup>1</load-on-startup>
 </servlet>
 <!-- 讓Spring MVC的前端控制器攔截帶有.do的請求 -->
 <!-- 注意這裡不能攔截使用‘/'攔截所有請求 會導致js等靜態檔案無法載入 -->
 <servlet-mapping>
  <servlet-name>springmvc</servlet-name>
  <url-pattern>*.do</url-pattern>
 </servlet-mapping>
</web-app>

需要特別注意 *.do 可以解決靜態資源無法載入的情況總共有三種方法解決
接下來新建spmvc-servlet.xml來配置這是使用Jackjson的配置檔案

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc"
 xmlns:context="http://www.springframework.org/schema/context"
 xsi:schemaLocation=" 
  http://www.springframework.org/schema/beans 
  http://www.springframework.org/schema/beans/spring-beans-4.2.xsd 
  http://www.springframework.org/schema/mvc 
  http://www.springframework.org/schema/mvc/spring-mvc-4.2.xsd  
  http://www.springframework.org/schema/context 
  http://www.springframework.org/schema/context/spring-context-4.2.xsd">

 <!-- spring可以自動去掃描base-pack下面的包或者子包下面的java檔案 -->
 <context:component-scan base-package="com.l.action" />
 <mvc:default-servlet-handler />
 <!-- 啟動Springmvc註解驅動 -->
 <mvc:annotation-driven />

 <bean id="stringConverter"
  class="org.springframework.http.converter.StringHttpMessageConverter">
  <property name="supportedMediaTypes">
   <list>
    <value>text/plain;charset=UTF-8</value>
   </list>
  </property>
 </bean>
 <bean id="jsonConverter"
  class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"></bean>
 <bean
  class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
  <property name="messageConverters">
   <list>
    <ref bean="stringConverter" />
    <ref bean="jsonConverter" />
   </list>
  </property>
 </bean>
 <bean
  class="org.springframework.web.servlet.view.InternalResourceViewResolver">
  <property name="prefix" value="/WEB-INF/jsp/"></property>
  <property name="suffix" value=".jsp"></property>
 </bean>
</beans>

5.資料庫連線以及資料獲取

因為要從資料庫取資料新建com.l.utils.DbUtil.java 來獲取資料連線

package com.l.utils;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;

public class DbUtil {
 /*
  * private String dbUrl = "jdbc:mysql://localhost:3306/test"; private String
  * dbUserName = "root"; private String dbPassword = "1234"; private String
  * jdbcName = "com.mysql.jdbc.Driver";
  */

 public Connection getcon() {
  try {
   Class.forName("com.mysql.jdbc.Driver");
   Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","1234");
   System.out.println("success");
   return con;
  } catch (Exception e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
   return null;
  }

 }

 public void close(Connection con,Statement sm,ResultSet rs) {
  try {
   // 關閉。後面獲取的物件先關閉。
   if (rs != null)
    rs.close();
   if (sm != null)
    sm.close();
   if (con != null)
    con.close();
  } catch (Exception e) {
   e.printStackTrace();
  }
 }

}

根據需要掃描的包新建目錄 com.l.action.ChartsAction.java 使用註解@ResponseBody

package com.l.action;

import java.sql.Connection;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.l.utils.DbUtil;

@Controller
public class ChartsAction {

 @RequestMapping(value = "/hello",method = RequestMethod.GET)
 @ResponseBody
 public List<Map<String,Object>> getbar() {
  Connection con = null;
  String sql = null;
  DbUtil dbutil = new DbUtil();
  try {
   con = dbutil.getcon();
   java.sql.Statement st = con.createStatement();
   sql = "select * from data";
   ResultSet rs = st.executeQuery(sql);
   List<Map<String,Object>> list = new ArrayList<Map<String,Object>>();
   while (rs.next()) {
    System.out.println(
      rs.getString(1) + " " + rs.getString(2) + " " + rs.getString(3) + " " + rs.getString(4));
    Map<String,Object> map = new HashMap<String,Object>();

    map.put("name",rs.getString(2));
    map.put("value",Double.parseDouble(rs.getString(3)));
    map.put("drilldown",Double.parseDouble(rs.getString(4)));
    list.add(map);
   }
   return list;
  } catch (Exception e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  }
  return null;
 }
}

在位址列資料http://localhost:8080/Demo01/hello.do來測試是否能夠顯示傳出的json資料

6.開始編寫option

當請求可以收到json資料後新建js目錄，在該目錄下新建getbar.js
其中data設定最重要

function getlinebar(params) {
 option = {
  tooltip : {
   trigger : 'axis',},legend : {
   data : [ '最大佔比','最小佔比' ]
  },toolbox : {
   show : true,orient : 'vertical',y : 'center',feature : {
    mark : {
     show : true
    },magicType : {
     show : true,type : [ 'line','bar' ]
    },dataView : {
     show : true,readOnly : false
    },restore : {
     show : true
    },saveAsImage : {
     show : true
    }
   }
  },calculable : true,xAxis : [ {
   type : 'category',data : (function() {
    var data = [];
    $.ajax({
     url : 'http://localhost:8080/Demo01/hello.do',type : 'get',async : false,dataType : "json",success : function(json) {
      if (json) {
       for (var i = 0; i < json.length; i++) {
        console.log(json[i].name);
        data.push(json[i].name);
       }
      }
     }
    })
    return data;
   })()
  } ],yAxis : [ {
   type : 'value',axisLabel : {
    formatter : '{value} %'
   }
  } ],series : [ {
   name : '最小佔比',type : 'bar',data : (function() {
    var arr = [];
    $.ajax({
     url : 'http://localhost:8080/Demo01/hello.do',success : function(data) {
      if (data) {
       for (var i = 0; i < data.length; i++) {
        console.log(data[i].drilldown);
        arr.push(data[i].drilldown);
       }
      }
     }
    })
    return arr;
   })()
  },{
   name : '最大佔比',success : function(data) {
      if (data) {
       for (var i = 0; i < data.length; i++) {
        console.log(data[i].value);
        arr.push(data[i].value);
       }
      }
     }
    })
    return arr;
   })()
  } ]
 };
 return option;
}

最終顯示成功資料返回正常

在自己編寫過程中遇到的問題主要有js html檔案無法顯示的問題 **主要是springmvc攔截沒有設定正確
還有引入js檔案的路徑問題也會導致js無法引入**

<script src="js/getbar.js"></script>

這樣的形式注意不要再最前面加上/ 會導致請求錯誤

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

Echarts+SpringMvc顯示後臺實時資料

Echarts圖表資料一般都是從後臺資料庫實時取資料的傳輸資料大多采用JSON資料格式

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

場景 SpringBoot搭建後臺獲取資料，前端視覺化使用echarts的餅狀圖。 Echarts3官網獲取Echarts

使用 kbmMW 後臺支援Echarts 地圖顯示

Echarts 是非常不錯的web 圖形顯示前端JS 庫，具體應用可以參考https://echarts.apache.org/zh/index.html

Vue中使用Echarts儀表盤展示實時資料的實現

在vue中echarts儀表盤實時資料彩筆一枚，簡單記錄一下。業務場景：通過websocket實時推送資料，將資料渲染到儀表盤中。

專案實戰：Qt多段Y軸折線圖框架（雙Y軸段折線、支援拽拖、浮動遊標顯示X值各段Y值、支援大量實時顯示下位機資料）

若該文為原創文章，轉載請註明原文出處本文章部落格地址：https://blog.csdn.net/qq21497936/article/details/111660400長期持續帶來更多專案與技術分享，諮詢請加QQ:21497936、微信：yangsir198808紅胖子(紅模仿)的

SpringMVC中頁面沒有顯示後臺傳入的值

技術標籤：javaspringmvc 譬如下圖中的${date}：可能是jsp頁面的格式問題導致的正確的格式應該是：

Echarts 問題解決 —— 環狀餅圖預設顯示第一條資料及提示框、滑鼠移動上去後不突出、中間展示指定樣式數字、滑鼠移到扇形上顯示不同顏色的數字、迴圈高亮顯示餅圖各模組的扇形；

技術標籤：echarts + D3.jsecharts 目錄 1.環狀餅圖預設顯示第一條資料及提示框 2.環狀餅圖滑鼠移動上去後不突出顯示

echarts 圖表無資料時顯示“暫無資料”

如標題所述，我們希望 echarts 圖表在沒有資料時顯示 “-暫無相關資料-” 字樣。

echarts自定義tooltip以及無資料顯示暫無資料

var myChart_back_responsibility_module = echarts.init(document.getElementById(\"back_responsibility\"));var call_back_responsibility_dict = eval(\"(\" + $(\"#call_back_responsibility_dict\").val() +