目前有三种方式可以实现:1、定时器不停的刷新,2、是使用scoket实现,3、是使用requestAnimationFrame实现,原理都一样,都是不断循环调用echart对象的setOption方法,每次改变一下series里面的data数据(即每次在data数组最后push一个数据,如果数组总数达到设置的一屏最大数,则先shift开头的一个数据,再结尾push一个数据),达到动态更新曲线图,实现心电图动画效果。
下面来说下里面的实现两种方式,
方式一:
// 设备健康
deviceRes(data = { health: ['0', '0', '0'] }) {
if (data) {
for (let m = 0; m < 3; m++) {
this.optionDevice.series[m].data.shift();
this.optionDevice.series[m].data.push(data['health'][m]);
}
}
const now_date = new Date();
this.optionDevice.xAxis.data.shift();
this.optionDevice.xAxis.data.push(now_date.getHours() + ':' + now_date.getMinutes() + ':' + now_date.getSeconds());
this.device_chart.setOption({
xAxis: this.optionDevice.xAxis,
series: this.optionDevice.series
});
},
方式二:
1、安装echart
npm install echarts --save
2、在main.js里全局引入
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts
3、在页面里使用
心电图数据:
export default {
'chi': {
name: '迟脉',
'PulseShow': [99, 97, 95, 93, 91, 88, 85, 83, 80, 78, 75, 73, 71, 70, 68, 67, 65, 64, 63, 62, 60, 59, 58, 57, 55, 54, 53, 52, 51, 50, 49, 48, 47, 46, 45, 44, 43, 42, 41, 40, 39, 38, 37, 36, 35, 34, 33, 32, 31, 30, 29, 28, 27, 25, 24, 23, 22, 21, 20, 19, 19, 18, 17, 16, 16, 15, 14, 14, 13, 13, 12, 12, 12, 11, 11, 10, 10, 10, 9, 9, 8, 8, 8, 7, 7, 6, 6, 5, 5, 4, 4, 3, 3, 2, 2, 2, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 21, 23, 26, 28, 31, 34, 37, 41, 44, 48, 52, 57, 61, 66, 71, 75, 80, 84, 88, 92, 95, 97, 99, 100, 100, 100, 99, 97, 95, 93, 91, 88, 85, 83, 80, 78, 75, 73, 71, 70, 68, 67, 65, 64, 63, 62, 60, 59, 58, 57, 55, 54, 53, 52, 51, 50, 49, 48, 47, 46, 45, 44, 43, 42, 41, 40, 39, 38, 37, 36, 35, 34, 33, 32, 31, 30, 29, 28, 27, 25, 24, 23, 22, 21, 20, 19, 19, 18, 17, 16, 16, 15, 14, 14, 13, 13, 12, 12, 12, 11, 11, 10, 10, 10, 9, 9, 8, 8, 8, 7, 7, 6, 6, 5, 5, 4, 4, 3, 3, 2, 2, 2, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 21, 23, 26, 28, 31, 34, 37, 41, 44, 48, 52, 57, 61, 66, 71, 75, 80, 84, 88, 92, 95, 97, 99, 100, 100, 100, 99, 97, 95, 93, 91, 88, 85, 83, 80, 78, 75, 73, 71, 70, 68, 67, 65, 64, 63, 62, 60, 59, 58, 57, 55, 54, 53, 52, 51, 50, 49, 48, 47, 46, 45, 44, 43, 42, 41, 40, 39, 38, 37, 36, 35, 34, 33, 32, 31, 30, 29, 28, 27, 25, 24, 23, 22, 21, 20, 19, 19, 18, 17, 16, 16, 15, 14, 14, 13, 13, 12, 12, 12, 11, 11, 10, 10, 10, 9, 9, 8, 8, 8, 7, 7, 6, 6, 5, 5, 4, 4, 3, 3, 2, 2, 2, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 21, 23, 26, 28, 31, 34, 37, 41, 44, 48, 52, 57, 61, 66, 71, 75, 80, 84, 88, 92, 95, 97, 99, 100, 100, 100, 99, 97, 95, 93, 91, 88, 85, 83, 80, 78, 75, 73, 71, 70, 68, 67, 65, 64, 63, 62, 60, 59, 58, 57, 55, 54, 53, 52, 51, 50, 49, 48, 47, 46, 45, 44, 43, 42, 41, 40, 39, 38, 37, 36, 35, 34, 33, 32, 31, 30, 29, 28, 27, 25, 24, 23, 22, 21, 20, 19, 19, 18, 17, 16, 16, 15, 14, 14, 13, 13, 12]
}
}