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

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

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

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

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

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

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

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

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

getImportantPersonList().then(res => {

// 从接口返回的数据中取出x