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比较熟的，欢迎留言赐教，谢谢。
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，这点需要增加配置
坐标轴刻度最大值。
可以设置成特殊值 'dataMax'，此时取数据在该轴上的最大值作为最大刻度。
不设置时会自动计算最大值保证坐标轴刻度的均匀分布。
在类目轴中，也可以设置为类目的序数（如类目轴 data: ['类A', '类B', '类C'] 中，序数 2 表示 '类C'。也可以设置为负数，如 -3）。
当设置成 function 形式时，可以根据计算得出的数据最大最小值设定坐标轴的最小值。如：
max: function(value) { return value.max - 20; }其中 value 是一个包含 min 和 max 的对象，分别表示数据的最大最小值，这个函数应该返回坐标轴的最大值。
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个点就会没有数据，显示不了图片。这样就利于做动画，让图形从右侧出来，慢慢往左移动