在arduino上接入温湿度传感器，传到echarts上用两个图显示。并在echarts下面有两个按钮或者输入值，控制红绿灯

要在 Arduino 上接入温湿度传感器并将数据传输到 ECharts 上，您可以使用以下步骤：

1. 使用 Arduino IDE 编写代码，通过传感器读取温度和湿度数据，并将其发送到串口。

#include <DHT.h>
#define DHTPIN 2
#define DHTTYPE DHT11
DHT dht(DHTPIN, DHTTYPE);

void setup() {
  Serial.begin(9600);
  dht.begin();
}

void loop() {
  float humidity = dht.readHumidity();
  float temperature = dht.readTemperature();
  Serial.print("H:");
  Serial.print(humidity);
  Serial.print(" T:");
  Serial.println(temperature);
  delay(5000);
}

2. 在您的 Vue.js 应用程序中，使用 SerialPort 库读取串口数据。将数据解析为温度和湿度，并将其存储在 Vue 实例中。

import SerialPort from 'serialport';
import Readline from '@serialport/parser-readline';

const port = new SerialPort('/dev/ttyUSB0', { baudRate: 9600 });
const parser = port.pipe(new Readline({ delimiter: '\n' }));

new Vue({
  el: '#app',
  data() {
    return {
      temperature: 0,
      humidity: 0,
      light: 'red',
    };
  },
  created() {
    parser.on('data', (data) => {
      const [humidity, temperature] = data.trim().split(' ');
      this.humidity = parseFloat(humidity);
      this.temperature = parseFloat(temperature);
    });
  },
});

3. 使用 ECharts 库创建两个图表，分别显示温度和湿度数据。

import echarts from 'echarts';

new Vue({
  el: '#app',
  data() {
    return {
      temperature: 0,
      humidity: 0,
      light: 'red',
    };
  },
  created() {
    // ...
  },
  mounted() {
    const temperatureChart = echarts.init(document.getElementById('temperature-chart'));
    const humidityChart = echarts.init(document.getElementById('humidity-chart'));

    const option = {
      xAxis: {
        type: 'category',
        data: ['0s'],
      },
      yAxis: {
        type: 'value',
      },
      series: [{
        data: [0],
        type: 'line',
      }],
    };

    temperatureChart.setOption(option);
    humidityChart.setOption(option);

    setInterval(() => {
      const time = new Date().toLocaleTimeString();
      const temperatureData = [this.temperature];
      const humidityData = [this.humidity];

      temperatureChart.setOption({
        xAxis: {
          data: [time],
        },
        series: [{
          data: temperatureData,
        }],
      });

      humidityChart.setOption({
        xAxis: {
          data: [time],
        },
        series: [{
          data: humidityData,
        }],
      });
    }, 1000);
  },
});

4. 在 ECharts 下方添加两个按钮或输入框，用于控制红绿灯。

<div id="app">
  <div id="temperature-chart"></div>
  <div id="humidity-chart"></div>
  <div>
    <button @click="light = 'red'">Red</button>
    <button @click="light = 'green'">Green</button>
    <input v-model="light" type="text">
  </div>
</div>

5. 在 Vue.js 应用程序中使用 axios 库将控制命令发送到 Arduino。

import axios from 'axios';

new Vue({
  el: '#app',
  data() {
    return {
      temperature: 0,
      humidity: 0,
      light: 'red',
    };
  },
  created() {
    // ...
  },
  methods: {
    setLight() {
      axios.post('/setLight', { light: this.light })
        .then((response) => {
          console.log(response.data);
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
});

在 Arduino 中，您可以使用以下代码来控制红绿灯：

int redLed = 3;
int greenLed = 4;

void setup() {
  pinMode(redLed, OUTPUT);
  pinMode(greenLed, OUTPUT);
  Serial.begin(9600);
}

void loop() {
  if (Serial.available()) {
    String message = Serial.readStringUntil('\n');
    if (message == "red") {
      digitalWrite(redLed, HIGH);
      digitalWrite(greenLed, LOW);
    } else if (message == "green") {
      digitalWrite(redLed, LOW);
      digitalWrite(greenLed, HIGH);
    }
  }
}

请注意，您需要根据您的硬件和系统设置端口和其他参数。