echarts纵向柱状图自动轮播

在 ECharts 中实现纵向柱状图的自动轮播可以通过使用动画和定时器来实现。下面是一个实现纵向柱状图自动轮播的示例代码：

// 引入ECharts库
import echarts from 'echarts';

// 初始化图表容器
var chartContainer = document.getElementById('chart');

// 定义数据
var data = [
  { name: 'A', value: 100 },
  { name: 'B', value: 200 },
  { name: 'C', value: 300 },
  // ...更多数据
];

// 创建图表实例
var chart = echarts.init(chartContainer);

// 配置项
var option = {
  xAxis: {
    type: 'category',
    data: data.map(item => item.name),
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      type: 'bar',
      data: data.map(item => item.value),
    },
  ],
};

// 设置定时器
var index = 0; // 初始索引
var timer = setInterval(function () {
  // 更新数据
  option.series[0].data = data.map(item => item.value);
  option.xAxis.data = data.map(item => item.name);

  // 设置动画
  option.animation = true;

  // 渲染图表
  chart.setOption(option);

  // 更新索引
  index++;

  // 判断是否超出数据长度，超出则重置索引为0
  if (index >= data.length) {
    index = 0;
  }
}, 3000); // 每3秒轮播一次

// 停止轮播
// clearInterval(timer);

在上述代码中，我们使用 ECharts 创建了一个纵向柱状图，并通过定时器来更新数据和轮播图表。你可以根据实际需求修改定时器的时间间隔。如果需要停止轮播，可以取消注释掉最后一行代码。