echarts 做动态数据折线图

### 使用ECharts创建动态更新的数据折线图 为了实现动态更新的数据折线图，可以采用定时器机制定期获取新数据并更新图表。下面是一个完整的示例说明如何利用JavaScript中的`setInterval()`方法配合ECharts库完成这一功能。 #### 初始化图表配置 首先定义初始的选项设置以及初始化实例化对象： ```javascript // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); option = { title: { text: '实时股票价格' }, tooltip: { trigger: 'axis' }, xAxis: { type: 'category', boundaryGap: false, data: [] // X轴标签为空数组等待后续填充 }, yAxis: { type: 'value' }, series: [{ name:'股价', type:'line', data:[], // Y轴数值同样留空待填充值 smooth:true }] }; myChart.setOption(option); ``` 此部分设置了基本布局结构，并预留了用于存储时间戳（X轴）和对应的价格值（Y轴）的位置[^1]。 #### 动态更新逻辑 接着编写一个名为`updateChart`的功能模块负责抓取最新行情信息并向现有图形追加记录点位： ```javascript function updateChart() { var date = new Date(); $.get('/api/stock/latest', function (data) { // 模拟API请求路径 let timeLabel = [date.getHours()+':'+date.getMinutes()]; option.xAxis.data.push(timeLabel); // 向X轴添加新的刻度 option.series[0].data.push(data.price); // 将收到的新价位加入序列 if (option.xAxis.data.length > 20){ option.xAxis.data.shift(); // 移除最早的时间标记保持固定长度 option.series[0].data.shift(); // 对应移去最旧的一个价格 } myChart.setOption(option, true); // 应用修改后的配置项参数 }); } ``` 上述代码片段展示了如何通过AJAX异步通信方式从服务器端拉取消息体内的具体字段作为新增节点坐标；同时考虑到性能因素当累积超过一定数量时会自动清理过期条目以维持合理规模[^2]。 最后一步就是启动周期性的回调操作让整个过程循环往复不间断运行下去: ```javascript setInterval(updateChart, 1000); // 设置每隔一秒执行一次更新动作 ``` 这样就完成了基于ECharts框架构建具备实时交互特性的可视化组件的工作流程介绍[^3]。