vue3中echarts饼图图例实现滚动分页

在Vue3中使用ECharts创建饼图并实现实现图例的滚动分页，通常需要结合Vue的组件化思想以及ECharts提供的API特性。首先，你需要安装ECharts库并在项目中引用它。然后，你可以按照以下步骤操作：

1. 创建一个 Vue 组件，如 `PieChartWithScrollableLegend.vue`，并设置初始数据结构来存储图表的数据和图例项。

<template>
  <div ref="chartWrapper">
    <div class="legend" v-if="showLegend">
      <el-pagination :total="legendTotalItems" @current-change="changeLegendPage" />
      <div class="scrollable-chart-legend">
        <!-- 图例内容动态渲染 -->
        <div v-for="(item, index) in slicedLegends" :key="index" :class="{ active: selectedLegend === item.name }">
          <i :class="item.icon" :title="item.name"></i> {{ item.name }}
        </div>
      </div>
    </div>
    <ec-charts :options="chartOptions" :ref="chartsRef"></ec-charts>
  </div>
</template>

<script>
import ECharts from 'echarts';

export default {
  components: {
    // 如果ECharts组件尚未引入，请自行添加
  },
  data() {
    return {
      chartOptions: {},
      legendTotalItems: 0,
      slicedLegends: [],
      selectedLegend: '',
      showLegend: true,
      currentPage: 1,
    };
  },
  computed: {
    ...mapState(['chartData']), // 如果使用Vuex管理状态，请补充这里
    filteredLegends() {
      // 这里根据chartData筛选出图例项，并计算总数
      // 比如说每页显示5个，总共有26个图例，那么应该有5页
      const pageSize = 5;
      return this.chartData.legend.slice(0, pageSize);
    }
  },
  methods: {
    changeLegendPage(pageNumber) {
      this.currentPage = pageNumber;
      this.slicedLegends = this.filteredLegends.slice((pageNumber - 1) * pageSize, pageNumber * pageSize);
      // 更新selectedLegend以保持当前选中的项
      this.selectedLegend = this.slicedLegends[pageNumber - 1].name;
    }
  },
  mounted() {
    this.buildChart();
  },
  watch: {
    chartData(newData) {
      // 当图表数据更新时，重新构建图表和图例
      this.legendTotalItems = newData.legend.length;
      this.buildChart();
    }
  },
  methods: {
    buildChart() {
      // 使用filteredLegends来生成ECharts的选项，包括图例
      this.chartOptions.legend = {
        data: this.filteredLegends.map(item => ({ name: item.name })),
      };

      // 初始化ECharts实例
      const chartsRef = this.$refs.chartsRef;
      if (chartsRef) {
        this.$nextTick(() => {
          new ECharts(chartsRef).setOption(this.chartOptions);
        });
      }
    },
  },
};
</script>

<style scoped>
/* 样式部分，比如调整图例区域和滚动条样式 */
.scrollable-chart-legend {
  overflow-y: auto;
  height: 200px; /* 可根据需求自定高度 */
}
</style>

在这个例子中，我们使用了Element UI的`el-pagination`组件来实现分页，每次切换页面会动态更新显示的图例项。注意这只是一个基础示例，实际应用中可能需要根据项目的具体需求进行定制和优化。