vue3 echarts 动态折线图如何设置时间轴

Vue3中使用ECharts的动态折线图设置时间轴可以通过以下步骤实现。

1.安装ECharts

在Vue3项目中安装ECharts：

npm install echarts --save

2.引入ECharts

在组件中引入ECharts：

import * as echarts from "echarts";

3.创建实例

在组件中创建一个ECharts实例：

const chart = echarts.init(document.querySelector("#chart"));

4.设置配置项

配置项是用于描述图表的样式和数据的，可以在创建实例时进行设置：

const options = {
  xAxis: {
    type: "category",
    data: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: "line",
    },
  ],
};

5.设置时间轴

在配置项中添加时间轴配置：

const options = {
  xAxis: {
    type: "category",
    data: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: "line",
    },
  ],
  // 添加时间轴配置
  dataZoom: [
    {
      type: "slider",
      
      xAxisIndex: 0,
      filterMode: "filter",
      start: 0,
      end: 60,
    },
  ],
};

其中，type为slider表示使用滑动条文件，xAxisIndex为0表示只关联x轴索引为0的轴，filterMode为filter表示按范围过滤数据，start和end分别为时间轴的开始和结束位置。

最后，将配置项应用到ECharts实例中：

chart.setOption(options);

这样就可以在动态折线图中显示时间轴了。