React结合ECharts实现温度计组件

需求分析

项目需要在监控主页动态监视房间内的温度和湿度，业主希望使用不同的颜色来区分不同的温湿度范围，其中温度范围-20℃ ~ 50℃，湿度范围0RH% ~ 100RH%。

实现效果

最终效果如下图所示：

其中温度范围渐变色从蓝色到红色，湿度范围渐变色从绿色到蓝色

npm版本和参考demo

项目采用Ant Design Pro V 2.0开发，所用的package版本如下：

npm版本如下：

    "antd": "^3.26.18",
    "echarts": "^4.8.0",
    "echarts-for-react": "^2.0.16",

参考demo:温度计ECharts

实现步骤

由于demo给的温度计Option范围和刻度和需求不符合，经过一番研究做了改进，下面给出温度计的实现Option。

温度计

其中最重要的是series[0].data和series[6].data的填充，前者对应温度计条状的高度，后者对应温度计刻度的划分和高度。

 var TP_value = 50;
 var kd = [];
 var Gradient = [];
 var leftColor = '';
 var showValue = '';
 var boxPosition = [65, 0];
 var TP_txt = ''
 // 刻度使用柱状图模拟，短设置1，长的设置3；构造一个数据
     for (let i = 0, len = 80; i <= len; i += 1) {
   
      if (i < 10) {
   
        kd.push('');
      } else if ((i - 10) % 10 === 0) {
   
        kd.push('-3');
      } else {
   
        kd.push('-1');
      }
    }
    
 //中间线的渐变色和文本内容
 if (TP_value > 20) {
   
     TP_txt = '温度偏高';
     Gradient.push({
   
         offset: 0,
         color: '#93FE94'
     }, {
   
         offset: 0.5,
         color: '#E4D225'
     }, {
   
         offset: 1,
         color: '#E01F28'
     })
 } else if (TP_value > -20) {
   
     TP_txt = '温度正常';
     Gradient.push({
   
         offset: 0,
         color: '#93FE94'
     }, {
   
         offset: 1,
         color: '#E4D225'
     })
 } else {
   
     TP_txt = '温度偏低';
     Gradient.push({
   
         offset: 1,
         color: '#93FE94'
     })
 }
 if (TP_value > 62) {
   
     showValue = 62
 } else {
   
     if (TP_value < -60) {
   
         showValue = -60
     } else {
   
         showValue = TP_value
     }
 }
 if (TP_value < -10) {
   
     boxPosition = [65, -120];
 }
 leftColor = Gradient[Gradient.length - 1].color;
 // 因为柱状初始化为0，温度存在负值，所以加上负值60和空出距离10
 var option = {
   
     backgroundColor: '#0C2F6F',
     title: {
   
         text: '温度计',
         show: false
     },
     yAxis: [{
   
         show: false,
         data: [],
         min: 0,
         max: 90,
         axisLine: {
   
             show: false
         }
     }, {
   
         show: false,
         min: 0,
         max: 50,
     }, {
   
         type: 'category',
        //  data: ['', '', '', '', '', '', '', '', '', '', '°C'],
         position: 'left',
         offset: -80,
         axisLabel: {
   
             fontSize: 10,
             color: 'white'
         },
         axisLine: {
   
             show: false
         },
         axisTick: {