关于echarts实现 x 轴过长 自动滚动显示

首先说一下我的需求

我的需求是 echarts图表写一个 类似于tab页的东西 根据年月日显示不同的图表

当我们选择日的时候 日期显示不完全 则希望我们的图表能够自动滚动 （写这篇文章的之前还没考虑鼠标悬浮进去 图表暂停这个问题 有待解决）

setOptions 方法 根据点击的是 日期 还是年 还是月 来给 setOptions 传参数，将相应的 xAxisData坐标以及两条y轴数据都传给 setOptions方法 。

dataZoom 是设置 x轴的滚动条的 根据定时器来使图表每次都往后滚动一条数据

// 使用刚指定的配置项和数据显示图表。
      timer = setInterval(function () {
        // 每次向后滚动一个，最后一个从头开始。
        if (option1.dataZoom[0].endValue == data2.length - 1) {
          option1.dataZoom[0].endValue = 6;
          option1.dataZoom[0].startValue = 0;
        }
        else {
          option1.dataZoom[0].endValue = option1.dataZoom[0].endValue + 1;
          option1.dataZoom[0].startValue = option1.dataZoom[0].startValue + 1;
        }
        myChart.setOption(option1,true);
      }, 2000);

上全部代码

  setOptions: function (params) {
      let myChart = this.myChart
      let xAxisData = params.xAxisData;
      let data1 = params.data1
      let data2 = params.data2
      let timer = null ;
      this.myChart.clear();
      clearInterval(timer);
      
      let emphasisStyle = {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: 'rgb(255,255,255)'
        }
      };
      let option1 = {
        legend: {
          left: '20%',
          textStyle:{
            fontSize: 15,//字体大小
            color: '#ffffff'//字体颜色
          }
        },
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          data: xAxisData,
          name: 'X Axis',
          axisLabel: {
            color: '#ffffff'
          },
          axisLine: { onZero: true },
          splitLine: { show: false },
          splitArea: { show: false }
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#ffffff'
          }
        },
        grid: {
          top: '15%',  // 设置上方空白空间占比
          bottom: '15%',  // 设置下方空白空间占比
          left:'10%',
          right:'5%',
        },
        series: [
          {
            name: '南门',
            type: 'bar',
            stack: 'one',
            barWidth: 10,
            emphasis: emphasisStyle,
            data: data1,
            
          },
          {
            name: '北门',
            type: 'bar',
            stack: 'one',
            barWidth: 10,
            emphasis: emphasisStyle,
            data: data2,
            itemStyle: {
              normal: {
                //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                barBorderRadius: [10, 10, 0, 0],
              },
            },
          }
        ],
         // 自动滚动
        dataZoom: [//滑动条
          {
            show: false,//是否显示滑动条
            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 6  // 一次性展示7个。
          }
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      timer = setInterval(function () {
        // 每次向后滚动一个，最后一个从头开始。
        if (option1.dataZoom[0].endValue == data2.length - 1) {
          option1.dataZoom[0].endValue = 6;
          option1.dataZoom[0].startValue = 0;
        }
        else {
          option1.dataZoom[0].endValue = option1.dataZoom[0].endValue + 1;
          option1.dataZoom[0].startValue = option1.dataZoom[0].startValue + 1;
        }
        myChart.setOption(option1,true);
      }, 2000);

      myChart.clear();
      myChart.setOption(option1,true);
      // 监听屏幕变化自动缩放图表
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    }

**

但是我写完这个的时候我发现有点问题 当我切换的时候 会显示两个图表来回切换 所以我再切换的时候将之前的图表注销并且清楚之前的定时器**

     if(this.myChart){
        this.myChart.dispose()
        this.myChart = null
      }
      //改变我的柱状图的颜色
      let  customTheme = {
          // 在此添加自定义主题属性
          color: ['#03A5FF','#FFCD48',]
      };
      this.$echarts.registerTheme('customTheme', customTheme);
      this.myChart = this.$echarts.init(document.getElementById('myCharts'),'customTheme');
      this.setOptions(this.chartData)

在最后为了防止内存泄漏我们要销毁监听等等

   beforeDestroy () {
    if (!this.myChart) {
      return
    }
    // 销毁监听事件 但是我不知道这里这个方法对不对哈哈哈哈啊哈
    window.removeEventListener("resize",  this.myChart.resize());
    this.myChart.dispose()
    this.myChart = null
  },

先这样把 记录下来 省的自己以后再忘了