<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轴数值设置