//设置全局变量
var count = 0;
// 动态引入ECharts.js
THING.Utils.dynamicLoad(['https://www.thingjs.com/guide/lib/echarts.min.js'], function () {
/*
*var app = new THING.App()一直作为ThingJS的启动来使用的，其中有url等信息需要填写
*url则是制作好的场景上传到ThingJS网站后的链接
*/
var app = new THING.App({
url: 'https://www.thingjs.com/static/models/storehouse', // 场景地址
"skyBox": "BlueSky"
});
/**
data : humi : "54%" id :"1606" power :"8kWh" temper :"16℃"
*/
app.on('load', function () {
createChart();
var car = app.query('.Thing');
updateData(car[0]);
})
/**
* 创建图表
*/
function createChart() {
// 背景 div
var bottomBackground = document.createElement('div');
bottomBackground.id = 'myId';
// 标题 div
var bottomFont = document.createElement('div');
// 图表 div
var bottomDom = document.createElement('div');
// 设置背景样式、右下角对齐
var backgroundStyle = 'bottom:0px; position: absolute;right:0px;height:400px;width:600px;background: rgbargba(40, 119, 98, 0.39);';
// 标题字体样式
var fontStyle = 'position: absolute;top:0px;right:0px;color:rgba(113,252,244,1);height:78px;width:600px;line-height: 45px;text-align: center;top: 20px;';
// 图表DIV样式
var chartsStyle = 'position: absolute;top:80px;right:0px;width:600px;height:300px;';
// 设置样式
bottomBackground.setAttribute('style', backgroundStyle);
bottomFont.setAttribute('style', fontStyle);
bottomDom.setAttribute('style', chartsStyle);
// 底部标题文字
bottomFont.innerHTML = '车位温度监控';
// echarts 初始化
var bottomCharts = window.echarts.init(bottomDom);
// 数据部分
option = {
title: {
text: '气候表'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['温度', '湿度']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['6', '7', '8']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '温度',
type: 'line',
stack: '总量',
areaStyle: {},
data: [12, 32, 10]
},
{
name: '湿度',
type: 'line',
stack: '总量',
areaStyle: {},
data: [44, 21, 18]
}
]
};
bottomCharts.setOption(option);
bottomBackground.appendChild(bottomFont);
bottomBackground.appendChild(bottomDom);
// 添加到app dom下
app.domElement.appendChild(bottomBackground);
}
})
/**
* 使用ajax更新数据
*/
function updateData(obj) {
// 如果网站是 https 接口则对应 https 请求
// 如果网站是 http 接口则对应 http 请求即可
$.ajax({
type: "get",
url: "https://3dmmd.cn/getMonitorDataById",
data: { "id": obj.id },
dataType: "json", // 返回的数据类型 json
success: function (d) {
console.log('第一次：' + option.xAxis[0].data.length);
changeHumidity(d);
changeTemperature(d);
addSubscript(d);
changeEcharts();
// 每隔4s 请求一次数据
var timer = setTimeout(function () {
//当时间数组下标
if (option.xAxis[0].data[option.xAxis[0].data.length - 1] == 24) {
clearTimeout(timer);
return;
}
updateData(obj);
}, 4000)
}
});
/**
* 获取到温度变化值并且传入到echarts图表中去，同时修改图表展示。
*/
function changeTemperature(d) {
//获取到返回的字符串中的temper
var temper = d.data.temper;
//使用分割字符串方法获取到温度的数字
var newtemper = temper.substr(0, temper.indexOf("℃"))
//新建一个数组，给option数据中对应的数组添加变化后的温度
var array = [];
array = option.series[0].data;
array.push(parseInt(newtemper));
option.series[0].data = array;
}
/**
* 获取到湿度变化值并且传入到echarts中去，同时修改图表展示
*/
function changeHumidity(d) {
//获取到返回的字符串中的temper
var humi = d.data.humi;
//使用分割字符串方法获取到温度的数字
var newHumi = humi.substr(0, humi.indexOf("%"))
//新建一个数组，给option数据中对应的数组添加变化后的温度
var array = [];
array = option.series[1].data;
array.push(parseInt(newHumi));
option.series[1].data = array;
//初始化
}
/**
* 添加图表下标
*/
function addSubscript(d) {
var timerTemp = [];
timerTemp = option.xAxis[0].data;
timerTemp.push(8 + ++count);
//横坐标递增
option.xAxis[0].data = timerTemp
}
function changeEcharts() {
//初始化
var mychart = window.echarts.init(document.getElementById('myId'));
mychart.setOption(option);
}
}
2436
2
