html:
<div id="main" style="width: 600px;height:400px;"></div>
js:
<script type="text/javascript" src="js/lib/echarts.min.js"></script>
<script type="text/javascript">
var apidata = {params:[
["17/7/10","17/7/12","17/7/14","17/7/16","17/7/18","17/7/20"],
["11","15","8","33","55","21"]
]
}
var dom = document.getElementById("main");
var myChart = echarts.init(dom);
//var myChart = echarts.init(document.getElementById('main'));
function addData(shift) {
date = apidata.params[0];
data = apidata.params[1];
date.push(parseInt(Math.random()*10));
data.push(parseInt(Math.random()*10));
if (shift) {
date.shift();
data.shift();
}
}
option = {
title: {
text: 'echart实时数据监控--类似股票走势图效果'
},
tooltip: {trigger: 'axis',//提示跟随鼠标位置显示
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#283b56'
}
}},
legend: {
data:['销量']
},
xAxis: {
data: apidata.params[0]
},
yAxis: {boundaryGap: [0, '100%']},
series: [{
name: '销量',
type: 'line',
data: apidata.params[1]
}]
};
setInterval(function () {
addData(true);
myChart.setOption({
xAxis: {
data: date
},
series: [{
name:'成交',
data: data
}]
});
}, 2000);
//下面这段代码是必须要加的,否则会报 series.type should be specified.
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>