文章目錄
- Echarts連接數據庫，實時繪制圖表詳解
- 一、引言
- 二、步驟一：環境準備與數據庫連接
- 1、環境搭建
- 2、數據庫連接
- 三、步驟二：數據獲取與處理
- 1、查詢數據庫
- 2、數據處理
- 四、步驟三：ECharts圖表配置與渲染
- 1、配置ECharts選項
- 2、動態加載數據
- 五、其他交互功能
- 六、總結
Echarts連接數據庫，實時繪制圖表詳解
一、引言
在現代數據可視化領域，ECharts 是一個非常流行的開源JavaScript可視化庫，它能夠流暢地運行在PC和移動設備上，并且兼容當前絕大部分瀏覽器。ECharts 提供了豐富的圖表類型和交互功能，使得數據展示變得更加直觀和生動。本文將詳細介紹如何將ECharts與數據庫連接，實現實時數據的可視化繪制。
二、步驟一：環境準備與數據庫連接
1、環境搭建
在開始之前，確保你的環境中已經安裝了ECharts和數據庫（如MySQL）。你可以通過以下方式引入ECharts：
<!-- 引入ECharts文件 -->
<script src="js/echarts.js"></script>
2、數據庫連接
使用Java作為后端語言，通過JDBC連接MySQL數據庫。首先，確保你的Class.forName加載了正確的數據庫驅動，我這里使用的是Springboot：
server:port: 8083
spring:datasource:url: jdbc:mysql://localhost:3306/your_database?useSSL=falseusername: rootpassword: your_passworddriver-class-name: com.mysql.cj.jdbc.Driver
測試數據庫連接是否成功：
public class DBTest {public static void main(String[] args) {try {Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/your_database?useSSL=false", "root", "your_password");if (conn != null) {System.out.println("數據庫連接成功！");}} catch (SQLException e) {e.printStackTrace();System.out.println("數據庫連接失敗！");}}
}
三、步驟二：數據獲取與處理
1、查詢數據庫
編寫SQL查詢語句，從數據庫中獲取需要展示的數據。例如，我們想要獲取最近一周的銷售數據：
<select id="educational" resultType="com.qcby.qz.entity.Echars">SELECT educational as name, count(*) AS valueFROM jobGroup BY educational</select>
2、數據處理
在Java后端，編寫代碼處理查詢結果，并將數據轉換為ECharts所需的格式。例如，將查詢結果轉換為JSON數組：
@RequestMapping("/salesData")
@ResponseBody
public List<SalesData> getSalesData() {List<SalesData> salesDataList = salesService.getSalesData();// 轉換為ECharts需要的數據格式List<String> names = new ArrayList<>();List<Integer> values = new ArrayList<>();for (SalesData data : salesDataList) {names.add(data.getProductName());values.add(data.getTotalQuantity());}Map<String, Object> result = new HashMap<>();result.put("names", names);result.put("values", values);return new ArrayList<>(result.values());
}
四、步驟三：ECharts圖表配置與渲染
1、配置ECharts選項
在前端頁面，配置ECharts的選項，包括標題、工具箱、坐標軸和系列等：
option = {// backgroundColor: '#00265f',tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},grid: {left: '0%',top: '10px',right: '0%',bottom: '4%',containLabel: true},xAxis: [{type: 'category',data: keys,axisLine: {show: true,lineStyle: {color: "rgba(255,255,255,.1)",width: 1,type: "solid"},},axisTick: {show: false,},axisLabel: {interval: 0,// rotate:50,show: true,splitNumber: 15,textStyle: {color: "rgba(255,255,255,.6)",fontSize: '12',},},}],yAxis: [{type: 'value',axisLabel: {//formatter: '{value} %'show: true,textStyle: {color: "rgba(255,255,255,.6)",fontSize: '12',},},axisTick: {show: false,},axisLine: {show: true,lineStyle: {color: "rgba(255,255,255,.1 )",width: 1,type: "solid"},},splitLine: {lineStyle: {color: "rgba(255,255,255,.1)",}}}],series: [{type: 'bar',data: values,barWidth: '35%', //柱子寬度// barGap: 1, //柱子之間間距itemStyle: {normal: {color: '#2f89cf',opacity: 1,barBorderRadius: 5,}}}]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);window.addEventListener("resize", function () {myChart.resize();});
2、動態加載數據
使用AJAX從后端獲取數據，并動態更新ECharts圖表：
// 發送請求獲取數據$.ajax({type: "get",url: "/echars/educational",dataType: "json",success: function (data) {// 將所有的key放在一個數組中var keys = [];var values = [];for (var i = 0; i < data.length; i++) {if (data[i].name == null || data[i].name === "") {continue;}if (data[i].value > 100) {keys.push(data[i].name);values.push(data[i].value);}}option = {// backgroundColor: '#00265f',tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},grid: {left: '0%',top: '10px',right: '0%',bottom: '4%',containLabel: true},xAxis: [{type: 'category',data: keys,axisLine: {show: true,lineStyle: {color: "rgba(255,255,255,.1)",width: 1,type: "solid"},},axisTick: {show: false,},axisLabel: {interval: 0,// rotate:50,show: true,splitNumber: 15,textStyle: {color: "rgba(255,255,255,.6)",fontSize: '12',},},}],yAxis: [{type: 'value',axisLabel: {//formatter: '{value} %'show: true,textStyle: {color: "rgba(255,255,255,.6)",fontSize: '12',},},axisTick: {show: false,},axisLine: {show: true,lineStyle: {color: "rgba(255,255,255,.1 )",width: 1,type: "solid"},},splitLine: {lineStyle: {color: "rgba(255,255,255,.1)",}}}],series: [{type: 'bar',data: values,barWidth: '35%', //柱子寬度// barGap: 1, //柱子之間間距itemStyle: {normal: {color: '#2f89cf',opacity: 1,barBorderRadius: 5,}}}]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);window.addEventListener("resize", function () {myChart.resize();});}});
注意渲染圖表要在請求完數據以后
五、其他交互功能
在ECharts中，可以應用許多高級交互功能來增強用戶體驗和數據的可視化展示。以下是一些ECharts中常用的高級交互功能：
-
動畫效果（Animation）
ECharts 提供了多種動畫效果，可以在圖表的初始化、數據更新時展現。動畫效果可以通過animation配置項來開啟和定制。option = {animation: true,animationDelay: function (idx) {return Math.random() * 200;},animationDuration: 500,animationEasing: 'elasticOut' };這允許開發者為圖表添加更加生動的動畫效果，提升視覺效果。
-
數據縮放（Data Zoom）
數據縮放功能允許用戶在圖表中縮放查看數據，這對于展示大量數據的圖表非常有用。option = {dataZoom: [{type: 'slider', // 數據縮放的類型，'slider' 表示滑動條型start: 0, // 數據窗口的起始百分比end: 100 // 數據窗口的結束百分比},{type: 'inside', // 內置型數據縮放，通過鼠標滾輪放大縮小start: 0, // 數據窗口的起始百分比end: 100 // 數據窗口的結束百分比}] };用戶可以通過滑動條或鼠標滾輪來放大或縮小圖表，查看特定區域的數據。
-
數據區域選擇（Data Range）
數據區域選擇組件允許用戶選擇數據的某個范圍進行查看。option = {visualMap: {type: 'continuous',min: 0,max: 100,left: 'left',top: 'bottom',text: ['高', '低'], // 文本，默認為數值文本calculable: true, // 是否顯示拖動用的手柄inRange: {color: ['lightskyblue', 'yellow', 'orangered']}} };用戶可以通過拖動手柄來選擇數據的特定范圍，圖表會相應地展示所選范圍的數據。
-
工具箱（Toolbox）
工具箱組件提供了保存為圖片、數據視圖、動態類型切換等功能。option = {toolbox: {show: true,feature: {saveAsImage: { show: true, title: "保存為圖片" },dataView: { show: true, title: "數據視圖" },magicType: { show: true, title: { line: "折線圖", bar: "柱狀圖" } }}} };用戶可以通過工具箱進行多種交互操作，如保存圖表、查看數據、切換圖表類型等。
-
圖表聯動
ECharts 支持多個圖表之間的聯動，用戶可以通過操作一個圖表來影響其他圖表。常見的場景是多個圖表展示相同數據的不同維度，通過聯動操作可以讓圖表同步變化。
這使得用戶可以在多個圖表之間進行交互，比如在一個圖表中選擇一個數據點，其他圖表會展示與該數據點相關的信息。 -
實時數據更新
ECharts 提供了setOption方法用于更新圖表的數據，這對于需要顯示動態實時數據的圖表非常有用。
用戶可以設置定時器，定期從服務器獲取新數據，并使用setOption方法更新圖表，實現實時數據的展示。
這些高級交互功能使得ECharts不僅能夠展示靜態的數據圖表，還能夠提供動態的、交互式的用戶體驗，適用于各種復雜的數據展示和分析場景。
六、總結
通過上述步驟，我們成功地將ECharts與數據庫連接，并實現了實時數據的可視化繪制。這種方法不僅可以用于銷售數據，還可以廣泛應用于其他需要實時數據展示的場景。ECharts的靈活性和強大的功能使其成為數據可視化的優選工具。
版權聲明：本博客內容為原創，轉載請保留原文鏈接及作者信息。
參考文章：
- ECharts 教程 | 菜鳥教程
- ECharts連接數據庫的具體實現
