echarts+rabbitmq实现数据实时显示

以Vue项目为例

1、我们采用发布订阅模式，使用STOMP协议，所以需要室内rabbitMQ的stomp插件 终端切到rabbitmq的sbin目录执行 rabbitmq-plugins enable rabbitmq_stomp 启用后，可以通过监听ws://IP:15674/ws服务地址接收后台用发布的消息

2、配置rabbitMQ客户端 写配置文件 cnonfig/rabbitmq.js

export const MQTT_SERVICE = ws://127.0.0.1:15674/ws 
export const MQTT_USERNAME = guest 
export const MQTT_PASSWORD = guest

创建客户端，订阅消息队列，注册回调函数

<template>
	<div id=image></div>
</template>
<script>
import Stomp from stompjs
import {
          
   MQTT_SERVICE, MQTT_USERNAME, MQTT_PASSWORD} from ../../config/rabbitmq

export default {
          
   
    name: Home,
    data() {
          
   
      return {
          
   
        client: Stomp.client(MQTT_SERVICE) //创建mq客户端
        x     : new Array(10)  //绘制曲线x坐标
        y     : new Array(10)  //绘制曲线y坐标
      }
    }，
    method(){
          
   
      onConnected1: function (frame) {
          
   
        this.client.subscribe(queueName, this.responseCallback, this.onFailed)
      },
      onFailed1: function (frame) {
          
   
        console.log(MQ Failed:  + frame)
      },
      responseCallback: function (frame) {
          
   
      	/**
      	假设消息为json格式：
      	 "{
      		x:Array(10),
      		y:Array(10)
      	 }"
      	*/
        let data = JSON.parse(frame.body) // frame.body是后台消息内容
        //更新数据
        this.x=data[x]
        this.y=data[y]
        //重新绘图
        this.draw(image)
      },
      connect: function () {
          
   
        this.client.connect(MQTT_USERNAME, MQTT_PASSWORD, this.onConnected, this.onFailed)
      },
      draw(id){
          
   
	  	let charts = echarts.init(document.getElementById(id))
        charts.setOption({
          
   
          tooltip: {
          
   
            trigger: axis
          },
          legend: {
          
   
            data: [data]
          },
          grid: {
          
   
            containLabel: true
          },
          // toolbox: {
          
   
          //   feature: {
          
   
          //     saveAsImage: {}
          //   }
          // },
          xAxis: {
          
   
            type: category,
            boundaryGap: false,
            data: this.x,
            splitLine: {
          
   
              show: true,
              lineStyle: {
          
   
                color: [#006400],
                width: 2,
                type: dotted
              }
            }
          },
          yAxis: {
          
   
            type: value,
            min: function (value) {
          
   
              return value.min - 10
            },
            max: function (value) {
          
   
              return value.max + 10
            },
            splitLine: {
          
   
              show: true,
              lineStyle: {
          
   
                color: [#006400],
                width: 2,
                type: dotted
              }
            }
          },
          series: [
            {
          
   
              symbol: "none",
              name: data,
              type: line,
              data: this.y,
              lineStyle: {
          
   
                width: 1
              }
            }
          ]
        })
      }
    }，
    created() {
          
   
      this.connect() //建立连接
    },
    mounted() {
          
   
      this.draw(image)
    }
 }
</script>