Java web數(shù)據(jù)可視化實現(xiàn)原理解析
這周用java web制作了全國各個省份的疫情數(shù)據(jù)的可視化,做的是最基礎的柱狀圖。
先導入
相應的echarts包和插件
<script type="text/javascript"> // 基于準備好的dom,初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和數(shù)據(jù) myChart.setOption({ title: { text: '全國各省確診人數(shù)' }, tooltip: {}, legend: { data:['確診人數(shù)'], width:'auto', height:'auto' }, xAxis: { data: [] }, yAxis: {}, series: [{ name: '確診人數(shù)', type: 'bar', data: [] }] }); myChart.showLoading(); var names=[]; //類別數(shù)組(實際用來盛放X軸坐標值) var nums=[]; //銷量數(shù)組(實際用來盛放Y坐標值) // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
這個是echarts的基本框架具體的數(shù)值要通過ajax向servlet發(fā)送請求從而獲取數(shù)據(jù)庫的數(shù)據(jù),
$.ajax({ type : "post", async : true, //異步請求(同步請求將會鎖住瀏覽器,用戶其他操作必須等待請求完成才可以執(zhí)行) url : "search", //請求發(fā)送到TestServlet處 success : function(resultJson) { var result= jQuery.parseJSON(resultJson); //請求成功時執(zhí)行該函數(shù)內(nèi)容,result即為服務器返回的json對象 if (result) { for(var i=0;i<result.length;i++){ names.push(result[i].name); //挨個取出類別并填入類別數(shù)組 nums.push(result[i].value); } myChart.hideLoading(); //隱藏加載動畫 myChart.setOption({ //加載數(shù)據(jù)圖表 xAxis: { data: names }, series: [{ // 根據(jù)名字對應到相應的系列 name: '確診人數(shù)', data: nums }] }); } }, error : function(errorMsg) { //請求失敗時執(zhí)行該函數(shù) alert("圖表請求數(shù)據(jù)失敗!"); myChart.hideLoading(); } });
在servlet里面要將數(shù)據(jù)放回成json格式
request.setCharacterEncoding("UTF-8"); response.setContentType("text/html;charset=utf-8"); System.out.println("1515"); List<Data> Data = null; Data = DBUtil.getAll(); List<Mydata> mydata = new ArrayList<Mydata>(); for (Data data : Data) { Mydata info = new Mydata(); info.setName(data.getProvince()); info.setValue(data.getConfirmed()); mydata.add(info); } Gson gson = new Gson(); String json = gson.toJson(mydata); System.out.println(json); response.getWriter().write(json);
這里還要注意要想用json格式必須導入json所需要的包,否則會顯示錯誤。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
SpringBoot文件上傳接口并發(fā)性能調(diào)優(yōu)
在一個項目現(xiàn)場,文件上傳接口(文件500K)QPS只有30,這個并發(fā)性能確實堪憂,此文記錄出坑過程,文中通過代碼示例講解的非常詳細,具有一定的參考價值,需要的朋友可以參考下2024-06-06Springboot集成knife4j實現(xiàn)風格化API文檔
這篇文章主要介紹了Springboot如何集成knife4j實現(xiàn)風格化API文檔,幫助大家更好的使用springboot框架,感興趣的朋友可以了解下2020-12-12Java?Api實現(xiàn)Elasticsearch的滾動查詢功能
這篇文章主要介紹了Java?Api實現(xiàn)Elasticsearch的滾動查詢,解決ES每次只能查詢一萬條數(shù)據(jù)的問題,本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2023-08-08java如何實現(xiàn)嵌套對象轉(zhuǎn)大map(扁平化)
這篇文章主要介紹了java如何實現(xiàn)嵌套對象轉(zhuǎn)大map(扁平化),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10