ecahrts 饼图数据过多显示不全问题解决

ecahrts 饼图数据过多显示不全问题解决

问题如下：

解决后显示如下：（默认显示 6个数据，点击右侧对应显示在图表上）

具体实现：

function echart1(){		
	var seriesData = [];  // options 中的data 数据
	let selected={} // 决定图表中显示的个数
	let sysvionDistributionList=allData.sysvionDistributionList
	for(let i=0;i< sysvionDistributionList.length;i++){
		let name=sysvionDistributionList[i].sysVision
		seriesData.push({
            name:sysvionDistributionList[i].sysVision,
            value:sysvionDistributionList[i].fail
        });
		selected[name] = i < 6; //这里是关键： 限制图表中起始显示 6个，这里必须保证 name 不为空
	}
	/*以上是对 后台返回数据的一个处理 */
	seriesData=seriesData.filter(item=>{ return item.value!=0}) // 过滤掉不需要显示的数据
	let sum=0;
	seriesData.forEach(item=>{
		if(item.value)
			sum += Number(item.value)
	})//二级标题中显示的总数
	var w = $('#chart8').width();          // 获取容器实际宽度
	$('#ZD4').css('width',w);        // 赋予图表容器宽度值
	var myChart1 = echarts.init(document.getElementById('ZD4'));         // 初始化图表并设置参数
	option = {
			title: {
				zlevel: 0,
				text: '失败总数',
				subtext: sum,
				top: '44%',
				left: '39%',
				textAlign:'center',
				textStyle: {
					color: '#333',
					fontSize: 12,
					lineHeight: 16,
					fontWeight: 'normal'
				},
				subtextStyle: {
					color: '#333',
					fontSize: 24,
					lineHeight: 40,
				}
			},
			legend:{
		 		type: 'scroll', // 数据过多时，分页显示
		 		orient: 'vertical',
		        right: 10,
		        top: 20,
		        bottom: 20,
		        selected:selected  //这里默认显示数组中前六个，如果不设置，则所有的数据都会显示在图表上
		    }, 
			grid: {
				left: '6%',
				right: '6%',
				bottom: '2%',
				top: '2%',
				height: 270,
				containLabel: true,

			},
			tooltip: {
				trigger: 'item',
				formatter: '{a} <br/>{b} : {c} ({d}%)'
			},
			toolbox: {
				show: false,
			},
			series: [{
				name: '',
				type: 'pie',
				radius: [50, 100],
				center: ['40%', '50%'],
				position: 'center',
				formatter: '{b}: {d}%',
				roseType: 'radius',
				label: {
					show: true,
					formatter: '{b}: {d}%',
				},
				emphasis: {
					label: {
						show: false,
						formatter: '{b}: {d}%',
					}
				},
				data: seriesData
			}] 
	};
	myChart1.setOption(option);
}