caner
/
python-spider-baidu


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
							<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>温度监控</title>
    <script type="text/javascript" src="./static/echarts.min.js"></script>
</head>

<body>
    <div id="charts" class="chart-container" style="width:900px; height:500px;"></div>
    <script>
        // init echarts
        const dom = document.getElementById('charts')
        const chart = echarts.init(dom)
        const Arr = []
        const option = {
            backgroundColor: 'white',
            grid: {
                top: '30%',
                left: '20%',
                right: '20%',
                bottom: '30%',
                containLabel: true,
            },

            tooltip: {
                trigger: "axis",
            },
            xAxis: {
                data: [],
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#E5E6EB',
                    }
                },
                axisLabel: {
                    color: '#86909C',
                    fontSize: 12,
                },
            },
            yAxis: [{
                type: 'value',
                nameTextStyle: {
                    color: "#000",
                    fontSize: 14,
                    padding: [0, 0, 0, 30]
                },
                axisLabel: {
                    color: '#4E5969',
                    fontSize: 12
                },
                splitLine: {     //网格线
                    "show": false,
                }
            }],
            series: [
                {
                    type: 'line',
                    smooth: true,
                    showSymbol: false,
                    barWidth: 20,
                    data: [],
                    itemStyle: {
                        normal: {
                            color: "#4080FF",
                            width: 2
                        },
                    },
                }
            ]
        }

        function getData() {
            fetch('http://127.0.0.1:5673/data', { method: 'GET', Headers: { 'Content-Type': 'application/json' } }).then((res => res.json())).then(res => {
                if (Arr.length > 300) Arr.shift()
                Arr.push(res)
                const series = Arr.map(el=>el.value)
                const xAxis = Arr.map(el => el.time)
                option.xAxis.data = xAxis
                option.series[0].data = series
                chart.setOption(option)
                console.log('服务器回来的数据',res,Arr);

            })
        }
        getData()
        // 每3秒请求一次数据
        setInterval(() => {
            getData()
        }, 3000);

    </script>
</body>

</html>