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>