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 相关文章推荐
非常有用的40款jQuery 插件推荐(系列二)
Dec 25 Javascript
PHP PDO操作总结
Nov 17 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
Oct 21 Javascript
JavaScript的String字符串对象常用操作总结
May 26 Javascript
检查表单元素的值是否为空的实例代码
Jun 16 Javascript
jQuery UI制作选项卡(tabs)
Dec 13 Javascript
php输出全部gb2312编码内的汉字方法
Mar 04 Javascript
深入掌握 react的 setState的工作机制
Sep 27 Javascript
详解React之key的使用和实践
Sep 29 Javascript
代码实例ajax实现点击加载更多数据图片
Oct 12 Javascript
JavaScript实现简单轮播图效果
Dec 01 Javascript
JavaScript arguments.callee作用及替换方案详解
Sep 02 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
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
PHP 杂谈《重构-改善既有代码的设计》之三 重新组织数据
2012/04/09 PHP
php页码形式分页函数支持静态化地址及ajax分页
2014/03/28 PHP
PHP生成器简单实例
2015/05/13 PHP
给Javascript数组插入一条记录的代码
2007/08/30 Javascript
js常见表单应用技巧
2008/01/09 Javascript
使用SyntaxHighlighter实现HTML高亮显示代码的方法
2010/02/04 Javascript
setTimeout内不支持jquery的选择器的解决方案
2015/04/28 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
2015/10/23 Javascript
jQuery+formdata实现上传进度特效遇到的问题
2016/02/24 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
2016/05/31 Javascript
JS实现unicode和UTF-8之间的互相转换互转
2017/07/05 Javascript
Vue中的异步组件函数实现代码
2018/07/20 Javascript
关于node-bindings无法在Electron中使用的解决办法
2018/12/18 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
2019/04/04 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
2019/07/06 Javascript
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
2020/03/10 Javascript
如何使用three.js 制作一个三维的推箱子游戏
2020/07/29 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
2020/08/27 Javascript
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
Python读取YUV文件,并显示的方法
2018/12/04 Python
python如何制作英文字典
2019/06/25 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
python实现在一个画布上画多个子图
2020/01/19 Python
在tensorflow中设置使用某一块GPU、多GPU、CPU的操作
2020/02/07 Python
军训学生自我鉴定
2014/02/12 职场文书
管事部库房保管员岗位职责
2014/02/21 职场文书
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
2014年人事行政工作总结
2014/12/03 职场文书
西岭雪山导游词
2015/02/06 职场文书
春风化雨观后感
2015/06/11 职场文书
python如何正确使用yield
2021/05/21 Python
python中的sys模块和os模块
2022/03/20 Python