echarts使用记录翻页，事件

Posted 2020-11-04 古兰精

1、有时候legend比较多的时候，需要做翻页比较好，有个属性legend的type属性设置为scroll，然后animation可以控制动画，官方文档均可查。

　　再就是scrollDataIndex，就是默认从哪一项开始翻页。

　　然后有个问题就是虽然legend可以显示分页，但是series却没法跟随legend同步，而是全部显示，这点需要修改，就会涉及另一属性selected，是个对象，设置name为false就可以选中让series里面的线条消失，这是一个思路。

{  
　　‘2018-05-02‘ : false,  
　　‘2018-05-03‘ : false　　//不想显示的都设置成false  
}

2、再就是echart的事件，如果触发了某事件，可以通过 myChart.on(‘eventName‘,callback) 获取事件，下面就是我设置legend翻页series跟随legend同步变化的事件监听

legend: {
    data:this.legrend,
    type:‘scroll‘,
    width:‘700‘,
    animation:false,
    scrollDataIndex:this.scrollDataIndex,
    selected: this.legrendUnSelect
},

myLogLine.on(‘legendScroll‘,(params) => {
    let index = params.scrollDataIndex;
    let    len = this.series.length;
　　//后翻页
    if((index + 1)%6 ==0){
        this.scrollDataIndex = index + 1;
        for(let i=0;i<len;i++){
            this.legrendUnSelect[this.series[i].name] = (i > index && i - index <= 6) ? true : false;
        }
    }
　　//前翻页
    if((index -1)%6 ==0){
        this.scrollDataIndex = index - 1;
        for(let i=0;i<len;i++){
            this.legrendUnSelect[this.series[i].name] = (i+2 > index && i+2 - index <= 6) ? true : false;
        }
    }
    console.log(this.legrendUnSelect)
    //myLogLine.setOption(option);
    this.drawLine();
})

　　再一个就是legend我想控制它只显示几个，但是一直没查到方法，试了几种也不行，这个需要对整个配置项比较清楚，目前没精力去通读这个，所以用了一个粗暴的犯法就是设置  legend  的 width 属性给个固定值，这样legend就会固定显示多少个了。如果有读者对echart比较熟的，欢迎留言赐教，谢谢。