例子为x轴动态刷新且x轴为时间,粘出了全部代码供大家参考
新手上路各位多多指导,谢谢!
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<style type="text/css">
.boxjkaj{height: 49%;width: 57.8% ;}
</style>
</head>
<body style="height: 100%; margin: 0">
<div class="boxjkaj" id="container" ></div>
<script type="text/javascript" src="js/echarts.js"></script>
<script src="echarts-all.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myline2 = echarts.init(dom);
option = null;
var startTime=[2012,11,11,11,1,1];
var d=new Date();
d.setFullYear(startTime[0]);
d.setMonth(startTime[1]);
d.setDate(startTime[2]);
d.setHours(startTime[3]);
d.setMinutes(startTime[4]);
d.setSeconds(startTime[5]);
var base = +d;
//后台传递开始
var oneDay = 1000;
var date = [];
var num = 0;
var data1 = [Math.random()];
var data2 = [Math.random()];
var now = new Date(base);
function addData(shift) {
var tmp = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/') + "\n" + [ now.getHours(), now.getMinutes(), now.getSeconds()].join(':');
date.push(tmp);
data1.push((Math.random() - 0.4) * 10 + data1[data1.length - 1]);
data2.push((Math.random() - 0.4) * 10 + data1[data1.length - 1]);
if (shift) {
date.shift();
data1.shift();
data2.shift();
}
now = new Date(+new Date(now) + oneDay);
}
for (var i = 1; i <= 6; i++) {
num = num + 1;
addData();
}
var xcd='CUFen'
option ={
backgroundColor:['#00cccc'],
color:['#2D7FCC','#87314C'],
tooltip: {
trigger: 'axis'
},
legend: {
x: 'right',
data:[xcd,'CUF'],
textStyle:{
color:"#FFFFFF",
fontsize:5
}
},
xAxis: {
axisLabel:{
textStyle:{
color:'#FFFFFF'
},
interval:0,
},
axisLine: {
lineStyle: {
color:'#0B438B'
}
},
type: 'category',
boundaryGap: false,
data: date
},
yAxis: {
splitLine:{
show:false,
},
axisLine: {
lineStyle: {
color:'#0B438B',
}
},
axisLabel: {
textStyle: {
color: '#FFFFFF'
}
},
boundaryGap: [0, '50%'],
type: 'value'
},
grid: {
top:'3%',
left: '1%',
right: '5%',
bottom: '5%',
containLabel: true,
},
series: [
{
name:'CUFen',
type:'line',
data:data1
},
{
name:'CUF',
type:'line',
data:data2
},
]
};
setInterval(function () {
addData(true);
myline2.setOption({
xAxis: {
data: date
},
series: [
{
name: 'CUFen',
data: data1,
},
{
name: 'CUF',
data: data2,
},
]
});
}, 1000);
if (option && typeof option === "object") {
myline2.setOption(option, true);
}
</script>
</body>
</html>
前后台交互的话date使用数组即可,如果是字符串的话请使用如下代码将字符串转数组:
var datasz = data.split(",");