自制机械温湿度计，优雅的制作一个温湿度计图表
自制机械温湿度计，优雅的制作一个温湿度计图表Gauge.Hygrothermograph('gauge1' 28 60); 效果如下：使用以下方法即可完成图表显示。期望有一个方法，只需给定温度、湿度与位置，直接生成温湿度计图表。3.来封装一个3.1 先睹风采
1.有的和想要的
有数据：有温度、有湿度
想要的：显示在页面某个位置
2.期望的优雅
期望有一个方法，只需给定温度、湿度与位置，直接生成温湿度计图表。
3.来封装一个
3.1 先睹风采
使用以下方法即可完成图表显示。
Gauge.Hygrothermograph('gauge1' 28 60);
效果如下：
3.2 使用方式
引入echart 和封装的 js ，即可使用 Gauge.Hygrothermograph 方法。
<script src="https://img.aigexing.comhttps://cdn.bootcss.com/echarts/4.2.1/echarts.min.js"></script> <script src="https://img.aigexing.comhttp://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://img.aigexing.comhttps://cdn.bootcss.com/echarts/4.2.1/echarts.min.js"></script> <script src="https://img.aigexing.comhttp://www.timeddd.com/Demo/gauge.js"></script> <script> Gauge.Hygrothermograph('gauge1' 28 60); </script> </body> </html>
3.3 封装思路
利用 echart 强大的图表功能，设置好适合温湿度呈现的 option，将数据部分参数化。为了支持更新时只修改 option 中的数据部分，定义一个列表来存储元素渲染过后的对象。
var Gauge = {}; Gauge.ChartList = {};
具体方法定义如下（option属性部分省略）：
/** * 生成温湿计图表 * *@param{string}elementId 显示温湿计表的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); }
完整代码请直接参数引用地址：
http://www.timeddd.com/Demo/gauge.js
