echarts-動態折線圖（ajax）
阿新 • • 發佈：2019-02-04
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script> <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script> <title>Insert title here</title> </head> <body> <div id="main" style="height: 400px; width: 800px; padding: 20px"></div> <script type="text/javascript"> var date = []; //日期 var number = []; //數量 var names = []; //名字 $.ajax({ type : "get", url : "1.json", //請求 dataType : "json", //返回資料形式為json success : function(result) { //請求成功時執行該函式內容，result即為伺服器返回的json物件 $.each(result.RECORDS, function(index, item) { date.push(item.shi); number.push(item.shu); names.push(item.name); }); // 基於準備好的dom，初始化echarts例項 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和資料 var option = { title : { text : names[0] }, xAxis : { name : '日期', type : 'category', data : date }, yAxis : { name : '數量', type : 'value' }, series : [ { data : number, type : 'line' } ] }; //載入echarts myChart.setOption(option); } }) </script> </body> </html>
JSON
{ "RECORDS": [ { "name": "許巨集高娃", "fen": "清城店A組", "dian": "清城店", "qu": "大興三區", "shu": "8", "shi": "20180601" }, { "name": "許巨集高娃", "fen": "清城店A組", "dian": "清城店", "qu": "大興三區", "shu": "10", "shi": "20180602" }, { "name": "許巨集高娃", "fen": "清城店A組", "dian": "清城店", "qu": "大興三區", "shu": "13", "shi": "20180603" }, { "name": "許巨集高娃", "fen": "清城店A組", "dian": "清城店", "qu": "大興三區", "shu": "12", "shi": "20180604" }, { "name": "許巨集高娃", "fen": "清城店A組", "dian": "清城店", "qu": "大興三區", "shu": "9", "shi": "20180605" }, { "name": "許巨集高娃", "fen": "清城店A組", "dian": "清城店", "qu": "大興三區", "shu": "21", "shi": "20180606" }, { "name": "許巨集高娃", "fen": "清城店A組", "dian": "清城店", "qu": "大興三區", "shu": "18", "shi": "20180607" } ] }