非常感谢这篇博客：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 = 0
this.setPeoplePage()3. 生成页码的小圆点。
遍历切割好的二维数组，二维数组有几个元素，就表示分为几页，根据这个来渲染小点。
除了准备小圆点的数组，还要准备小圆点高亮的数据，来匹配当前选中的页。
// 统计有多少页
this.followPersonPages = []
for (var j = 0; j < this.valueList.length; j++) {
this.followPersonPages.push(j+1);
} <div class="dot-tabs-bar">
<ul>
<li
:class="{ selected: index === currentPersonPage }"
v-for="(item, index) in followPersonPages"
:key="index"
@click="choosePersonPage(index)"
></li>
</ul>
</div>4. 点击小圆点，切换展示的分页。
给小圆点绑定点击事件，把对应的index传入，除了把当前高亮的下标改了以后，也要修改echarts的option，把里面渲染的数据也改成第index页的x轴数据和y轴数据
// 切换要查看折线图的第几页
choosePersonPage(index) {
this.currentPersonPage = index
this.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方法去渲染就好了。这样既可以让渲染方法变得纯粹，又可以让获取数据后的处理函数这里不太冗长。
亲测可用。有疑问的小伙伴可以在评论区提问，如果能帮到你，那就太好了。
