需要的文件与安装tomcat
安装tomcat：https://blog.csdn.net/qq_32519693/article/details/71330930
下载JQuery：http://code.jquery.com/jquery-2.1.4.min.js
下载echarts:http://echarts.baidu.com/download.html
dataLine.json文件内容：
{
“xData”:[“周一”,“周二”,“周三”,“周四”,“周五”,“周六”,“周日”],
“yDataHight”:[11, 11, 15, 13, 12, 13, 10],
“yDataLow”:[1, -2, 2, 5, 3, 2, 0]
}
dataLine2.json文件内容：
{
“status”: 200,
“message”: “ok”,
“data”: [{
“xData”: “周一”,
“yDataHight”: 11,
“yDataLow”: 1
},
{
“xData”: “周二”,
“yDataHight”: 11,
“yDataLow”: -2
},
{
“xData”: “周三”,
“yDataHight”: 15,
“yDataLow”: 2
},
{
“xData”: “周四”,
“yDataHight”: 13,
“yDataLow”: 5
},
{
“xData”: “周五”,
“yDataHight”: 12,
“yDataLow”: 3
},
{
“xData”: “周六”,
“yDataHight”: 13,
“yDataLow”: 2
},
{
“xData”: “周日”,
“yDataHight”: 10,
“yDataLow”: 0
}
]
}
效果图：
一、Ajax方法获取json数据
- 使用文件：dataLinejson
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>气温变化</title>
<style type="text/css">
#main{height:400px;width: 800px;}
</style>
<script src="jquery-2.1.4.min.js"></script>
</head>
<body>
<div id="main"></div>
<script src="https://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
require.config({
paths:{
echarts:'https://echarts.baidu.com/build/dist'
}});
require(
['echarts', 'echarts/chart/line'],//按需加载图表关于线性图、折线图的部分
function(ec){
var myChart=ec.init(document.getElementById('main'));
var option={
title:{
text:"未来一周的气温变化",
subtext:"纯属虚构"
},
tooltip:{
trigger:'axis'
},
legend:{
data:['最高气温','最低气温']
},
xAxis:{
type:'category',
data:[]
},
yAxis:{
type:'value'
},
series:[
{
name:'最高气温',
type:'line',
data:[]
},
{
name:'最低气温',
type:'line',
data:[]
}
]
};
$.ajax({
type:"GET",
url:"dataLine.json",
dataType:"json",
success:function (data){
console.log(data);
option['xAxis']['data']=data['xData'];
option['series'][0]['data']=data['yDataHight'];
option['series'][1]['data']=data['yDataLow'];
myChart.setOption(option);
}
});
}
)
</script>
</body>
</html>
- 使用文件：dataLine2.json
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>气温变化</title>
<style type="text/css">
#main{height:400px;width: 800px;}
</style>
<script src="jquery-2.1.4.min.js"></script>
<script src="echarts.min.js"></script>
</head>
<body>
<div id="main"></div>
<script type="text/javascript">
var myChart=echarts.init(document.getElementById('main'));
var option={
title:{
text:"未来一周的气温变化",
subtext:"纯属虚构"
},
tooltip:{
trigger:'axis'
},
legend:{
data:['最高气温','最低气温']
},
xAxis:{
type:'category',
data:[]
},
yAxis:{
type:'value'
},
series:[
{
name:'最高气温',
type:'line',
data:[]
},
{
name:'最低气温',
type:'line',
data:[]
}
]
};
myChart.setOption(option);
$.ajax({
url: "dataLine2.json",
dataType: "json"
}).done(function(res) {
list = res.data;
console.log('Data: ', list);
const xData = [];
const maxData = [];
const minData = [];
for(let i in list) {
minData.push(list[i].yDataLow);
maxData.push(list[i].yDataHight);
xData.push(list[i].xData);
}myChart.setOption({ //在option添加数据
xAxis: {
data: xData
},
series: [
{data: maxData},
{data:minData}
]
});
}).fail(function(jqXHR) {
console.log("Ajax Fail: ", jqXHR.status, jqXHR.statusText);
}
)
</script>
</body>
</html>
二、getjson方法获取json数据（文件：dataLinejson）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>气温变化</title>
<style type="text/css">
#main{height:400px;width: 800px;}
</style>
<script src="jquery-2.1.4.min.js"></script>
</head>
<body>
<div id="main"></div>
<script src="https://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
require.config({
paths:{
echarts:'https://echarts.baidu.com/build/dist'
}});
require(
['echarts', 'echarts/chart/line'],//按需加载图表关于线性图、折线图的部分
function(ec){
var myChart=ec.init(document.getElementById('main'));
//导入json文件
$.get('dataLine.json',function(getdata){
console.log(getdata);//在控制台输出
var option={
title:{
text:"未来一周的气温变化",
subtext:"纯属虚构"
},
tooltip:{
trigger:'axis'
},
legend:{
data:['最高气温','最低气温']
},
xAxis:{
type:'category',
data:getdata.xData//getdata要和上面的getdata一样！！！
},
yAxis:{
type:'value'
},
series:[
{
name:'最高气温',
type:'line',
data:getdata.yDataHight//getdata要和上面的getdata一样！！！
},
{
name:'最低气温',
type:'line',
data:getdata.yDataLow//getdata要和上面的getdata一样！！！
}
]
};
myChart.setOption(option);
});
}
)
</script>
</body>
</html>
