优雅的制作一个温湿度计图表

1.有的和想要的

有数据：有温度、有湿度
想要的：显示在页面某个位置

2.期望的优雅

期望有一个方法，只需给定温度、湿度与位置，直接生成温湿度计图表。

3.来封装一个

3.1 先睹风采

使用以下方法即可完成图表显示。

Gauge.Hygrothermograph('gauge1', 28, 60);

效果如下：

温湿度计

3.2 使用方式

引入echart 和封装的 js ，即可使用 Gauge.Hygrothermograph 方法。

3.3 完整的 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