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

本文链接：https://blog.csdn.net/yueqin0512/article/details/111715298

该博客介绍了如何在Vue项目中集成Echarts，包括获取和引入Echarts库，创建图表组件，以及通过ASP.NET Core3.1 SignalR实现实时的前后端数据传输。在SignalR部分，详细讲解了后端Hub的创建以及前端的配置和数据交互过程。

摘要由CSDN通过智能技术生成

文章目录

在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>