您好,登錄后才能下訂單哦!
這周用java web制作了全國(guó)各個(gè)省份的疫情數(shù)據(jù)的可視化,做的是最基礎(chǔ)的柱狀圖。
先導(dǎo)入
相應(yīng)的echarts包和插件
<script type="text/javascript"> // 基于準(zhǔn)備好的dom,初始化echarts實(shí)例 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項(xiàng)和數(shù)據(jù) myChart.setOption({ title: { text: '全國(guó)各省確診人數(shù)' }, tooltip: {}, legend: { data:['確診人數(shù)'], width:'auto', height:'auto' }, xAxis: { data: [] }, yAxis: {}, series: [{ name: '確診人數(shù)', type: 'bar', data: [] }] }); myChart.showLoading(); var names=[]; //類別數(shù)組(實(shí)際用來(lái)盛放X軸坐標(biāo)值) var nums=[]; //銷量數(shù)組(實(shí)際用來(lái)盛放Y坐標(biāo)值) // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
這個(gè)是echarts的基本框架具體的數(shù)值要通過(guò)ajax向servlet發(fā)送請(qǐng)求從而獲取數(shù)據(jù)庫(kù)的數(shù)據(jù),
$.ajax({ type : "post", async : true, //異步請(qǐng)求(同步請(qǐng)求將會(huì)鎖住瀏覽器,用戶其他操作必須等待請(qǐng)求完成才可以執(zhí)行) url : "search", //請(qǐng)求發(fā)送到TestServlet處 success : function(resultJson) { var result= jQuery.parseJSON(resultJson); //請(qǐng)求成功時(shí)執(zhí)行該函數(shù)內(nèi)容,result即為服務(wù)器返回的json對(duì)象 if (result) { for(var i=0;i<result.length;i++){ names.push(result[i].name); //挨個(gè)取出類別并填入類別數(shù)組 nums.push(result[i].value); } myChart.hideLoading(); //隱藏加載動(dòng)畫(huà) myChart.setOption({ //加載數(shù)據(jù)圖表 xAxis: { data: names }, series: [{ // 根據(jù)名字對(duì)應(yīng)到相應(yīng)的系列 name: '確診人數(shù)', data: nums }] }); } }, error : function(errorMsg) { //請(qǐng)求失敗時(shí)執(zhí)行該函數(shù) alert("圖表請(qǐng)求數(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格式必須導(dǎo)入json所需要的包,否則會(huì)顯示錯(cuò)誤。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。