首页 前端知识 echarts 图表,定时器实现数据实时动态

echarts 图表,定时器实现数据实时动态

2024-03-13 00:03:28 前端知识 前端哥 680 999 我要收藏

项目需求:后台实时数据,页面打开获取一次真是数据就好,但是要呈现出几秒动态一次。

方法:从接口拿到数据处理好备用,
技术点: 清除 echartBar.clear(); 重新压入 echartBar.setOption(optionBar);

html

<div class="item-chart" id="dangerOption" style="height:130px">  </div>

js:

function echartStart(){
	//此处echart我已经在main.js引入了,并且命名为`$echarts`
	// import Echarts from 'echarts'
	// Vue.prototype.$echarts = Echarts
	let echartBar = _this.$echarts.init(document.getElementById('dangerOption'));
	//重要
	echartBar.clear();
	let optionBar = {
		 grid: {
			 top: '20px',
			 left: '10px',
			 right: '10px',
			 bottom: '0px',
			 containLabel: true
		 },
		 xAxis: {
			 type: 'category',
			 data: ['堆物堆料', '消防通道', '防火门', '电动车', '水压', '电梯'],
			 axisLabel: {
				 color: '#fff'
			 },
			 axisLine: {
				 lineStyle: {
					 color: '#fff'
				 }
			 }
		 },
		 yAxis: {
			 type: 'value',
			 axisLabel: {
				 color: '#fff'
			 },
			 axisLine: {
				 lineStyle: {
					 color: '#fff'
				 }
			 },
			 splitLine: {
				 show: false
			 }
		 },
		 series: [{
		 	 //newData就是从接口出拿到的数据
			 data: newData,   
			 itemStyle: {normal: {label: {show: true}}},
			 type: 'line',
			 //animationDuration: 300,  //该属性设置动画速度
			//animationEasing: 'quadraticln' //运行的速度类型
		 }]
	};
	echartBar.setOption(optionBar);
	//当页面改变时,图表自适应
	window.onresize = echartBar.resize;

	//单个   如果按照上面的代码写,只会自适应最后一个【也好像是第一个】;
	//多个   此处可以写一个页面resize方法,增加防抖功能
	
	//第一步:
	//将echartBar 实例赋值给data中;
	//_this.echarts1 = echartBar;
	//第二步:
	//mounted(){
	// 	window.addEventListener('resize',this.pageResize);
	//},
	//第三步:
	//motheds:{
	// 	pageResize(){
	//		clearTimeout(_this.timer);
	//		_this.timer = null;
	//		_this.timer = setTimeout(()=> {
	//			//自适应方法
	//			this.echarts1.resize();
	//		},500)	
	//	}
	//}

}

//定时4s动态一次
_this.yhInterval = setInterval(function(){
	echartStart();
},4*1000)

在vue项目中记得在 beforeDestroy() 生命周期内将定时器销毁
beforeDestroy(){
clearInterval(_this.yhInterval);
_this.yhInterval = null;
}

在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3752.html
标签
评论
发布的文章

JavaScript基础库

2024-04-09 00:04:11

解决vue npm 下载echart出错

2024-04-09 00:04:05

Echarts中option属性设置

2024-04-08 23:04:58

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!