非常感谢这篇博客：ECharts柱状图分页显示（数据循环）_s小布丁的博客-CSDN博客

大家好，我是南宫，很久没有更新博客了。

本文参考了这篇博客里面的思路和分割数据的代码，不过我用的是vue页面，后面没有照搬他的代码，而是我自己根据我的项目需求拆分了我的函数，下面整理一下思路。

首先说一下我的需求：用柱状图展示出一系列分类的数据，结果发现分类共9种，每类的名字都很长，一行显示的时候x轴文字直接重叠到飞起，就算是弄成x轴3个字一换行，效果也很难看，变成换了很多行。问了产品以后，让我改成分页的形式。

最终的效果图如下，小伙伴先看看。

右上角的点点就是页码，共9个数据，但是最多显示4个，看起来就还行了。

下面来说一下我的思路，有类似的需求的小伙伴可以往下看：

1.   调用接口获取数据，然后在数据里找到x轴、y轴要显示的字段，用map方法映射出了两个新数组，保存起来，作为x轴，y轴的数据。

我这里认为type是x轴的数据，value是y轴的数据。

  getImportantPersonList().then(res => {// 从接口返回的数据中取出x轴和y轴数据const valueList = res.map(item => item.num)const typeList = res.map(item => item.type)})

2.  把拿到的x轴和y轴数据调用分割数组的方法，分别分割成一个二维数组（每个元素是每一页要展示的数据）分割数组的方法，是从前面那个博客里拿来用的。

然后默认肯定是把第一页的数据渲染出来。

        // 分割数组的方法function arrayChunk(array, size){let data = []for (let i = 0; i < array.length; i += size) {data.push(array.slice(i, i + size))}return data}// 把x轴和y轴数据分割完并记录下来this.valueList = arrayChunk(valueList, 4)this.typeList = arrayChunk(typeList, 4)// 获取完数据后，默认显示第一页this.currentPersonPage = 0this.setPeoplePage()

 3. 生成页码的小圆点。

遍历切割好的二维数组，二维数组有几个元素，就表示分为几页，根据这个来渲染小点。

除了准备小圆点的数组，还要准备小圆点高亮的数据，来匹配当前选中的页。

        // 统计有多少页this.followPersonPages = []for (var j = 0; j < this.valueList.length; j++) {this.followPersonPages.push(j+1);}

4. 点击小圆点，切换展示的分页。

给小圆点绑定点击事件，把对应的index传入，除了把当前高亮的下标改了以后，也要修改echarts的option，把里面渲染的数据也改成第index页的x轴数据和y轴数据

// 切换要查看折线图的第几页choosePersonPage(index) {this.currentPersonPage = indexthis.setPeoplePage()},

 5. 因为加载好数据后需要渲染数据，点击分页也需要渲染新的数据，所以我觉得“渲染数据”的功能可以被抽象出去到另一个函数，所以就抽了一个setPeoplePage的方法出来。

这个方法只负责根据this.currentPersonPage渲染当前页的数据，所以不需要参数了

（下面我省略了其他无关的代码，注意this.currentPersonPage）

// 绘制当页的折线图setPeoplePage() {let myChart = echarts.init(document.getElementById('echartsFour'))myChart.setOption({tooltip: {...},grid: {...},xAxis: [{...axisLabel: {...},data: this.typeList[this.currentPersonPage],},],yAxis: [{...},],series: [{name: '人员情况',type: 'bar',...data: this.valueList[this.currentPersonPage],zlevel: 0,label: {...},},{// 分隔type: 'pictorialBar',...},],})},

 也就是说，要渲染分页后的柱状图，只需要设置this.currentPersonPage的值为第几页，然后调用this.setPeoplePage方法去渲染就好了。这样既可以让渲染方法变得纯粹，又可以让获取数据后的处理函数这里不太冗长。

亲测可用。有疑问的小伙伴可以在评论区提问，如果能帮到你，那就太好了。