vue echart翻页的前端按钮代码

在Vue.js中，结合ECharts做数据可视化并实现翻页功能，通常会使用到分页组件配合ECharts的异步加载。前端按钮代码示例如下：

<template>
  <div>
    <el-pagination
      @current-change="handleCurrentChange"
      :page-size="pageSize"
      layout="total, prev, pager, next, jumper"
      :total="totalDataCount"
    ></el-pagination>
    <div v-loading="isLoading" style="height: 400px; margin-top: 20px;">
      <ec-chart :options="chartOptions"></ec-chart>
    </div>
  </div>
</template>

<script>
import EChart from 'echarts';

export default {
  data() {
    return {
      chartOptions: null,
      isLoading: false,
      pageSize: 10,
      currentPage: 1,
      totalDataCount: 0,
    };
  },
  components: { ecChart: EChart },
  methods: {
    handleCurrentChange(page) {
      this.currentPage = page;
      this.loadChartData();
    },
    loadChartData() {
      this.isLoading = true;
      // 这里假设你有一个获取数据的函数，可以根据当前页码和每页大小来请求数据
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      
      fetchData({
        start: startIndex,
        end: endIndex
      }).then(data => {
        this.chartOptions.series[0].data = data.slice(startIndex, endIndex);
        this.totalDataCount = data.length;
        this.isLoading = false;
      });
    }
  },
};
</script>

在这个例子中，`el-pagination`是一个Element UI的分页组件，它触发`handleCurrentChange`方法时，我们更新`currentPage`并调用`loadChartData`来加载对应页面的数据到ECharts图表上。