echarts vue实现柱状图分页显示

非常感谢这篇博客：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方法去渲染就好了。这样既可以让渲染方法变得纯粹，又可以让获取数据后的处理函数这里不太冗长。

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