嘿，我来帮你搞定这个图表自动更新的问题！你要的两种方案我都给你整理好了，直接照着改就行～

方案一：数值修改时自动更新（仿Excel实时同步） #

这个方案的核心是监听数值数据源的变化，一旦数值变了就立刻触发图表更新。分两种常见场景：

场景1：数值来自输入框/表单元素 #

如果你的数值是用户在输入框里修改的，直接监听输入框的input事件（实时触发）或者change事件（失去焦点时触发）就行：

<!-- 示例输入框 -->
<input type="number" id="numInput" value="30">
<!-- 图表容器 -->
<div id="myChart" style="width: 400px; height: 300px;"></div>

<script>
// 这里以ECharts为例，换成你用的图表库逻辑就行
const chart = echarts.init(document.getElementById('myChart'));

// 封装图表更新函数
function refreshChart(value) {
  chart.setOption({
    xAxis: { type: 'category', data: ['当前值'] },
    yAxis: { type: 'value' },
    series: [{ type: 'bar', data: [value] }]
  });
}

// 初始化图表
refreshChart(30);

// 监听输入框变化，实时更新
document.getElementById('numInput').addEventListener('input', (e) => {
  const newVal = parseFloat(e.target.value) || 0; // 处理非数字输入
  refreshChart(newVal);
});
</script>

场景2：数值是JS变量（无输入框） #

如果数值是在JS代码里动态修改的，用ES6的Proxy可以实现变量的响应式监听，一旦变量值变了就自动更新图表：

// 定义需要监听的数值对象
const chartData = { currentValue: 50 };

// 用Proxy包装，监听值变化
const reactiveData = new Proxy(chartData, {
  set(target, prop, newValue) {
    target[prop] = newValue;
    // 值变化时立刻更新图表
    refreshChart(newValue);
    return true;
  }
});

// 图表更新函数（同上）
function refreshChart(value) {
  // 你的图表更新逻辑，比如调用图表库的setOption/update方法
}

// 以后只要修改reactiveData.currentValue，图表就自动更了！
// 比如：reactiveData.currentValue = 75;

方案二：定时器定时自动刷新 #

这个方案更简单，不管数值有没有变化，每隔固定时间（比如1秒）自动调用图表更新函数，适合需要定期同步后端数据或者刷新实时计算结果的场景：

// 初始化图表
const chart = echarts.init(document.getElementById('myChart'));

// 封装获取最新数值的函数（换成你的逻辑：比如调接口、读本地存储等）
function getLatestValue() {
  // 示例：模拟从后端获取最新数据
  return Math.floor(Math.random() * 100);
}

// 图表更新函数
function refreshChart() {
  const latestVal = getLatestValue();
  chart.setOption({
    // 你的图表配置，用latestVal更新数据
    series: [{ data: [latestVal] }]
  });
}

// 先初始化一次图表
refreshChart();

// 开启定时器，每秒刷新一次（1000毫秒=1秒）
const refreshTimer = setInterval(refreshChart, 1000);

// 如果需要停止刷新，调用clearInterval(refreshTimer)就行

小提醒 #

• 如果你用的是Chart.js、Highcharts这类其他库，更新图表的方法可能略有不同（比如Chart.js用chart.update()），但核心逻辑都是触发图表的更新方法。
• 用定时器时，如果图表更新比较耗性能，可以适当调大间隔（比如2秒），避免页面卡顿。

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