eCharts动态显示

<template>
  <div class="app-container">
    <div class="filter-container">
      <span style="font-size: 14px; color: #606266; margin-left: 45px"
        >1号机</span
      >
      <span style="font-size: 14px; color: #606266; margin-left: 140px"
        >2号机</span
      >
    </div>
    <el-progress
      type="circle"
       //定义format方便随时刷新显示实时数据
      :format="format"
       //这里的percentage是控制进度条所占整个圆圈百分比
      :percentage="percentage"
      style="margin-left: 0px"
    ></el-progress>
    <el-progress
      type="circle"
      :percentage="18.6"
      :format="format2"
      style="margin-left: 45px"
    ></el-progress>
    <div class="proCharts" ref="charts"></div>
  </div>
</template>

<style>
.el-table .success-row {
  background: #d7d7e2;
}
</style>
<script>
import request from "@/utils/request";
import { getToken } from "@/utils/auth";
import Cookies from "js-cookie";
import echarts from "echarts"; //npm install echarts@4.9.0

export default {
  name: "TempTable",
  data() {
    return {
      temp: [],
      tableData: [],
      alllist: [],
      time: null,
      percentage: "",
      timer: undefined,
      listLoading: false,
      list: { Id: "1", Type: "Temperature" },
      url: process.env.VUE_APP_BASE_API,
      roles: Cookies.get("ROLES"),

      option: {
        color: ["rgb(8,252,7)", "rgb(255,168,0)"],
        title: {
          text: "",
        },
        tooltip: {
          //提示框
          trigger: "axis",
        },
        legend: {
          //图例的类型
          icon: "roundRect", //图例icon图标
          data: [
            {
              name: "1号机",
              textStyle: {
                color: "#fff",
              },
            },
            {
              name: "2号机",
              textStyle: {
                color: "#fff",
              },
            },
          ],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "17%",
          containLabel: true, //grid区域是否包含坐标轴的刻度标签
        },
        xAxis: {
          type: "category", //坐标轴类型。
          boundaryGap: false, //坐标轴两边留白策略
          data: [],
          axisLabel: {
            //坐标轴刻度标签的相关设置
            interval: 0,
            textStyle: {
              color: "#fff",
              fontSize: 10,
            },
          },
          axisLine: {
            //坐标轴轴线相关设置
            show: true,
            lineStyle: {
              color: "rgb(2,121,253)",
            },
          },
          axisTick: {
            //坐标轴刻度相关设置。
            show: false,
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            //x轴的坐标文字
            show: true,
            textStyle: {
              color: "#fff", //文字的颜色
            },
          },
          max: 40, //最大值100
          axisLine: {
            //坐标轴轴线相关设置
            show: true,
            lineStyle: {
              color: "rgb(2,121,253)",
            },
          },
          axisTick: {
            //坐标轴刻度相关设置。
            show: false,
          },
          splitLine: {
            //坐标在grid区域的分割线
            lineStyle: {
              //设置分割线的样式(图表横线颜色)
              color: ["#153a8a"],
            },
          },
        },
        series: [
          {
            name: "1号机",
            type: "line",
            data: [],
            lineStyle: {
              color: "rgb(8,252,7)", //线的颜色
            },
          },
          {
            name: "2号机",
            type: "line",
            data: [
              10.0, 18.6, 22.3, 34.9, 23.8, 19.6, 10.0, 18.6, 22.3, 34.9, 15.0,
              13.2, 15.6, 23.8, 19.6, 10.0, 18.6, 9.6, 15.6, 23.8, 19.6, 23.8,
              32.1, 15.0,
            ],
            lineStyle: {
              color: "rgb(255,168,0)", //线的颜色
            },
          },
        ],
      },
    };
  },
  methods: {
    getTemp() {
      var self = this;
      request({
        url: self.url + "/api/Temp/GetTemp",
        method: "get",
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        params: self.list,
      }).then((response) => {
        self.tableData = response;
        self.alllist = self.tableData.reverse();
        //这是重新设置xAxis.data 是因为不设置会出现插入重复坐标数据情况，因为用的是push
        self.option.xAxis.data = [];
        for (var i = 0; i < self.alllist.length; i++) {
          //x轴数据
          var x = self.alllist[i].time;
          //传来的时间为年-月-日 时-分-秒-微秒，故选取11位之后的数据作为坐标轴
          //  （此处有个空格）↗  
          x = x.slice(11);
          //将时间插入到x轴数据
          self.option.xAxis.data.push(x);
          //对应时刻的温度数值
          var preValue = self.alllist[i].value;
          self.option.series[0].data.push(preValue);
        }
      });
      self.mycharts();
      //当前数据
      self.percentage = self.alllist[0].value;
      //调用format更新实时温度
      self.format(self.percentage);
    },
    /***/
    mycharts() {
      let myChart = echarts.init(this.$refs.charts, "charts");
      myChart.setOption(this.option);
      //图表自适应
      window.addEventListener("resize", function () {
        myChart.resize(); // myChart 是实例对象
      });
    },
    /** */
    format(percentage) {
      return percentage === null ? "无数据" : `${percentage}℃`;
    },
    format2(percentage2) {
      percentage2 = 18.6;
      return percentage2 === null ? "无数据" : `${percentage2}℃`;
    },
    //解除定时器，界面切出时取消定时器定时执行功能
    beforeDestroy() {
      clearInterval(this.timer);
      this.timer = null;
    },
  },
  //调用
  mounted() {
    this.mycharts();
    //定时器，每隔5s调用一次
    this.timer = setInterval(() => {
    //0为调用的getTemp方法时间间隔，注意区分定时器执行间隔
      setTimeout(this.getTemp, 0);
    }, 5000);
  },
};
</script>
<style scoped>
.proCharts {
  width: 100%;
  height: 400px;
  background: rgb(6, 6, 6);
}
</style>

1号机为动态绑定数组，2号机为静态数据

借用的element ui 的percentage显示实时数据，因为percentage默认为进度条，故需要： ${percentage}℃  把原有的%替换为目标数据+度数

效果图

 因为测试数据时第一个数据为41.2，y轴只设置到了40，所以没显示完全，只需更改y轴数值设置