如何将MySQL数据接入ECharts实现池塘水质监测实时可视化

1. 编写PHP数据接口（获取MySQL中的水质数据） #

先创建get_water_data.php文件，用于从数据库查询并返回格式化后的JSON数据：

<?php
// 数据库连接配置（替换为你的实际信息）
$servername = "localhost";
$username = "your_db_user";
$password = "your_db_pwd";
$dbname = "your_db_name";

// 建立数据库连接
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

// 查询水质数据（按时间倒序取最近20000条，可按需调整）
$sql = "SELECT record_time, water_index FROM pond_monitor ORDER BY record_time DESC LIMIT 20000";
$result = $conn->query($sql);

$dates = [];
$values = [];

if ($result->num_rows > 0) {
    // 遍历结果，整理为正序的日期和数值数组
    while($row = $result->fetch_assoc()) {
        // 转换时间格式为ECharts兼容的格式
        $formatted_time = date('Y/m/d H:i', strtotime($row["record_time"]));
        array_unshift($dates, $formatted_time);
        array_unshift($values, (float)$row["water_index"]);
    }
}

// 返回JSON格式数据
echo json_encode([
    'dates' => $dates,
    'values' => $values
]);

$conn->close();
?>

2. 修改前端ECharts代码，实现数据获取与实时更新 #

将你提供的示例代码修改为拉取真实数据，并添加定时刷新逻辑：

<div id="chart-container" style="width: 100%; height: 600px;"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById('chart-container');
var myChart = echarts.init(dom, null, {
  renderer: 'canvas',
  useDirtyRect: false
});
var option;

// 初始化图表基础配置
option = {
  tooltip: {
    trigger: 'axis',
    position: function (pt) {
      return [pt[0], '10%'];
    }
  },
  title: {
    left: 'center',
    text: '池塘水质监测数据'
  },
  toolbox: {
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      restore: {},
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [] // 初始为空，后续从接口获取
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, '100%'],
    name: '水质指标值' // 替换为实际指标，比如溶解氧、pH值等
  },
  dataZoom: [
    {
      type: 'inside',
      start: 0,
      end: 10
    },
    {
      start: 0,
      end: 10
    }
  ],
  series: [
    {
      name: '水质数据', // 替换为实际指标名称
      type: 'line',
      symbol: 'none',
      sampling: 'lttb',
      itemStyle: {
        color: 'rgb(255, 70, 131)'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(255, 158, 68)'
          },
          {
            offset: 1,
            color: 'rgb(255, 70, 131)'
          }
        ])
      },
      data: [] // 初始为空，后续从接口获取
    }
  ]
};

// 更新图表数据的函数
function refreshChart() {
  fetch('get_water_data.php')
    .then(res => res.json())
    .then(data => {
      // 更新x轴和系列数据
      myChart.setOption({
        xAxis: {
          data: data.dates
        },
        series: [{
          data: data.values
        }]
      });
    })
    .catch(err => {
      console.error('数据获取失败:', err);
    });
}

// 首次加载数据
refreshChart();

// 定时刷新（每5分钟，与传感器上传频率同步）
setInterval(refreshChart, 5 * 60 * 1000);

if (option && typeof option === 'object') {
  myChart.setOption(option);
}

window.addEventListener('resize', myChart.resize);
</script>

关键注意事项 #

• 数据库适配：PHP代码中的pond_monitor是数据表名，record_time是时间字段，water_index是水质指标字段，请根据你的数据库结构修改。
• 实时同步：setInterval的时间间隔设为5分钟，与传感器数据上传频率保持一致，确保图表数据最新。
• 数据排序：查询时按时间倒序取数据，再通过array_unshift转为正序，保证图表时间轴从早到晚排列。

内容的提问来源于stack exchange，提问作者DusanthaM