这周用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所需要的包，否则会显示错误。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。