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); //开启信息窗口

});