echarts使用记录(二)legend翻页,事件,数据集,设置y轴最大/小值,让series图形从右侧出往左移动

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',
    '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比较熟的,欢迎留言赐教,谢谢。

3、ECharts 4 新提供了 数据集dataset)组件来单独声明数据

radar: [
    {
        indicator: [
            {text: '规范', max: 100},
            {text: '性能', max: 100},
            {text: '高可用', max: 100},
            {text: '安全', max: 100},
            {text:'稳定',max:100}
        ],
        center: ['50%','50%'],
        radius: 80
    }
],
    dataset:{
        dimensions:['normative','performance','recovery','safety','stability'],
    source:[this.radarData]
},
series:[ 
    {
        type: 'radar',
        tooltip: {
            trigger: 'item'
        },
        itemStyle: {normal: {areaStyle: {type: 'default'}}},
        name:'指标值'
        /*data: [
            {
                //value: this.radarValues,
                name: '指标值'
            }
        ]*/
    }
]
//数据
Mock.mock(//api/getSuggestion/,'get',{
    'normative':'@integer(1,100)',
    'performance':'@integer(1,100)',
    'recovery':'@integer(1,100)',
    'safety':'@integer(1,100)',
    'stability':'@integer(1,100)'
})

4、当y轴为百分比的时候,通常需要设置最大值为100%,如果不设置则有时候会成120,这点需要增加配置

yAxis.max number, string
[ default: null ]

坐标轴刻度最大值。

可以设置成特殊值 'dataMax',此时取数据在该轴上的最大值作为最大刻度。

不设置时会自动计算最大值保证坐标轴刻度的均匀分布。

在类目轴中,也可以设置为类目的序数(如类目轴 data: ['类A', '类B', '类C'] 中,序数 2 表示 '类C'。也可以设置为负数,如 -3)。

当设置成 function 形式时,可以根据计算得出的数据最大最小值设定坐标轴的最小值。如:

max: function(value) {
    return value.max - 20;
}

其中 value 是一个包含 minmax 的对象,分别表示数据的最大最小值,这个函数应该返回坐标轴的最大值。

5、利用数组特性,让series图形从右侧出来

var array = [];
array.length = 50;
array.push(1);
array
//(51) [empty × 50, 1]

array[0]
//undefined
array[2]
//undefined
array[50]
//1

  如果图形默认只能显示50个点,那么先设置series的data的length为50,那么前50个点就会没有数据,显示不了图片。这样就利于做动画,让图形从右侧出来,慢慢往左移动

原文地址:https://www.cnblogs.com/goloving/p/9026544.html