欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue中使用Echarts仪表盘展示实时数据

程序员文章站 2022-05-02 13:46:02
在vue中echarts仪表盘实时数据彩笔一枚,简单记录一下。业务场景:通过websocket实时推送数据,将数据渲染到仪表盘中。第一步:基于准备好的dom,初始化echarts仪表盘实例。第二步:我是通过父子组件传值把数据接收过来,在data中定义upPressure参数,并将接收来的devicePressure参数赋值给它,便于后面将值传入到echarts中。父组件中

在vue中echarts仪表盘实时数据
彩笔一枚,简单记录一下。
业务场景:通过websocket实时推送数据,将数据渲染到仪表盘中。

第一步:
基于准备好的dom,初始化echarts仪表盘实例。

第二步:
我是通过父子组件传值把数据接收过来,在data中定义upPressure参数,并将接收来的devicePressure参数赋值给它,便于后面将值传入到echarts中。

父组件中
 <div class="chart" shadow="always">
    <objEcharts :devicePressure="pressure"></objEcharts>
  </div>

子组件中
export default {
  props: {
    devicePressure: { type: String, require: true },
  },
  data() {
    return {
      upPressure: this.devicePressure,
    };
  },

第三步:
因为是实时数据,就需要在watch中监听数据变化,实时更新。
注:这里我只监听一个参数变化,没有使用deep: true。

 watch: {
  	//监听devicePressure的数据变化。
    devicePressure(newData, oldData) {
    //把更新后的数据newData,赋值给需要传入echarts中的参数。
      this.upPressure = newData;
    //一定要调用echarts实例,要不然echarts不实时展示。
      this.drawLine();
    },
  },

第四步:
数据处理完之后,就要把它展示到仪表盘中了,所以直接找到echarts中需要数据的地方就好了。
介于仪表盘样式,可结合官方文档自定义。

export default {
  props: {
    devicePressure: { type: String, require: true },
  },
  data() {
    return {
      upPressure: this.devicePressure,
    };
  },
  mounted() {
    this.drawLine();
  },
  watch: {
   	devicePressure(newData, oldData) {
      this.upPressure = newData;
      this.drawLine();
    },
  },
methods: {
    drawLine() {
      // 基于准备好的dom,初始化echarts实例
      let visualOneChart = this.$echarts.init(document.getElementById("visualOneChart"));
      // 绘制图表
      visualOneChart.setOption({
        tooltip: {
          formatter: "{a} <br/>{b} : {c}Pa",
        },
        series: [
          {
            name: "压力值",
            type: "gauge",
            clockwise: true,
            detail: {
              formatter: this.upPressure,
              textStyle: {
                fontSize: 14,
              },
            },
            data: [{ value: this.upPressure, name: "压力值" }],
            radius: "90%",
            axisLabel: {// 刻度标签。
              show: true,
              distance: -5,
              color: "black", 
              fontSize: 10, 
              formatter: "{value}", 
            },
            axisLine: {// 仪表盘轴线(轮廓线)相关配置。
              show: true, 
              lineStyle: {// 仪表盘轴线样式。
                opacity: 1, 
                width: 15, 
                shadowBlur: 10, 
              },
            },
            pointer: { // 仪表盘指针。
              show: true,
              length: "70%", 
              width: 4, 
            },
          },
        ],
      });
    },
  },
}

Vue中使用Echarts仪表盘展示实时数据

本文地址:https://blog.csdn.net/One_item/article/details/109383373