1.有的和想要的
有數(shù)據(jù)：有溫度、有濕度
想要的：顯示在頁(yè)面某個(gè)位置
2.期望的優(yōu)雅
期望有一個(gè)方法撩银，只需給定溫度给涕、濕度與位置，直接生成溫濕度計(jì)圖表额获。
3.來(lái)封裝一個(gè)
3.1 先睹風(fēng)采
使用以下方法即可完成圖表顯示够庙。
Gauge.Hygrothermograph('gauge1', 28, 60);
效果如下：
溫濕度計(jì)
3.2 使用方式
引入echart 和封裝的 js ，即可使用 Gauge.Hygrothermograph 方法抄邀。
<script src="https://cdn.bootcss.com/echarts/4.2.1/echarts.min.js"></script>
<script src="http://www.timeddd.com/Demo/gauge.js"></script>
3.3 完整的 html 如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>儀表盤溫濕度示例</title>
<style>
.gauge {
width: 230px;
height: 230px;
border: solid 1px gray;
padding: 5px;
}
</style>
</head>
<body>
<div id="gauge1" class="gauge"></div>
<script src="https://cdn.bootcss.com/echarts/4.2.1/echarts.min.js"></script>
<script src="http://www.timeddd.com/Demo/gauge.js"></script>
<script>
Gauge.Hygrothermograph('gauge1', 28, 60);
</script>
</body>
</html>
3.3 封裝思路
利用 echart 強(qiáng)大的圖表功能耘眨，設(shè)置好適合溫濕度呈現(xiàn)的 option，將數(shù)據(jù)部分參數(shù)化境肾。為了支持更新時(shí)只修改 option 中的數(shù)據(jù)部分剔难，定義一個(gè)列表來(lái)存儲(chǔ)元素渲染過后的對(duì)象。
var Gauge = {};
Gauge.ChartList = {};
具體方法定義如下（option屬性部分省略）：
/**
* 生成溫濕計(jì)圖表
*
*@param{string}elementId 顯示溫濕計(jì)表的HTML元素id
*@param{number}temperature 溫度
*@param{number}humidity 濕度
*@return
*/
Gauge.Hygrothermograph = function(elementId, temperature, humidity){
var ele = document.getElementById(elementId);
var myChart = this.ChartList[elementId];
if(!myChart){
myChart = echarts.init(ele);
this.ChartList[elementId] = myChart;
}else{
var option = myChart.getOption();
option.series[0].data[0].value = humidity;
option.series[1].data[0].value = temperature;
myChart.setOption(option, true);
return;
}
var option = {
// .....
};
myChart.setOption(option, true);
}
完整代碼請(qǐng)直接參數(shù)引用地址：
http://www.timeddd.com/Demo/gauge.js
