Vue2+ElementUI实现横向轮播的柱状图

以下是一个简化的代码示例，展示了如何在Vue 2应用程序中使用Element UI的el-carousel和el-carousel-item组件以及el-table组件来实现横向轮播的柱状图：

<template>
  <div>
    <el-carousel indicator-position="outside" :interval="5000" arrow="always">
      <el-carousel-item v-for="item in data" :key="item.year">
        <el-table :data="item.data" style="width: 100%;">
          <el-table-column prop="name" label="名称" width="180">
          </el-table-column>
          <el-table-column prop="value" label="值">
          </el-table-column>
        </el-table>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      data: [
        {
          year: '2018',
          data: [
            { name: '柱状A', value: 10 },
            { name: '柱状B', value: 20 },
            // ... 更多数据
          ]
        },
        {
          year: '2019',
          data: [
            { name: '柱状A', value: 15 },
            { name: '柱状B', value: 25 },
            // ... 更多数据
          ]
        },
        // ... 更多年份数据
      ]
    };
  }
};
</script>
 
<style>
/* 可以添加一些样式 */
</style>

这段代码中，我们使用了el-carousel组件来创建一个横向轮播的容器，并通过v-for指令来遍历data数组中的每一个年份对象。每个年份对象在一个el-carousel-item中展示，其中包含一个el-table组件用于显示柱状图的数据。轮播的间隔时间通过interval属性设置，指定为5000毫秒（5秒）。这个简单的例子提供了一个基础模板，您可以根据实际需求进一步开发和定制。