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将数据库中的TEXT类型数据动态赋值到TEXTAREA中
Apr 20 Javascript
很酷的javascript loading效果代码
Jun 18 Javascript
Javascript new关键字的玄机 以及其它
Aug 25 Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 Javascript
JS实现的4种数字千位符格式化方法分享
Mar 02 Javascript
jQuery实现个性翻牌效果导航菜单的方法
Mar 09 Javascript
JS随机调用指定函数的方法
Jul 01 Javascript
基于jQuery实现左右图片轮播(原理通用)
Dec 24 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
Jan 27 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
Feb 25 Javascript
Vue开发中遇到的跨域问题及解决方法
Feb 11 Javascript
Ant Design Pro 之 ProTable使用操作
Oct 31 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
JAVA/JSP学习系列之二
2006/10/09 PHP
java EJB 加密与解密原理的一个例子
2008/01/11 PHP
windows下配置php5.5开发环境及开发扩展
2014/12/25 PHP
php创建多级目录的方法
2015/03/24 PHP
JavaScript获取多个数组的交集简单实例
2013/11/11 Javascript
js 上下左右键控制焦点(示例代码)
2013/12/14 Javascript
js 鼠标移动显示图片的简单实例
2013/12/25 Javascript
JavaScript实现列出数组中最长的连续数
2014/12/29 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
2015/01/07 Javascript
javascript折半查找详解
2015/01/26 Javascript
JS如何设置元素样式的方法示例
2017/08/28 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
2018/09/14 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
2019/04/02 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
2020/11/04 Javascript
JS实现京东商品分类侧边栏
2020/12/11 Javascript
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
Python 实现数据结构-循环队列的操作方法
2019/07/17 Python
Python模块的制作方法实例分析
2019/12/21 Python
python自动提取文本中的时间(包含中文日期)
2020/08/31 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
Django视图类型总结
2021/02/17 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
计算s=f(f(-1.4))的值
2014/05/06 面试题
机械专业毕业生推荐信范文
2013/11/25 职场文书
应届毕业生自我鉴定范文
2013/12/27 职场文书
网络编辑职责
2014/03/01 职场文书
2014年医院十一国庆节活动方案
2014/09/15 职场文书
2014年办公室文员工作总结
2014/11/12 职场文书
员工辞职信范文
2015/03/02 职场文书
电影雷锋观后感
2015/06/10 职场文书
西安事变观后感
2015/06/12 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python
Spring整合Mybatis的全过程
2021/06/28 Java/Android