echarts中grid的使用以及柱状图中数据太多利用DataZoom实现自动横线滑动展示

一、grid，调整canvas内容

用于决定直角坐标系内绘图网格的位置,ECharts 3 及其以上允许存在多个grid

以下用几张图说明其效果：

 问题：在使用echarts时总是会遇到canvas内容不占满空间，导致许多留白。不知道grid配置之前采用的方法就是调大外盒子，以至于会超出范围（虽然也能达到想要的效果，但显然是不合理的）

使用grid之后： 

 实现代码：可手动给left、right、top、bottomm值，当然也能使用百分比，此处不多介绍。

option.grid = {
        left: 15,
        right: 15,
        top: 15,
        bottom: 10,
        containLabel: true,
      };
myChart.setOption(option);

grid配置项：图标离容器的距离
show:是否显示直角坐标系网格-----------值:true?false
left:图表离容器左侧的距离-----------------值:number?百分比
top:图表离容器顶部的距离-----------------值:number?百分比
right:图表离容器右侧的距离---------------值:number?百分比
bottom:图表离容器底部的距离------------值:number?百分比
backgroundColor:网格背景色-------------值:rgba或#000000
borderColor:网格的边框颜色--------------值:rgba或#000000
borderWidth:网格的边框线宽-------------值:number

二、DataZoom，实现柱状图数据过多的自动滑动

效果：ps：emmm因为csdn不能上传视频就下了个流氓app转换成了gif，忽略水印哈。。。

 实现代码：

let option = {       
        dataZoom: [
          //滑动条
          {
            show: false, //是否显示滑动条
            type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 5, // 一次性展示6个。
          },
        ],
}

    // 基于准备好的dom，初始化echarts实例
      if (this.barChart) {
        // 使用刚指定的配置项和数据显示图表。
        this.barChart.setOption(option);
      } else {
        this.barChart = echarts.init(
          document.getElementById("item3b192c10-1d09-11ed-9253-19fac822b37c")
        );
        this.barChart.setOption(option);
        clearInterval(this.barTimer);


        // 使用刚指定的配置项和数据显示图表。
        this.barTimer = setInterval(() => {
          // 每次向后滚动一个，最后一个从头开始。
          //判断是否滑动到最后一条数据，若是，则重置柱状图（显示前6条数据）
          if (option.dataZoom[0].endValue == data.length / 2 - 1) {
            option.dataZoom[0].endValue = 5;
            option.dataZoom[0].startValue = 0;
          } else {
            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
          }
          this.barChart.setOption(option);
        }, 3000);

datazoom其他的用法可以去官网了解...