vue socketio 实现echarts图表动态显示

本文主要为续之前vue和flask使用socketio实现互连的文章，记一下我的Vue项目中使用echarts实现动态图表的方法。

如仍然不了解 socketio 的使用方法，可点击此看我之前写的关于socketio文章。

echarts中文官网

vue-echarts 安装及用法

vue-echarts 安装

可通过vue-cli脚手架在运行依赖搜索echarts进行安装，或使用以下命令进行安装

npm install echarts --save

vue-echarts 使用

要在vue里使用echarts，需要在main.js中导入再使用
以下代码所在文件：main.js

全局导入

import echarts from 'echarts'

按需导入

const echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/line')
require('echarts/lib/chart/pie')
require('echarts/lib/component/tooltip')
require('...按所需要的组件进行导入...')

Vue.prototype.$echarts = echarts

导入完echarts，就要在组件中使用它，此处所使用的例子为折线图,UI使用ElementUI
以下代码所在文件:welcome.vue(所要使用的组件名称)

<template>
  <div class="most_box">
    <el-card>
      <div slot="header">
        <span>流量</span>
      </div>
      <div id="flow_statusBox" 
      style="width: 100%;height: 350px; float:bottom;" 
      ref="flow_status">
      </div>
    </el-card>
  </div>
</template>

注意echarts图标所在的div必须要设定长和宽才能展示，并使用ref=“XXX” 进行图表绑定

<script>
export default {
  data () {
    return {
      data: {}, // 接收socket数据表
      option_flow: { // 此处为echarts折线图元素
        title: {
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['上行流量', '下行流量']
        },
        grid: {
          top: '10%',
          left: '3%',
          right: '4%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: 'value',
          name: 'kb/s'
        },
        series: [
          {
            name: '上行流量',
            type: 'line',
            smooth: true,
            data: []
          },
          {
            name: '下行流量',
            type: 'line',
            smooth: true,
            data: []
          }
        ]
      }
    }
  },
  
  methods: {
    initCharts () {  
      this.flowCharts = this.$echarts.init(this.$refs.flow_status) // 实例化折线图
    }
  },
  sockets: {
    connect: function () {
      console.log('连接成功')
    },
    api:function (data) {    // api为对应后端发出的信息接口，可自行更换
        this.data = data     // 获取后端发出的信息
      }
    }
  },
  mounted () {
    this.$socket.connect() // 创建socket连接
    console.log('连接中')
    this.$socket.emit('test')  // 发送消息:对应后端test测试函数
    
    // 以下代码将后端发送回来的数据赋值给上面定义的折线图元素
    this.option_flow.series[0].data = this.data.flow.list_up
    this.option_flow.series[1].data = this.data.flow.list_dow
    this.option_flow.xAxis.data = this.data.flow.list_time

    this.initCharts() // 实例化折线图
    this.flowCharts.setOption(this.option_flow) // 将元素导入折线图
  }
}

</script>

注意，折线图要有多个坐标，所赋值的数据必须为列表（数组），即[1,2,3…,10]之类。

此时打开页面，在没有数据传入的情况下已经生成了折线图框架。

flask-socketio 实现数据发送

flask-socketio安装过程和使用方法此处不再赘述，请翻看之前的文章。
此处直接贴出Python代码。
以下代码所在文件：app.py

from flask_socketio import SocketIO

socketio = SocketIO()
socketio.init_app(app)

@socketio.on('test', namespace='api')   # 监听前端发回的包头 test ,应用命名空间为 api 
def test():  # 此处可添加变量，接收从前端发回来的信息
    print('触发test函数')
    socketio.emit('api', {'flow': {'list_up':[],
    							   'list_dow':[],
    							   'list_time':[]}}, namespace='api') # 此处 api 对应前端 sockets 的 api

if __name__ == '__main__':
    socketio.run(app, host='192.168.1.150', port='5000', debug=True) # 注意不再使用app.run

vue-echarts 图表动态展示

在vue中的echarts图表要实现动态展示，需要用到watch方法，直接贴出代码
以下代码所在文件：welcome.vue

<script>
export default {
  data () {
    return {
      data: {}, // 接收socket数据表
      option_flow: { // 此处为echarts折线图元素
        title: {
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['上行流量', '下行流量']
        },
        grid: {
          top: '10%',
          left: '3%',
          right: '4%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: 'value',
          name: 'kb/s'
        },
        series: [
          {
            name: '上行流量',
            type: 'line',
            smooth: true,
            data: []
          },
          {
            name: '下行流量',
            type: 'line',
            smooth: true,
            data: []
          }
        ]
      }
    }
  },
  
  methods: {
    initCharts () {  
      this.flowCharts = this.$echarts.init(this.$refs.flow_status) // 实例化折线图
    }
  },
  sockets: {
    connect: function () {
      console.log('连接成功')
    },
    api:function (data) {    // api为对应后端发出的信息接口，可自行更换
        this.data = data     // 获取后端发出的信息
      }
    }
  },
  
  watch: {  // 监听data变化
   data (data) {  // 当data发生变化，执行下列代码
     this.option_flow.series[0].data = data.flow.list_up
     this.option_flow.series[1].data = data.flow.list_dow
     this.option_flow.xAxis.data = data.flow.list_time
     this.flowCharts.setOption(this.option_flow)  // 将元素导入折线图
   	}
   }

  mounted () {
    this.$socket.connect()  // 创建socket连接
    console.log('连接中')
    this.$socket.emit('test')  // 发送消息:对应后端test测试函数

    this.initCharts()  // 实例化echarts图表
  }
}

</script>

配合后端循环发送数据，即可实现echarts动态图表。

最后结果如图

文章到这里就结束了，看完后，如对代码如果有什么疑问可以评论或私信，觉得有用的话还可以关注收藏一手 - ’ v ’ - 十分感谢。

循循而进，一往无前。