ecahrts实现动态刷新(隔几秒重新显示)
代码:
<script> var chartDom = document.getElementById('main3'); var myChart = echarts.init(chartDom); var option; window.onload = function () { getSpider(); } window.setInterval(getSpider, 5000);// 每5s请求一次 function getSpider() { var result = []; var x = [] var y = [] $.ajax({ url: "spider", type: "POST", dataType: "json", async: false, success: function (data) { result = data } }); for (var i = 0; i < result.length; i++) { x.push(result[i].spider_time) y.push(result[i].number) } console.log(x) option = { title: { text: '实时评论量(动态)', subtext: '单位 条' }, tooltip: { trigger: 'axis' }, legend: {}, toolbox: { show: true, feature: { dataZoom: { yAxisIndex: 'none' }, dataView: {readOnly: false}, magicType: {type: ['line', 'bar']}, restore: {}, saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: x }, yAxis: { type: 'value' }, series: [ { type: 'line', data: y, markPoint: { data: [ {type: 'max', name: 'Max'}, {type: 'min', name: 'Min'} ] }, markLine: { data: [{type: 'average', name: 'Avg'}] } } ] }; option && myChart.setOption(option); } </script>
servlet代码:
package cn.itcast.servlet; import cn.itcast.bean.Days; import cn.itcast.bean.Spider; import cn.itcast.dao.DaysDao; import cn.itcast.dao.SpiderDao; import com.google.gson.Gson; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.util.List; public class SpiderServlet extends HttpServlet { private SpiderDao spiderDao =new SpiderDao(); @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doPost(req, resp); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding("UTF-8"); resp.setCharacterEncoding("UTF-8"); Gson gson = new Gson(); List<Spider> list=spiderDao.getSpider(); resp.getWriter().write(gson.toJson(list)); } }
生成效果: