在为写这个项目之前，并没有大范围的写过前端，这次也是锻炼了，由于项目需求，要求echarts图动态加载数据（定时加载），一下是我在网上看到的例子，在此基础上做了修改，实现了功能。但觉得还有很多需改进和学习的地方。
使用window.setInterval自动刷新数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="divProgress" style="width: 600px;height:400px;"></div>
<script src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
var myChart;
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
myChart = ec.init(document.getElementById('divProgress'));
var option = {
tooltip: {
show: true
},
animation: false,
legend: {
data: ['销量']
},
xAxis: [
{
type: 'category',
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
"name": "销量",
"type": "bar",
"data": [5, 20, 40, 10, 10, 20]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
//这里用setTimeout代替ajax请求进行演示
//3s刷新一次
window.setInterval(function () {
var data = [0, 0, 0, 0, 0, 0];
refreshData(data);
},3000);
function refreshData(data){
if(!myChart){
return;
}
//更新数据
var option = myChart.getOption();
option.series[0].data = data;
myChart.setOption(option);
}
</script>
</body>
</html> 我认为这种方法存在一种弊端。如：在你设置的刷新时间较短的时候并未发现弊端，一旦设置刷新时间较长的话（如2min），很容易就会发现，在首次加载页面的时候并不能立即展示出数据，而是要经过刷新的时间间隔（2min）后，echarts方可展现。对此，我做了修改，修改之后的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!-- 引入 echarts.js -->
<script type="text/javascript" src="js/echarts.min.js"></script>
<!-- 引入jquery.js -->
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery.loading.js"></script>
</head>
<body>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 column">
<div class="panel info-list" id="solrsumPanel">
<div class="panel-heading">
<span class="panel-title">响应时间</span>
</div>
<div class="panel-body graph" style="height: 400px;"
id="solrsumChart"></div>
</div>
</div>
<script type="text/javascript">
var drawsolr = function() {
// 基于准备好的dom，初始化echarts实例
$('#solrsumPanel').showLoading()// 显示loading效果，同时关闭提示消息
var myChart = echarts.init(document.getElementById('solrsumChart'));
$.ajax({
type : 'get',
url : "data.json",
data : {
},
success : function(data) {
$.each(data.dateTime, function(i, d) {
data.dateTime[i] = data.dateTime[i].substring(0, 10) + ' -'
+ data.dateTime[i].substring(11, 19);// 截取日期
});
var date3 = [];
var nums = [];
var datalist = [];
var times = [];
for (var i = 0; i < data.dateTime.length; i++) {
date3.push(data.dateTime[i]);
datalist.push(data.nums[i]);
times.push(data.cost[i]);
}
$('#solrsumPanel').hideLoading()
// 指定图表的配置项和数据
var option = {
tooltip : {
trigger : 'axis',
axisPointer : {
type : 'cross',
label : {
backgroundColor : '#283b56'
}
}
},
toolbox : {
show : true,
feature : {
dataView : {
readOnly : false
},
restore : {},
saveAsImage : {}
}
},
xAxis : [ {
type : 'category',
boundaryGap : true,
data : data.dateTime,
nameLocation : 'middle'
} ],
yAxis : [ {
type : 'value',
scale : true,
name : '数量',
boundaryGap : [ 0.2, 0.2 ],
axisLabel : {
formatter : '{value} 条'
}
}, {
type : 'value',
scale : true,
name : '时间',
boundaryGap : [ 0.2, 0.2 ],
splitLine : {
show : false
},
axisLabel : {
formatter : '{value} ms'
}
} ],
dataZoom : [ {
show : true,
realtime : true,
start : 65,
end : 85
}, {
type : 'inside',
realtime : true,
start : 65,
end : 85
} ],
series : [ {
name : '数量',
type : 'bar',
data : data.nums
}, {
name : '时间',
type : 'line',
yAxisIndex : 1,
data : data.cost
} ]
};
myChart.setOption(option);
},
error : function(XMLHttpRequest) {
$('#solrsumPanel').hideLoading();
$('#solrsumPanel').msg({
type : 'danger',
text : "查询数据出错，请联系管理人员！"
});
}
});
}
$(function() {
drawsolr();
});
//一分钟刷新一次
setInterval(function() {
drawsolr();
}, 60000);
</script>
</body>
</html>json数据格式如下：
{
"dateTime": [
"2017-05-05 00:10:02Z",
"2017-05-05 00:20:02Z",
"2017-05-05 00:30:02Z",
"2017-05-05 00:40:02Z",
"2017-05-05 00:50:02Z",
"2017-05-05 01:00:02Z",
"2017-05-05 01:10:02Z",
"2017-05-05 01:20:02Z",
"2017-05-05 01:30:02Z",
"2017-05-05 01:40:02Z",
"2017-05-05 01:50:02Z",
"2017-05-05 02:00:02Z",
"2017-05-05 02:10:02Z",
"2017-05-05 02:20:02Z",
"2017-05-05 02:30:02Z",
"2017-05-05 02:40:02Z"
],
"nums": [
91,
90,
89,
89,
89,
87,
89,
89,
85,
87,
85,
87,
89,
85,
87,
87
],
"cost": [
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null
]
} 这种方法虽然解决了上述的问题，但还是有不足的地方，例如：在动态加载数据的时候并不是局部（柱状折线）刷新，而是整张图都刷新，没有做到很好的数据实时推送。这一部分可以通过长轮询进行实现。后续会做进一步补充，今天就先到这儿吧......
