<div class="view_diagram" id="main1" style="height:100%;height:70%;" ref="chart"></div>
在vue下定义一个画图方法
drawTempMap(id){
//初始化echarts实例
// 基于准备好的dom,初始化echarts实例
var mychart = this.$refs.chart
if(mychart){
var mychart = echarts.init(document.getElementById('main1'));
mychart.setOption( {
title:{
text:'温度(℃)',
x:'center',
y:'top',
padding: 5,
textStyle:{
color:'rgba(255,255,255,.6)'
}
},
backgroundColor: '#2B4B6B',
// backgroundColor:'rgba(128, 128, 128, 0.1)',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter(params) {
// console.log(params)
const item = params[0]
return `温度: ${item.data} ℃`
},
},
grid: {
left: '2%',
top:'50px',
right: '5%',
bottom: '10px',
containLabel: true,
// y2:140
},
xAxis: [{
type: 'category',
data: this.tempDateList,//[]'2020-8-20 06:24:42','2020-8-20 06:29:45','2020-8-20 08:15:00','2020-8-20 08:16:14','2020-8-20 08:23:18'
axisLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,.1)",
width: 1,
type: "solid"
},
},
axisTick: {
show: true,
alignWithLabel: true
},
axisLabel: {
margin:'15',
interval: 0,
rotate:40,
show: true,
splitNumber: 15,
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: '13',
},
formatter:function(params){
var newParamsName = "";// 最终拼接成的字符串
var paramsNameNumber = params.length;// 实际标签的个数
var provideNumber = 10;// 每行能显示的字的个数
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话,需要显示几行,向上取整
/**
* 判断标签的个数是否大于规定的个数, 如果大于,则进行换行处理 如果不大于,即等于或小于,就返回原标签
*/
// 条件等同于rowNumber>1
if (paramsNameNumber > provideNumber) {
/** 循环每一行,p表示行 */
for (var p = 0; p < rowNumber; p++) {
var tempStr = "";// 表示每一次截取的字符串
var start = p * provideNumber;// 开始截取的位置
var end = start + provideNumber;// 结束截取的位置
// 此处特殊处理最后一行的索引值
if (p == rowNumber - 1) {
// 最后一次不换行
tempStr = params.substring(start, paramsNameNumber);
} else {
// 每一次拼接字符串并换行
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr;// 最终拼成的字符串
}
} else {
// 将旧标签的值赋给新标签
newParamsName = params;
}
//将最终的字符串返回
return newParamsName
}
},
}],
yAxis: [{
type: 'value',
// min:20,
// max:25,
axisLabel: {
//formatter: '{value} %'
show:true,
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: '14',
},
},
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,.1 )",
width: 1,
type: "solid"
},
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
}
}
}],
series: [{
type: 'line',
data: this.tempValueList,//[][2, 3, 3, 9, 15, 12, 6, 4, 6, 7, 4, 10],2, 3, 3, 9, 15
//barWidth:'30%', //柱子宽度
// barGap: 1, //柱子之间间距
itemStyle: {
normal: {
color:'#2f89cf',
opacity: 1,
barBorderRadius: 5,
}
}
}
]
})
}else{
console.log('mychart为空')
}
},
定义获取数据的方法
getTempData(id){
var _this = this
axios.get(`http://localhost:7585/aiotv_view/temperature/gettempall?id=`+id+`&shelfNo=`+this.shelveNum).then(res=>{
console.log(res.data);
//console.log(res.data[0]);
if(id == 0){
for (let i = 0; i <res.data.length ; i++) {
_this.tempDateList.push(res.data[i].updateTime);
_this.tempValueList.push(res.data[i].updateValue);
}
console.log(_this.tempDateList);
console.log(_this.tempValueList);
_this.drawTempMap(id)
var avg = 0
var sum = 0
// console.log(_this.valueList)
for(var j = 0;j<_this.tempValueList.length;j++){
sum += _this.tempValueList[j]
// console.log(sum)
}
_this.avgTemp = sum / _this.tempValueList.length
_this.avgTemp = _this.avgTemp.toFixed(2)
console.log(_this.avgTemp)
_this.id +=6 //由于我的请求是一次返回五条数据,下一次最新的一条数据需要加上6
}
else {
_this.tempDateList.shift()
_this.tempValueList.shift()
_this.tempDateList.push(res.data[0].updateTime);
_this.tempValueList.push(res.data[0].updateValue);
console.log(res.data[0])
_this.deviceNum = res.data[0].deviceId
_this.shelveNum = res.data[0].shelfNo
console.log(_this.tempDateList);
console.log(_this.tempValueList);
_this.drawTempMap(id)
var avg = 0
var sum = 0
// console.log(_this.valueList)
for(var j = 0;j<_this.tempValueList.length;j++){
sum += _this.tempValueList[j]
// console.log(sum)
}
_this.avgTemp = sum / _this.tempValueList.length
_this.avgTemp = _this.avgTemp.toFixed(2)
console.log(_this.avgTemp)
console.log('你好牛逼啊')
_this.id +=1
}
})
},
在creaetd下获取数据画出图
created(){
this.getTempData(this.id)
}
根据id值不断绘图,在mount下实现
mounted() {
var _this = this
setInterval(function(){
_this.getTempData(_this.id)
},10000)
},
由于是小白,肯定还有很多逻辑上漏洞或者是代码不严谨的方式,请求指正。