ECharts 饼图的合并显示

        ECharts 提供了丰富的图表功能，其中饼图是一个常用的功能。

        但是很多时候由于设置的数据量过多，导致图表显示非常拥挤，不利于用户快速阅读，提取有效信息。如下图所示：

         此时可以将数据进行一下排序，将数值较小的数据进行合并显示，合并后的展示效果如下图所示：

 

        可以看到合并后，整个图表看起来更加简洁，更能快速的得到一个大概的占比比例信息，方便了信息提取。

        通过简单的代码处理就可以实现上述的数据合并展示：

        /**
         * 渲染饼图
         * @param eleId 渲染的容器Id
         * @param chartTitle 饼图标题（饼图上方展示）
         * @param seriesName 鼠标悬停时显示信息的标题
         * @param data 饼图绑定数据
        */
        function setPieChart(eleId, chartTitle, seriesName, data) {

            data = data.filter(d => d.value > 0);
            if (!data || data.length == 0) {
                data = [{ name: '暂无数据', value: 0 }];
            }

            //数据按数值从大到小排序
            data = data.sort((a, b) => { return b.value - a.value });

            const showCount = 9;    //单独显示的数据条数
            if (data.length > showCount) {
                //数据大于9条时将前9条单独显示
                let data9 = data.splice(0, 9);
                let leftSum = 0;
                //剩余数据合并
                data.forEach(d => { leftSum += d.value; });
                data = data9.concat({ name: '其他合计', value: leftSum });
            }

            let legendData = data.map(d => { return d.name; });

            let option = {
                title: {
                    text: chartTitle,
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: legendData
                },
                series: [
                    {
                        name: seriesName,
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: data,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        label: {
                            show: true,
                            formatter: '{b} :{c} ({d}%)',
                        }
                    }
                ]
            };

            let container = document.getElementById(eleId);
            let chart = echarts.init(container);
            chart.setOption(option);
            return chart;
        }
        
        //模拟数据
        let data = [    
                { name: "V 1.0.1", value: 4 },
                { name: "V 1.0.2", value: 5 },
                { name: "V 1.0.3", value: 6 },
                { name: "V 1.0.4", value: 7 },
                { name: "V 1.0.5", value: 8 },
                { name: "V 2.0.1", value: 9 },
                { name: "V 2.0.2", value: 10 },
                { name: "V 2.0.3", value: 11 },
                { name: "V 2.0.4", value: 12 },
                { name: "V 2.0.5", value: 13 },
                { name: "V 3.0.1", value: 34 },
                { name: "V 3.0.2", value: 35 },
                { name: "V 3.0.3", value: 36 },
                { name: "V 3.0.4", value: 37 },
                { name: "V 3.0.5", value: 38 },
                { name: "V 4.0.1", value: 39 },
                { name: "V 4.0.2", value: 40 },
                { name: "V 4.0.3", value: 41 },
                { name: "V 4.0.4", value: 42 },
                { name: "V 4.0.5", value: 43 },
                { name: "V 5.0.1", value: 44 },
                { name: "V 5.0.2", value: 45 },
                { name: "V 5.0.3", value: 46 },
                { name: "V 5.0.4", value: 47 },
                { name: "V 5.0.5", value: 48 },
                { name: "V 6.0.1", value: 49 },
                { name: "V 6.0.2", value: 50 },
                { name: "V 6.0.3", value: 51 },
                { name: "V 6.0.4", value: 52 },
                { name: "V 6.0.5", value: 53 },
                { name: "V 7.0.1", value: 154 },
                { name: "V 7.0.2", value: 155 },
                { name: "V 7.0.3", value: 156 },
                { name: "V 7.0.4", value: 157 },
                { name: "V 7.0.5", value: 158 },
                { name: "V 8.0.1", value: 159 },
                { name: "V 8.0.2", value: 160 },
                { name: "V 8.0.3", value: 361 },
                { name: "V 8.0.4", value: 462 },
                { name: "V 8.0.5", value: 563 },
            ];
            
            setPieChart("main", "终端版本统计", "版本数量", data);

                可根据需要调整需要单独显示的数据条数。