這周用java web制作了全國各個省份的疫情數據的可視化，做的是最基礎的柱狀圖。

先導入

相應的echarts包和插件

<script type='text/javascript'> // 基于準備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById(’main’)); // 指定圖表的配置項和數據 myChart.setOption({ title: { text: ’全國各省確診人數’ }, tooltip: {}, legend: { data:[’確診人數’], width:’auto’, height:’auto’ }, xAxis: { data: [] }, yAxis: {}, series: [{ name: ’確診人數’, type: ’bar’, data: [] }] }); myChart.showLoading(); var names=[]; //類別數組（實際用來盛放X軸坐標值） var nums=[]; //銷量數組（實際用來盛放Y坐標值） // 使用剛指定的配置項和數據顯示圖表。

這個是echarts的基本框架具體的數值要通過ajax向servlet發送請求從而獲取數據庫的數據，

$.ajax({ type : 'post', async : true, //異步請求（同步請求將會鎖住瀏覽器，用戶其他操作必須等待請求完成才可以執行） url : 'search', //請求發送到TestServlet處 success : function(resultJson) { var result= jQuery.parseJSON(resultJson); //請求成功時執行該函數內容，result即為服務器返回的json對象 if (result) { for(var i=0;i<result.length;i++){ names.push(result[i].name); //挨個取出類別并填入類別數組 nums.push(result[i].value); } myChart.hideLoading(); //隱藏加載動畫 myChart.setOption({ //加載數據圖表 xAxis: { data: names }, series: [{ // 根據名字對應到相應的系列 name: ’確診人數’, data: nums }] });} }, error : function(errorMsg) { //請求失敗時執行該函數 alert('圖表請求數據失敗!'); myChart.hideLoading(); } });

在servlet里面要將數據放回成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所需要的包，否則會顯示錯誤。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。