esswisdom_wx/pages/healthy/index.js

// pages/setup/index.js
import * as echarts from '../../ec-canvas/echarts';

const api = require('../../api/index.js');
var fitness=''
Page({

  /**
   * 页面的初始数据
   */
  data: {
// 状态栏高度
statusBarHeight: wx.getStorageSync('statusBarHeight'),
// 导航栏高度
navBarHeight: wx.getStorageSync('navBarHeight'),
// 导航栏和状态栏高度
navStatusBarHeight: wx.getStorageSync('navStatusBarHeight'),
// 胶囊
menu:wx.getStorageSync('menu'),
fitness:{},
ec: {
  onInit: initChart
}
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
this.getuser()
  },
   getuser(){
    api.request(`/station/fitness/${wx.getStorageSync('station').id}`, 'POST')
    .then((res) => {
    // console.log(res);
    fitness = res.data
    this.setData({
      fitness:res.data
    })
    // console.log(this.data.fitness.temperature);
    })
    .catch((err) => {
      console.error('请求失败：', err);
      // 在这里处理请求失败的情况
    
      
    });
   },
   // 返回上一级
   onIconTap(){
    wx.navigateBack({
      delta: 1
    });
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})
function initChart(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);

  let colors = ['#35d964', '#d9bc39', '#da5660'],
     color;
     let subtext = ''
     if (fitness.alarmStatus==0) {
      subtext = '状态：' + '{a|离线}'
     } else if(fitness.alarmStatus==1) {
      subtext = '状态：' + '{b|在线}'
     }else{
      subtext = '状态：' + '{c|故障}'
     }
 let data = fitness.temperature; //数值大小
 let max = 75; //满刻度大小
 let title = {
  text: data + ' ' + '℃',
  subtext: subtext,
  x: 'center',
  y: 'center',
  textStyle: {
      color: '#222',
      fontSize: 30,
  },
  subtextStyle: {
      fontSize: 18,
      rich: {
        a: {
            color: '#FFA500',  // 设置 '正常' 的文本颜色为橙色 
            fontSize: 18
        },
        b: {
            color: '#15DB9B',  //设置 '离线' 的文本颜色为绿色
            fontSize: 18
        },
        c: {
            color: '#FF6347',  // 设置 '故障' 的文本颜色为红色
            fontSize: 18
        }
    }
  }
};

 if (data < 150) {
     color = colors[0];
 } else if (data > 150 && data < 250) {
     color = colors[1];
 } else if (data > 250 || data == 250) {
     color = colors[2];
 }
var option = {
     title: title,
     series: [
         {
            name: "",
            type: 'gauge',
            splitNumber: 40, //刻度数量
            min: 0,
            max: 100,
            radius: '80%', //图表尺寸
            center: ['50%', '50%'],
            startAngle: 90,
            endAngle: -269.9999,
            axisLine: {
                show: false,
                lineStyle: {
                    width: 0,
                    shadowBlur: 0,
                    color: [
                        [1, '#0dc2fe']
                    ]
                }
            },
            axisTick: {
                show: false,
                lineStyle: {
                    color: 'auto',
                    width: 2
                },
                length: 20,
                splitNumber: 5
            },
            splitLine: {
                show: true,
                length: 10,
                lineStyle: {
                    color: 'auto',
                }
            },
            axisLabel: {
                show: false
            },
            pointer: { //仪表盘指针
                show: 0,
            },
            detail: {
                show: 0,
            },
        },
         {
             type: "pie",
             center: ["50%", "50%"],
             radius: ["75%", "80%"],
             hoverAnimation: false,

             data: [
                 {
                     name: "",
                     value: data * 0.8,
                     itemStyle: {
                         borderColor: color,
                         borderRadius: 10,
                         borderWidth: 5,
                         color: color,
                     },
                     labelLine: {
                         show: false,
                         lineStyle: {
                             color: 'rgba(0,0,0,0)',
                             width: 2
                         }
                     }

                 },
                 { //画中间的图标
                     name: "",
                     value: 0,
                     label: {
                         position: 'inside',
                         backgroundColor: color,
                         borderRadius: 100,
                         borderWidth: 10,
                         borderColor: '#ffffff',
                         padding: 20,
                     },
                 },
                 {
                     name: "",
                     value: data * 0.2,
                     itemStyle: {
                         borderColor: color,
                         borderWidth: 5,
                         color: color,
                     },
                     labelLine: {
                         show: false,
                         lineStyle: {
                             color: 'rgba(0,0,0,0)',
                             width: 2
                         }
                     }

                 },
                 { //画剩余的刻度圆环
                     name: "",
                     value: max - data,
                     label: {
                         show: false
                     },
                     itemStyle: {
                         borderType: 'dashed',
                         borderRadius: 10,
                         borderColor: '#919192',
                         borderWidth: 0,
                         color: 'rgba(0,0,0,0)',
                     },
                     labelLine: {
                         show: true,
                         lineStyle: {
                             color: 'rgba(0,0,0,0)',
                             width: 2
                         }
                     },

                 }
             ]
         },
     ]
 };

  chart.setOption(option, true);

  return chart;
}