先看一下效果
移步至浏览器
Echarts实现心电图效果
var totalFlowRate = echarts.init(document.getElementById('totalFlowRate'));
var xAxisData = [];
var yAxisData = [];
for (var i = 500; i > 0; i--) {
xAxisData.push(i + "秒前");
}
for (i = 1; i < 501; i++) {
yAxisData.push(null);
}
var totalFlowRateOption = {
animation: false,
title: {
text: '总流量(kbps)'/*,
left:"110px"*/ },
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross' }
},
grid: {
left: 50/*"50px"*/,
right: 15/*"15px"*/
},
legend: {
data: ['当前流量']
},
xAxis: {
boundaryGap: false,
data: xAxisData
},
yAxis: { boundaryGap: false },
series: {
symbol: "none",/*去掉小圆点*/
name: '当前流量',
type: 'line',
data: yAxisData/*, smooth:true//显示为平滑的曲线*/
}
};
totalFlowRate.setOption(totalFlowRateOption);
setInterval(function () {
yAxisData.push(Math.round(Math.random() * 1000));
if(yAxisData.length>500) {
yAxisData.shift();
}
totalFlowRate.setOption(totalFlowRateOption);
}, 100);
如果觉得《心电图css Echarts实现心电图效果》对你有帮助，请点赞、收藏，并留下你的观点哦！
