echarts折线图动态获取数据

Echarts是一款基于JavaScript的开源可视化库，可以通过使用Echarts的API和配置项，实现折线图的动态获取数据。下面以一个简单的示例进行说明：

首先，需要在HTML文件中引入Echarts的脚本文件，例如：

<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>

然后，通过创建一个DOM容器，用于展示折线图，例如：

<div id="chartContainer" style="width: 600px; height: 400px;"></div>

接下来，在JavaScript中，定义一个用于获取数据的函数，例如：

function fetchData() {
  // 这里可以通过异步请求或其他方式获取数据
  // 假设获取到的数据为一个包含时间和数值的数组
  var data = [
    { time: '2021-01-01', value: 100 },
    { time: '2021-01-02', value: 150 },
    { time: '2021-01-03', value: 200 },
    // ...
  ];
  
  // 调用函数更新图表
  updateChart(data);
}

然后，定义一个更新图表的函数，用于根据新的数据进行图表的更新，例如：

function updateChart(data) {
  var chartContainer = document.getElementById('chartContainer');
  var chart = echarts.init(chartContainer);
  
  var option = {
    xAxis: {
      type: 'category',
      data: data.map(item => item.time)  // x轴数据为时间
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      type: 'line',
      data: data.map(item => item.value)  // y轴数据为数值
    }]
  };
  
  chart.setOption(option);
}

最后，可以在合适的时机（如页面加载完毕、按钮点击等）调用`fetchData`函数，动态获取数据并更新图表：

// 页面加载完毕后获取并更新数据
window.onload = function() {
  fetchData();
};

以上示例中，`fetchData`函数模拟了获取数据的过程，更新图表时使用`updateChart`函数根据新的数据进行更新。通过调用Echarts的API和配置项，我们可以实现折线图的动态获取数据。