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 相关文章推荐
Javascript - HTML的request类
Jul 15 Javascript
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
jQuery获取this当前对象子元素对象的方法
Nov 29 Javascript
js闭包用法实例详解
Dec 13 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
js中getBoundingClientRect的作用及兼容方案详解
Feb 01 Javascript
JavaScript EventEmitter 背后的秘密 完整版
Mar 29 Javascript
Vue中使用vue-i18插件实现多语言切换功能
Apr 25 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
Oct 20 Javascript
微信小程序scroll-view的滚动条设置实现
Mar 02 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
Apr 22 Javascript
在vue中实现给每个页面顶部设置title
Jul 29 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
重量级动漫纷纷停播!唯独OVERLORD第四季正在英魂之刃继续更新
2020/05/06 日漫
PHP 在线翻译函数代码
2009/05/07 PHP
PHP 显示客户端IP与服务器IP的代码
2010/10/12 PHP
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
php实现图形显示Ip地址的代码及注释
2014/01/20 PHP
ThinkPHP连接数据库及主从数据库的设置教程
2014/08/22 PHP
php实现的返回数据格式化类实例
2014/09/22 PHP
微信access_token的获取开发示例
2015/04/16 PHP
基于命令行执行带参数的php脚本并取得参数的方法
2016/01/25 PHP
PHP排序算法之基数排序(Radix Sort)实例详解
2018/04/21 PHP
js里的prototype使用示例
2010/11/19 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
jQuery代码实现表格中点击相应行变色功能
2016/05/09 Javascript
JS随机打乱数组的方法小结
2016/06/22 Javascript
ES6中Proxy代理用法实例浅析
2017/04/06 Javascript
javascript观察者模式实现自动刷新效果
2017/09/05 Javascript
vue获取DOM元素并设置属性的两种实现方法
2017/09/30 Javascript
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
vue项目中使用vue-layer弹框插件的方法
2020/03/11 Javascript
[00:58]2016年国际邀请赛勇士令状宣传片
2016/06/01 DOTA
Python实现曲线拟合操作示例【基于numpy,scipy,matplotlib库】
2018/07/12 Python
Python文件名匹配与文件复制的实现
2020/12/11 Python
五一家具促销方案
2014/01/10 职场文书
国际贸易专业个人职业生涯规划
2014/02/15 职场文书
彩色的非洲教学反思
2014/02/18 职场文书
商务日语专业毕业生自荐信
2014/03/27 职场文书
2014年药店店长工作总结
2014/11/17 职场文书
水电工程师岗位职责
2015/02/13 职场文书
军训决心书范文
2015/09/22 职场文书
小学教师教学反思
2016/02/24 职场文书
2016年第二十届“母亲节暨幸福工程救助贫困母亲活动日”活动总结
2016/04/06 职场文书
想要创业,那么你做好准备了吗?
2019/07/01 职场文书
用Python爬取各大高校并可视化帮弟弟选大学,弟弟直呼牛X
2021/06/11 Python