Vue中使用Echarts仪表盘展示实时数据的实现-自学php网

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

来源：自学PHP网时间：2020-11-02 10:30 作者：小飞侠阅读:次

[导读] Vue中使用Echarts仪表盘展示实时数据的实现...

今天带来Vue中使用Echarts仪表盘展示实时数据的实现教程详解

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

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

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

父组件中
 
  
 

子组件中
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} 
{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仪表盘内容请搜索自学php网以前的文章或继续浏览下面的相关文章希望大家以后多多支持自学php网！

以上就是关于Vue中使用Echarts仪表盘展示实时数据的实现全部内容,感谢大家支持自学php网。

ant design vue导航菜单与路由配置操作

解决vue项目打包上服务器显示404错误,本地没出错的问题

子栏目

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

最新评论

添加评论

更多文章推荐

添加评论