求助:实时温度计显示问题

最新推荐文章于 2024-09-14 16:14:50 发布

zyy1201

最新推荐文章于 2024-09-14 16:14:50 发布

阅读量1.1k

点赞数 1

文章标签：实时温度计 echarts图表 ajax

本文链接：https://blog.csdn.net/zyy1201/article/details/85162289

版权

想要通过echarts图表实现实时温度显示，但是新手上路，效果没有出来，希望路过的大神踩一脚。下面是代码和效果图。

<div id="jiyou" class="tem">
<script type="text/javascript">
var myChart1 = echarts.init(document.getElementById('jiyou'));
var kd1 = [];
// 刻度使用柱状图模拟，短设置3，长的设置5；构造一个数据
for (var i = 0, len = 120; i <= len; i++) {
    if (i > 100 || i < 30) {
        kd1.push('0')
    } else {
        if (i % 10 === 0) {
            kd1.push('30');
        } else {
            kd1.push('');
        }
    }
}
console.log(kd1)
var mercuryColor = '#fd4d49';
var borderColor = '#fd4d49';
var optionjiyou = {
	grid: {
			left:15,
			bottom:20
			},
    title: {
        text: '温度计',
        show: false
    },
    yAxis: [{
        show: false,
        min: 0,
        max: 90,
    }, {
        show: false,
        data: [],
        min: 0,
        max: 90,
    }],
    xAxis: [{
        show: false,
        data: []
    }, {
        show: false,
        data: []
    }, {
        show: false,
        data: []
    }, {
        show: false,
        min: -110,
        max: 70,
    }],
    series: [
	{
        name: '条',
        type: 'bar',
        // 对应上面XAxis的第一个对象配置
        xAxisIndex: 0,
        data:[],
        barWidth: 14,
        itemStyle: {
            normal: {
                color: mercuryColor,
                barBorderRadius: 0,
            }
        },
            label: {
            normal: {
                show: false,
                position: 'left',
                formatter: function(param) {
     // 因为柱状初始化为0，温度存在负值，所以，原本的0-100，改为0-130，0-30用于表示负值
                    return param.value ;
                },
                textStyle: {
                    color: '#000',
                    fontSize: '14',
                }
            }
        },
        z: 2
    },
{
        name: '白框',
        type: 'bar',
        xAxisIndex: 1,
        barGap: '-100%',
        data: [129],
        barWidth: 24,
        itemStyle: {
            normal: {
                color: '#ffffff',
                barBorderRadius: 50,
            }
        },
        z: 1
    },
{
        name: '外框',
        type: 'bar',
        xAxisIndex: 2,
        barGap: '-100%',
        data: [130],
        barWidth: 30,
        itemStyle: {
            normal: {
                color: borderColor,
                barBorderRadius: 50,
            }
        },
        z: 0
    },
 {
        name: '圆',
        type: 'scatter',
        hoverAnimation: false,
        data: [0],
        xAxisIndex: 0,
        symbolSize: 20,
        itemStyle: {
            normal: {
                color: mercuryColor,
                opacity: 1,
            }
        },
        z: 2
    },
    {
        name: '白圆',
        type: 'scatter',
        hoverAnimation: false,
        data: [0],
        xAxisIndex: 1,
        symbolSize: 30,
        itemStyle: {
            normal: {
                color: '#ffffff',
                opacity: 1,
            }
        },
        z: 1
    },
{
        name: '外圆',
        type: 'scatter',
        hoverAnimation: false,
        data: [0],
        xAxisIndex: 2,
        symbolSize: 40,
        itemStyle: {
            normal: {
                color: borderColor,
                opacity: 1,
            }
        },
        z: 0
    }, 
{
        name: '刻度',
        type: 'bar',
        yAxisIndex: 1,
        xAxisIndex: 3,
        label: {
            normal: {
                show: true,
                position: 'right',
                distance: 10,
                color: '#525252',
                fontSize: 8,
                formatter: function(params) {
                    // 因为柱状初始化为0，温度存在负值，所以，原本的0-100，改为0-130，0-30用于表示负值
                    if (params.dataIndex > 100 || params.dataIndex < 30) {
                        return '';
                    } else {
                        if (params.dataIndex % 5 === 0) {
                            return params.dataIndex - 30;
                        } else {
                            return '';
                        }
                    }
                }
            }
        },
        barGap: '-100%',
        data: kd1,
        barWidth: 1,
        itemStyle: {
            normal: {
                color: borderColor,
                barBorderRadius: 10,
            }
        },
        z: 0
    }]
}; 
var devjiyou='<?php echo $dev; ?>';
getdatajiyou();
 
function getdatajiyou(){
	$.post("jiyou.php?"+Math.random(),{num:devjiyou},function(one)
	{	
	 optionjiyou.series[0].data = parseFloat(one);
	});
       myChart1.setOption(optionjiyou,true);
}           // 使用刚指定的配置项和数据显示图表。
setInterval(function () {getdatajiyou();},3000);          
</script>

通过getdatajiyou函数获取的数字为60，但是没法在图表中显示出来，现在不知道该怎么改代码。。
这是显示图表
希望有大神可以帮忙，想实现实时显示温度。