· web viewvoid mc_arc(float *position, float *target, float *offset, float radius, float...
Post on 25-Dec-2019
65 Views
Preview:
TRANSCRIPT
class="left"
data-type="radial-gauge"
data-width="200"
data-height="200"
data-units="气体浓度"
data-title="false"
data-value="{{lastest_record.value}}"
data-min-value="0"
data-max-value="220"
data-major-ticks="0,20,40,60,80,100,120,140,160,180,200,220"
data-minor-ticks="2"
data-stroke-ticks="false"
data-highlights='[
{ "from": 0, "to": 50, "color": "rgba(0,255,0,.15)" },
{ "from": 50, "to": 100, "color": "rgba(255,255,0,.15)" },
{ "from": 100, "to": 150, "color": "rgba(255,30,0,.25)" },
{ "from": 150, "to": 200, "color": "rgba(255,0,225,.25)" },
{ "from": 200, "to": 220, "color": "rgba(0,0,255,.25)" }
]'
data-color-plate="#222"
data-color-major-ticks="#f5f5f5"
data-color-minor-ticks="#ddd"
data-color-title="#fff"
data-color-units="#ccc"
data-color-numbers="#eee"
data-color-needle-start="rgba(240, 128, 128, 1)"
data-color-needle-end="rgba(255, 160, 122, .9)"
data-value-box="true"
data-animation-rule="bounce"
data-animation-duration="500"
data-font-value="Led"
data-animated-value="true"
>
class="right"
data-type="linear-gauge"
data-width="100"
data-height="300"
data-border-radius="20"
data-borders="0"
data-bar-stroke-width="20"
data-minor-ticks="10"
data-major-ticks="0,10,20,30,40,50,60,70,80,90,100"
data-value="{{ lastest_record.tem }}"
data-units="°C"
data-color-value-box-shadow="false"
>
body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#allmap{width:100%;height:200px;}
#container1{height: 400px;width:70%;}
#container2{height: 400px;width:70%;margin-left:100px}
#canvas1 {display:inline;margin-left: 100px;margin-top: 100px}
#canvas2 {display:inline;margin-left: 100px;margin-top: 50px;}
.wrap {
display: -webkit-box;
}
.left,
.right {
padding: 10px;
}
var dom = document.getElementById("container1");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
xAxis: {
type: 'category',
data:{%autoescape off%}{{ uploadtimelist }}{%endautoescape%},
},
yAxis: {
type: 'value'
},
series: [{
data: {%autoescape off%}{{ smokelist }}{%endautoescape%},
type: 'line',
smooth: true
}]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
var dom = document.getElementById("container2");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
xAxis: {
type: 'category',
data:{%autoescape off%}{{ uploadtimelist }}{%endautoescape%},
},
yAxis: {
type: 'value'
},
series: [{
data: {%autoescape off%}{{ temlist }}{%endautoescape%},
type: 'line',
smooth: true
}]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point({{ lastest_record.longitude }},{{ lastest_record.latitude }});
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
map.centerAndZoom(point, 15);
var opts = {
width : 400, // 信息窗口宽度
height: 50, // 信息窗口高度
title : "设备位置" , // 信息窗口标题
enableMessage:true,//设置允许信息窗发送短息
}
var infoWindow = new BMap.InfoWindow("经纬度({{ lastest_record.longitude }},{{ lastest_record.latitude }})", opts);
// 创建信息窗口对象
marker.addEventListener("click", function(){
map.openInfoWindow(infoWindow,point); //开启信息窗口
});
top related