echarts 时间曲线图_echarts 折线图动态x轴及数据

你想实现的是一个动态的时间曲线图，可以使用 echarts 的折线图来实现。具体步骤如下：

1. 准备数据：需要准备一个包含时间和数据的数组，例如：

var data = [
  ['2021-01-01', 123],
  ['2021-01-02', 234],
  ['2021-01-03', 345],
  // ...
];

2. 初始化 echarts：创建一个 echarts 实例，并指定容器。

var chart = echarts.init(document.getElementById('chart-container'));

3. 配置选项：设置图表的基本配置，包括标题、图例、坐标轴等。

var option = {
  title: {
    text: '时间曲线图',
  },
  legend: {
    data: ['数据'],
  },
  xAxis: {
    type: 'time',
    splitLine: {
      show: false,
    },
  },
  yAxis: {
    type: 'value',
    splitLine: {
      show: false,
    },
  },
  series: [
    {
      name: '数据',
      type: 'line',
      data: data,
    },
  ],
};

chart.setOption(option);

4. 动态更新数据：使用定时器来定时更新数据和 x 轴的范围。例如：

var startIndex = 0;
var endIndex = 10;

setInterval(function() {
  // 获取新的数据
  var newData = [
    ['2021-01-11', 456],
    ['2021-01-12', 567],
    ['2021-01-13', 678],
    // ...
  ];

  // 更新数据
  chart.setOption({
    series: [
      {
        data: newData.slice(startIndex, endIndex),
      },
    ],
    xAxis: {
      min: newData[startIndex][0],
      max: newData[endIndex - 1][0],
    },
  });

  // 更新 x 轴范围
  startIndex += 1;
  endIndex += 1;
}, 1000);

这样就可以实现一个动态的时间曲线图了。注意，上面的代码仅供参考，具体实现需要根据实际情况进行调整。