<%@ 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"
}
]
}