vue lic Echarts的插入及基于ASP.NET Core3.1 signalR实现前后端分离式数据传输

在vue中插入Echarts

1. 获取echarts

用图形化方式创建的脚手架项目，在依赖中添加echarts 4.9.0
或者 通过npm 获取echarts：npm install echarts@4.9.0 --save
安装完后，在项目mode_modules文件夹下，会多出一个文件echarts

2. 在vue中项目中引入echarts

在main.js中添加下面两行代码

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

注：import echarts from 'echarts'引入echarts后，不能全局使用echarts,
所以通过Vue.prototype 将echarts保存为全局变量

3. 新建BarChart.vue文件

(1) 在template中添加一个存放echarts 的div容器
(2) 添加myEcharts()方法，将官方文档中script内容复制到myEcharts()中
(3) 修改echarts.init()为this.$echarts.init() [因为上面第二步，将echarts保存到全局变量$echarts中
(4) 在mounted中调用myEcharts()方法

<template>
  <div class="bar-chart">
    {{"barData:" + barData}}
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
export default {
  name: 'BarChart',
  methods: {
    showBarChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('main'))

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts 入门示例',
        },
        tooltip: {},
        legend: {
          data: ['销量'],
        },
        xAxis: {
          data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          },
        ],
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
  },

  // 在实例创建完成后立即被调用
  //使用ES6写法。mounted() { }等同mounted:function() { }
  mounted() {
     this.showBarChart()
  }
</script>

4. 在app.vue中，引入子组件，

<template>
  <div id="app">
    <bar-chart></bar-chart>
  </div>
</template>

<script>
import BarChart from './components/ms-echarts/BarChart'

export default {
  name: 'App',
  components: {
    BarChart,
  }
}
</script>

5. 运行，就能得到一个图表

基于ASP.NET Core3.1 signalR实现前后端分离

参考ASP.NET Core3.1 SignalR框架搭建

后端代码：

在Hubs文件夹中，使用以下代码创建ExchangeHub.cs文件

using Microsoft.AspNetCore.SignalR;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace VueSignalR.Hubs
{
    public class ExchangeHub : Hub
    {
        public async Task SendMessage()
        {
            Random random = new Random();
            await Clients.All.SendAsync("ReceiveMessage", DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"));
            int[] barData = new int[] { random.Next(1, 10), random.Next(1, 10), random.Next(1, 10), random.Next(1, 10), random.Next(1, 10) };
            string[] barAxis = new string[] {"111", "222", "333", "444", "555" };
            await Clients.All.SendAsync("ReceiveBarData", barData, barAxis);
        }
    }
}

前端配置

1.用图形化方式创建的脚手架项目中，在依赖中添加添加@microsoft/signalr

或者在终端运行：npm install @microsoft/signalr

2. 用以下代码创建hub.js

// 从node_modules包内引入js, 并使用HubConnectionBuilder类
import {HubConnectionBuilder} from '@microsoft/signalr/dist/browser/signalr.js'

// 默认导出vue
export default{
  // 编辑vue插件, 前面一个参数是固定，后面可以添加多个参数，此处这样写的目的是传入连接字符串
  install (Vue, connection){
    //这里new一个Vue对象的目的就是为了添加方法或 property可以全局访问
    const hub = new Vue()
   // 添加**全局property**, Vue.prototype后面加的东西就是全局的，在注册后就可以直接全局使用了
    Vue.prototype.hub = hub

        // 实例化并配置signalr
        const connectionBuilder = new HubConnectionBuilder()
            .withUrl(connection)
            .build()

        // 连接并检测连接状态
        connectionBuilder.start().then(function() {
            hub.$emit('connectionState', true)
        }).catch(function(){
            hub.$emit('connectionState', false)
        })

        hub.handler = (sender, e) => {
            connectionBuilder.on(sender, (message) => {
                // 此处使用的是vue自定义事件并传递一个参数
                hub.$emit(e, message)
            })
        }

        hub.handler2 = (sender, e) => {
            connectionBuilder.on(sender, (message1, message2) => {
                // 此处使用的是vue自定义事件并传递2个参数
                hub.$emit(e, message1, message2)
            })
        }

        // 添加全局方法，此处是请求函数
        hub.send = (name) => {
            connectionBuilder.invoke(name).catch(function(err) {
                return console.error(err.toString())
            })
        }
  }
}

3. 配置BarChart.vue

（1）添加插值表达式{{"barData:" + barData}}以便实时监测数据
（2）props: ["barData", "barAxis"],父组件app.vue接收子组件BarChart.vue的数据
（3）引用hub.js中全局的send方法,连接后端的方法SendMessage，接收后端的数据
（4）将图表里的数据也改成绑定的props中的数据this.barAxis，this.barData
（5）在mounted中，调用hub.js中的handler2函数，接收到两个数据
（6）数据不应该在子组件里面修改，再次将数据传递给父组件this.$emit("sendBarMessage", msg1, msg2)
（7）接收到父组件的值，若数据不为空，则刷新图表
（8）created创建定时器， beforeDestroy清空定时器

<template>
  <div class="bar-chart">
    {{"barData:" + barData}}
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
export default {
  name: 'BarChart',
  props: ["barData", "barAxis"],
  methods: {
    send() {
      this.hub.send("SendMessage")
    },
    showBarChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('main'))

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts 入门示例',
        },
        tooltip: {},
        legend: {
          data: ['销量'],
        },
        xAxis: {
          data: this.barAxis
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: this.barData
          },
        ],
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
  },
  
  // 在实例创建完成后立即被调用
  mounted() {
    this.hub.handler2('ReceiveBarData', 'receive-my-data')
    this.hub.$on('receive-my-data', (msg1, msg2) => {
      this.$emit("sendBarMessage", msg1, msg2)
    })
    this.hub.$on('updateData', () => {
      if(this.barData != undefined && this.barAxis != undefined){
        this.showBarChart()
      }
    })
  },
  created () {
    this.timer = setInterval(() => {
      setTimeout(this.send, 0)
    }, 1000)
  },
  beforeDestroy(){
   clearInterval(this.timer);        
   this.timer = null;
  }
}
</script>

4. 配置父组件app.vue

（1）属性绑定，绑定两个数据
（2）接收子组件传过来的数据，@sendBarMessage="getBarData"
（3）data中数据初始化
（3）添加方法，getBarData将数据绑定，并且将数据传给子组件

<template>
  <div id="app">
    <bar-chart :barData="barData" :barAxis="barAxis" @sendBarMessage="getBarData"></bar-chart>
  </div>
</template>

<script>
import BarChart from './components/ms-echarts/BarChart'

export default {
  name: 'App',
  data () {
    return {
      barData: null,
      barAxis: null,
    }
  },
  components: {
    BarChart,
  },
  methods: {
    getBarData(data, axis){
      this.barData = data
      this.barAxis = axis
      this.hub.$emit('updateData')
    }
  },
}
</script>

效果展示，每一秒更新一次数据