柱状图数据过长实现滚轴+点击某一条数据

柱状图数据过长实现滚轴的方法

    1.项目需求:当数据量过大时,页面展示起来会很拥挤,此时我们需要一个滚轴,可以让用户进行鼠标滚轮滑动的展示

    2.此时我们用到了Echarts中的dataZoom属性，这个属性主要用于区域缩放的功能

    3.上代码:
      var option = {
        dataZoom: [
          {
            type: "slider",//slider表示有滑动块的，inside表示内置的
            show: true,//是否开启
            start: 1,//起始百分比 即10% 数值为百分比形式
            end: 40,//结束百分比 即40%  数值为百分比形式
          },
          {
            type: "inside",
            startValue: 1, //从第几条开始 即1 绝对数值形式
            endValue: 40,//从第几条开始 即40 绝对数值形式
          },
        ]
      };

柱状图内置inside元素可以被点击的效果

dataZoom可以帮助我们解决鼠标滚轮滑动的效果,但是只有滑动没有点击,对我们的用户也是一个不太友好的体验,所以我们需要给内置inside元素设置一个点击事件,完成效果

 myCharts.on('click',  (params)=>{
     console.log(params)
     myCharts.dispatchAction({
            type: 'dataZoom',
            startValue: this.echartsNameList[Math.max(params.dataIndex - this.zoomSize / 2, 0)],
            endValue: this.echartsNameList[Math.min(params.dataIndex + this.zoomSize / 2, this.echartsNumList.length - 1)]
          });
     });

    分析步骤：
        1.myCharts为我们要控制的画布对象
        2.可以打印一下params是什么 它为这个我们当前画布的对象集合
        3.我们通过Echarts内部的dispatchAction方法进行添加属性
        4.添加一个dataZoom的属性,并向属性内部设置区域的偏移
        5.echartsNameList为我们自定义的数组
        6.zoomSize为我们自定义的数量