這周用java web制作了全國各個省份的疫情數(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: ’全國各省確診人數(shù)’ }, tooltip: {}, legend: { data:[’確診人數(shù)’], width:’auto’, height:’auto’ }, xAxis: { data: [] }, yAxis: {}, series: [{ name: ’確診人數(shù)’, type: ’bar’, data: [] }] }); myChart.showLoading(); var names=[]; //類別數(shù)組（實(shí)際用來盛放X軸坐標(biāo)值） var nums=[]; //銷量數(shù)組（實(shí)際用來盛放Y坐標(biāo)值） // 使用剛指定的配置項(xiàng)和數(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即為服務(wù)器返回的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ù)名字對應(yīng)到相應(yīng)的系列 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格式必須導(dǎo)入json所需要的包，否則會顯示錯誤。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。