Vue中使用Echarts仪表盘展示实时数据的实现


Posted in Javascript onNovember 01, 2020

在vue中echarts仪表盘实时数据
彩笔一枚,简单记录一下。
业务场景:通过websocket实时推送数据,将数据渲染到仪表盘中。

第一步:
基于准备好的dom,初始化echarts仪表盘实例。

第二步:
我是通过父子组件传值把数据接收过来,在data中定义upPressure参数,并将接收来的devicePressure参数赋值给它,便于后面将值传入到echarts中

父组件中
 <div class="chart" shadow="always">
  <objEcharts :devicePressure="pressure"></objEcharts>
 </div>

子组件中
export default {
 props: {
  devicePressure: { type: String, require: true },
 },
 data() {
  return {
   upPressure: this.devicePressure,
  };
 },

第三步:
因为是实时数据,就需要在watch中监听数据变化,实时更新。
注:这里我只监听一个参数变化,没有使用deep: true。

watch: {
 	//监听devicePressure的数据变化。
  devicePressure(newData, oldData) {
  //把更新后的数据newData,赋值给需要传入echarts中的参数。
   this.upPressure = newData;
  //一定要调用echarts实例,要不然echarts不实时展示。
   this.drawLine();
  },
 },

第四步:
数据处理完之后,就要把它展示到仪表盘中了,所以直接找到echarts中需要数据的地方就好了。
介于仪表盘样式,可结合官方文档自定义。

export default {
 props: {
  devicePressure: { type: String, require: true },
 },
 data() {
  return {
   upPressure: this.devicePressure,
  };
 },
 mounted() {
  this.drawLine();
 },
 watch: {
  	devicePressure(newData, oldData) {
   this.upPressure = newData;
   this.drawLine();
  },
 },
methods: {
  drawLine() {
   // 基于准备好的dom,初始化echarts实例
   let visualOneChart = this.$echarts.init(document.getElementById("visualOneChart"));
   // 绘制图表
   visualOneChart.setOption({
    tooltip: {
     formatter: "{a} <br/>{b} : {c}Pa",
    },
    series: [
     {
      name: "压力值",
      type: "gauge",
      clockwise: true,
      detail: {
       formatter: this.upPressure,
       textStyle: {
        fontSize: 14,
       },
      },
      data: [{ value: this.upPressure, name: "压力值" }],
      radius: "90%",
      axisLabel: {// 刻度标签。
       show: true,
       distance: -5,
       color: "black", 
       fontSize: 10, 
       formatter: "{value}", 
      },
      axisLine: {// 仪表盘轴线(轮廓线)相关配置。
       show: true, 
       lineStyle: {// 仪表盘轴线样式。
        opacity: 1, 
        width: 15, 
        shadowBlur: 10, 
       },
      },
      pointer: { // 仪表盘指针。
       show: true,
       length: "70%", 
       width: 4, 
      },
     },
    ],
   });
  },
 },
}

Vue中使用Echarts仪表盘展示实时数据的实现

到此这篇关于Vue中使用Echarts仪表盘展示实时数据的实现的文章就介绍到这了,更多相关Vue Echarts仪表盘 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
ExtJS 2.0实用简明教程之应用ExtJS
Apr 29 Javascript
jQuery中hover方法和toggle方法使用指南
Feb 27 Javascript
JavaScript常用字符串与数组扩展函数小结
Apr 24 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
May 09 Javascript
全面解析bootstrap格子布局
May 22 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
Jul 01 Javascript
Mvc提交表单的四种方法全程详解
Aug 10 Javascript
js实现显示手机号码效果
Mar 09 Javascript
JS使用贪心算法解决找零问题示例
Nov 27 Javascript
详解使用vuex进行菜单管理
Dec 21 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
Sep 04 Javascript
微信小程序服务器日期格式化问题
Jan 07 Javascript
JavaScript实现刮刮乐效果
Nov 01 #Javascript
微信小程序实现单个或多个倒计时功能
Nov 01 #Javascript
微信小程序实现页面监听自定义组件的触发事件
Nov 01 #Javascript
uniapp微信小程序实现一个页面多个倒计时
Nov 01 #Javascript
uni-app使用countdown插件实现倒计时
Nov 01 #Javascript
uni-app实现获取验证码倒计时功能
Nov 01 #Javascript
uniapp电商小程序实现订单30分钟倒计时
Nov 01 #Javascript
You might like
有关 PHP 和 MySQL 时区的一点总结
2008/03/26 PHP
php smarty模版引擎中的缓存应用
2009/12/11 PHP
js+php实现静态页面实时调用用户登陆状态的方法
2015/01/04 PHP
Yii2下session跨域名共存的解决方案
2017/02/04 PHP
PHP基于SimpleXML生成和解析xml的方法示例
2017/07/17 PHP
容易被忽略的JS脚本特性
2011/09/13 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
javascript格式化json显示实例分析
2015/04/21 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
2015/12/07 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
分享javascript、jquery实用代码段
2016/10/20 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
2016/11/16 Javascript
JavaScript设置名字输入不合法的实现方法
2017/05/23 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
基于vue、react实现倒计时效果
2019/08/26 Javascript
jQuery实现简易QQ聊天框
2020/02/10 jQuery
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
Python lambda和Python def区别分析
2014/11/30 Python
Python操作Word批量生成文章的方法
2015/07/28 Python
关于Python中异常(Exception)的汇总
2017/01/18 Python
linux环境下python中MySQLdb模块的安装方法
2017/06/16 Python
树莓派使用python-librtmp实现rtmp推流h264的方法
2019/07/22 Python
对于Python深浅拷贝的理解
2019/07/29 Python
python配置文件写入过程详解
2019/10/19 Python
Python中如何引入第三方模块
2020/05/27 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
用CSS3绘制三角形的简单方法
2015/07/17 HTML / CSS
canvas实现烟花的示例代码
2020/01/16 HTML / CSS
物业管理专业个人的自我评价
2013/11/19 职场文书
满月酒主持词
2014/03/27 职场文书
运动会广播稿200字
2014/10/18 职场文书
2014年青年教师工作总结
2014/12/17 职场文书
2015年留守儿童工作总结
2015/05/22 职场文书
导游词之张家口
2019/12/13 职场文书
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android