温度监控ECharts Gallery

20:11:45图表已生成
代码
var dataValArray = 0.63;
   var value =25;
   var max = 50;
   color = [["#49afff"], ["#68A54A"], ["#f56c6c"]]
var uploadedDataURL = "/asset/get/s/data-1559120606810-8K55q2kWT.png";
option = {
    tooltip: {
        formatter: '{a} <br/>{b} : {c}%'
    },
    angleAxis: {
           axisLine: {
               show: false
           },
           axisLabel: {
               show: false
           },
           splitLine: {
               show: false
           },
           axisTick: {
               show: false
           },
           min: 0,
           max: 6.666,
           // boundaryGap: ['0', '10'],
           startAngle: 225
       },
       radiusAxis: {
           type: 'category',
           axisLine: {
               show: false
           },
           axisTick: {
               show: false
           },
           axisLabel: {
               show: false
           },
           data: ['a', 'b', 'c'],
           z: 10
       },
       polar: {
           radius: '85%'
       },
    series: [{
               type: 'bar',
               data: [, , value/10],
               z: 1,
               coordinateSystem: 'polar',
               barMaxWidth: 10,
               name: '当前温度',
               roundCap: true,
              color:  //数组第一个属性是颜色所占line百分比
                        [],

               barGap: '-100%',
               //如果想要两个系列的柱子重叠，可以设置 barGap 为 '-100%'。这在用柱子做背景的时候有用。
           },
          
           {//底圈
               type: 'bar',
               data: [, , 5],
               z: 0,
               silent: true,
               coordinateSystem: 'polar',
               barMaxWidth: 45,
               name: '',
               roundCap: true,
               color: 'rgb(255,255,255,0.5)',
               barGap: '-100%',
           },

        {
            name: '温度',
            type: 'gauge',
            max: 50,
            startAngle: 225,
            endAngle: -45,
            detail: {
                formatter: ['{value}℃', '{a|当前温度}'].join('\n'),
                fontSize: 120,
                width: '100%',
                height: '30%',
                padding: [-300, 0, 0, 0],
                rich: {
                    a: {
                        color: '#666',
                        fontSize: 30,
                        padding: [10, 0, 10, 0],
                    }
                }
            },
            data: [{
                value: value
            }],
            axisLine: {
                lineStyle: {
                    color: [ //数组第一个属性是颜色所占line百分比
                        [0.4, "#49afff"],
                        [0.6, "#68A54A"],
                        [1, "#f56c6c"],

                    ],
                    width: 22
                }
            },
            splitLine: {
                length: 15,
                lineStyle: {
                    width: 1
                }
            },
            splitNumber: 50,
            axisLabel: {
                distance: -20,
                show: true,
                formatter: function(value) {
                    if (value === 0 || value === 50) {
                        return value + '℃'
                    }
                    return ''
                },
                //   padding: '8 0 0 0'
                lineHeight: -60,
                fontSize: 40
            },
            pointer: {
                show: false
            },
            axisTick: {
                show: false
            },

        },
    
      
    ]
};
function init_polarColor(value) {    
    //此函数根据value的范围大小，为仪表盘参数设置不同的颜色、数字
    if (0 < value && value < 20) {        
option.series[0].color[0]="#49afff"
    } else if (20 <= value && value < 30) {
option.series[0].color = color[1]
    } else if (30 <= value && value <= 50) {
option.series[0].color = color[2]

    } else {}
  series[0].color = color[0]
}


setInterval(function() {
    // let num = (Math.random() * 40).toFixed(2) - 0;
    let num = value
    // option.series[0].data[0].value = num;
    // option.series[1].data[0].value = num;
    // option.series[1].data[2].value = 67 - num;
    myChart.setOption(option, true);
     init_polarColor(value)
}, 2000);
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
