echarts 饼图数据过多时的显示问题?

代码如下:

 var option = {
            title: {
                text: '',
                subtext: '',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{b} <br/>  {c}: ({d}%)"
            },
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: '50%',
                    center: ['50%', '60%'],
                    data: [
                        {
                            "value": "455500.00",
                            "name": "A",
                            "color": "#FF1493"
                        },
                        {
                            "value": "0.00",
                            "name": "B",
                            "color": "#2F4F4F"
                        },
                        {
                            "value": "3304900.00",
                            "name": "C",
                            "color": "#A9A9A9"
                        },
                        {
                            "value": "3304900.00",
                            "name": "C",
                            "color": "#A9A9A9"
                        },
                        {
                            "value": "3304900.00",
                            "name": "C",
                            "color": "#A9A9A9"
                        },
                        {
                            "value": "3304900.00",
                            "name": "C",
                            "color": "#A9A9A9"
                        }
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        },
                        normal: {
                            label: {
                                show: true,
                                formatter: '{b}:{d}%'
                            },
                            labelLine: {show: true}
                        }
                    }
                }
            ]
        };
        myChart.setOption(option)

想实现的效果:
当数据过多时,比如超过5条,其余部分归为others,右边再有一个列表显示others里面每项的数据,看了echarts 文档里面没有这种功能,有什么办法实现吗?
自己想到的办法就是把把others的数据拆出来用html渲染一下
echarts.png

阅读 10.2k
2 个回答

https://www.echartsjs.com/zh/...
Tooltip可能符合你的要求,但是超过五条自动归类为Others的话可能要手动去实现,然后在Tooltip渲染你的详细数据

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题