echart中的动态线性图
官网地址:
http://echarts.baidu.com/demo.html#dynamic-data2
首先这个图的代码,官网已经给出,我们只需要按照自己的需求修改
// 线性图
$scope.data=[];
var lineChart = echarts.init(document.getElementById('lineEchart'));
function randomData(time, view) {
return {
name: time,
value: [
time,
view
]
}
}
var option = {
title: {
text: ''
},
tooltip: {
trigger: 'axis',
formatter: function (params) {
params = params[0];
// var date = new Date(params.name);
return params.value[0] + ' : ' + params.value[1];
},
axisPointer: {
animation: false
}
},
dataZoom: [ //滚动条属性
{
id: 'dataZoomX',
type: 'slider',
start: 0,
end: 30,
}
],
xAxis: {
type: 'time',
axisLabel: { //x轴显示全部数据的属性
interval: 0,
},
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: false
}
},
series: [{
name: '模拟数据',
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: $scope.data, //数据绑定
}]
};
lineChart.setOption(option);
$http发起异步post请求获取数据,封装成getData函数
我的程序中用到了date
$scope.startdate
是页面中ng-model双向绑定的数据
$filter('date')($scope.startdate, 'yyyy-MM-dd HH:mm:ss')
过滤器帮助我们过滤时间格式,HH
为24小时制
getData(); //调用函数
//获取图表数据
function getData() {
$http.post( "api地址", '{"startdate":"'
+ $filter('date')($scope.startdate, 'yyyy-MM-dd HH:mm:ss') + '"}')
.success(function (res) {
if (res.status == "success") {
var viewslist = [] //访问量
var datelist = [] //时间
//根据获得的数据格式,处理数据
res.data.forEach(function (item) {
datelist.push(item.DATADT);
viewslist.push(item.VIEWS);
})
var getdatalist = [];
for (var i = 0; i < datelist.length; i++) {
getdatalist.push(randomData(datelist[i], viewslist[i]));
}
//把参数传如图表中
lineChart.setOption({
series: [{
data: getdatalist
}]
});
}
})
这样就完成动态数据的图表啦!