封装生成温度计函数

js/showHardware.js

@@ -129,108 +129,118 @@ $(function () {
   }
 
 
-
-  //记载温度计
-  var chartDom = document.getElementById('temperature');
-  var myChart = echarts.init(chartDom);
-  
-  option = {
-    series: [
-    {
-      name: "Indicator",
-      type: "gauge",
-      data: [{
-        value: 50,
-        name:'温度',
-        itemStyle:{
-          color: "#23EACF",
-          fontSize:14
+  let loadTemperature = function (params={}) {
+    let {id="temperature",val} = params
+       //加载温度计
+    var chartDom = document.getElementById(id);
+    var myChart = echarts.init(chartDom);
+    
+    
+    let option = {
+      series: [
+      {
+        name: "Indicator",
+        type: "gauge",
+        data: [{
+          value: val,
+          name:'温度',
+          itemStyle:{
+            color: "#23EACF",
+            fontSize:14
+          },
+          detail: {
+            formatter: "{value}℃",
+            color: "#23EACF",
+            fontSize:24,
+            offsetCenter: ['0%', '28%'],
+          },
+          title: {
+            offsetCenter: ['0%', '80%'],
+            color: "#fff",
+            fontSize:20
+          }
+        }],
+        radius: "100%",
+        startAngle: 240,
+        endAngle: -60,
+        axisLine: {
+          show: false
         },
-        detail: {
-          formatter: "{value}℃",
-          color: "#23EACF",
-          fontSize:24,
-          offsetCenter: ['0%', '28%'],
+        axisTick:{
+          show: true,
+          length:12,
+          lineStyle:{
+            color:'#339ED3'
+          }
         },
-        title: {
-          offsetCenter: ['0%', '80%'],
-          color: "#fff",
-          fontSize:20
-        }
-      }],
-      radius: "100%",
-      startAngle: 240,
-      endAngle: -60,
-      axisLine: {
-        show: false
-      },
-      axisTick:{
-        show: true,
-        length:12,
-        lineStyle:{
-          color:'#339ED3'
-        }
-      },
-      splitLine: {
-        show: true,
-        length:15,
-        lineStyle:{
-          color: "rgba(255, 255, 255, 1)",
-        }
-      },
-      axisLabel: {
-        color: "#23EACF"
-      },
-      pointer: {
-        show: true,
-        itemStyle:{
+        splitLine: {
+          show: true,
+          length:15,
+          lineStyle:{
+            color: "rgba(255, 255, 255, 1)",
+          }
+        },
+        axisLabel: {
           color: "#23EACF"
         },
-        width: 4.5,
-        length: "46%"
-      }
-    },
-    {
-      name: "Indicator1",
-      type: "gauge",
-      data: [{
-        value: 50,
-        detail:{
-          show:false
-        }
-      }],
-      radius: "50%",
-      startAngle: 240,
-      endAngle: -60,
-      axisLine: {
-        show: true,
-        lineStyle:{
-          width:5
+        pointer: {
+          show: true,
+          itemStyle:{
+            color: "#23EACF"
+          },
+          width: 4.5,
+          length: "46%"
         }
       },
-      progress: {
-        show: true,
-        width:5,
-        itemStyle:{
-          color: "#23EACF"
+      {
+        name: "Indicator1",
+        type: "gauge",
+        data: [{
+          value: val,
+          detail:{
+            show:false
+          }
+        }],
+        radius: "50%",
+        startAngle: 240,
+        endAngle: -60,
+        axisLine: {
+          show: true,
+          lineStyle:{
+            width:5
+          }
+        },
+        progress: {
+          show: true,
+          width:5,
+          itemStyle:{
+            color: "#23EACF"
+          }
+        },
+        axisTick:{
+          show: false,
+        },
+        splitLine: {
+          show: false,
+        },
+        axisLabel: {
+          show: false,
+        },
+        pointer: {
+          show: false,
         }
-      },
-      axisTick:{
-        show: false,
-      },
-      splitLine: {
-        show: false,
-      },
-      axisLabel: {
-        show: false,
-      },
-      pointer: {
-        show: false,
       }
+    ]
     }
-  ]
+    option && myChart.setOption(option, true);
   }
 
+  loadTemperature({
+    id:"temperature",//dom Id
+    val:50 //度数
+  })
 
-option && myChart.setOption(option, true);
 });
+
+
+