echarts中使用缩放组件和分页组件

在使用echarts中经常会遇到这样的问题，数据量过多导致图表展现出来的效果很丑，其实在初始展现的时候没必要全部显示。那么这个时候就需要借助echarts的缩放组件和分页组件了。
那么什么时候使用缩放组件什么时候使用分页组件呢？

• 1、在有坐标轴的时候可以使用缩放组件也可以使用分页组件，具体问题具体对待
• 2、在没有坐标轴时只能使用分页组件

下面讲一下怎么使用

缩放组件（dataZoom）

dataZoom: [
        {
          type: "inside",
          start: 50,
          end: 100
        },
        {
          show: true,
          type: "slider",
          y: "90%",
          start: 50,
          end: 100
        }
      ],

上面我做了一个横向的收缩功能，那怎么做一个纵向的收缩功能呢？

dataZoom: [
        {
          type: "inside",
        }
        {
          show: true,
          type: "slider",
          start: 50,
          end: 100,
          orient: "vertical"
        }
    ],

细心的小伙伴可能已经发现了加一个orient: "vertical"就可以了
dataZoom

分页组件（legendScroll）

legend: {
    type: "scroll",
    data: [],
    selected: {}
  }

let array = [
        {
            "name": "数据1",
            "code": "6042",
            "amount": "1327051.91"
        },
        {
            "name": "数据2",
            "code": "6061",
            "amount": "500.0"
        },
        {
            "name": "数据3",
            "code": "6062",
            "amount": "580920.33"
        },
        {
            "name": "数据4",
            "code": "6130",
            "amount": "3166684.83"
        },
        {
            "name": "数据5",
            "code": "6150",
            "amount": "4840.0"
        },
        {
            "name": "数据6",
            "code": "6220",
            "amount": "4499001.13"
        },
        {
            "name": "数据7",
            "code": "6251",
            "amount": "12514259.0"
        },
        {
            "name": "数据8",
            "code": "6252",
            "amount": "3188740.11"
        },
        {
            "name": "数据9",
            "code": "6260",
            "amount": "1582697.77"
        },
        {
            "name": "数据10",
            "code": "6271",
            "amount": "40010.63"
        }
];
let seriesList = [];
let legendData = [];
let selectedData = {};
array.forEach((val, index) => {
    seriesList.push({
      name: val.name,
      value: val.amount
    });
    legendData.push(val.name);
    //  分页判断条件，只显示前5条数据
    if (index >= 5) {
      selectedData[val.name] = false;
    }
  });
      
  // 填充数据
  chart.setOption({
    legend: {
        data: legendData,
        selected: selectedData
    },
    series: [
        {
          data: seriesList
        }
      ]
});

分页组件的关键点在selected上，具体细节还是看看echarts中关于legend的文档吧！
legend