在这次项目开发中使用了ajax,进行前端和后端的数据交互;
获取数据使用定时器;
本文以横坐标动态变化的折线图为例进行说明,最终效果在文末,但是横坐标会随时间不停变化
<!--引入百度Echarts-->
<script src="{{ url_for('static', filename='js/echarts.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/shine.js') }}"></script>
在JS中,首先要初始化一个div来存放echarts
<script type="text/javascript">
var myChart_line = echarts.init(document.getElementById('line-chart'));
<!--设置队列-->
var timeline_data = {***:[], ***:[], ***:[], ***:[], ***:[], ***:[], ***:[]};
app.timeTicket = setInterval(function(){
getData_line();
},2000);
function getData_line() {
$.ajax({
url:'/',
data:{'host':host_ip},
type:'POST',
async:false,
dataType:'json',
success:function(data) {
<!--横坐标最多10个,多的从队首弹出,先进先出-->
if(timeline_data['time'].length > 10)
{
timeline_data["***"].shift();
timeline_data["***"].shift();
timeline_data["***"].shift();
timeline_data["***"].shift();
timeline_data["***"].shift();
timeline_data["***"].shift();
timeline_data["***"].shift();
}
timeline_data["***"].push(data.***[0]);
timeline_data["***"].push(data.***[0]);
timeline_data["***"].push(data.***[0]);
timeline_data["***"].push(data.***[0]);
timeline_data["***"].push(data.***[0]);
timeline_data["***"].push(data.***[0]);
timeline_data["***"].push(data.***[0]);
data = timeline_data;
myChart_line.setOption({
title: {
text: '实时攻击检测图'
},
tooltip : {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data:[]
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
boundaryGap : false,
data : data.time
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'示例图的小注释名字',
type:'line',
data: data.***和后端的json数据有关
},
{
name:'',
type:'line',
data:
},
{
name:'',
type:'line',
data:
},
{
name:'',
type:'line',
data:
},
{
name:'',
type:'line',
data:
},
{
name:'全部',
type:'line',
label: {
normal: {
show: true,
position: 'top'
}
},
data:
}
]
})
},
error:function (msg) {
console.log(msg);
alert('系统发生错误');
}
})
};
</script>