返回顶部

Echarts中的饼图的某块由于数据太小导致占比太小,图形上几乎看不见问题的解决方案

数据过多,且几个比较小的数据在一块扎堆

 

 解决方案  在series中的一个对象中  添加属性  minAngle

 

源码1,元数据部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
#其中的两个红色加粗的为数值非常小的,在饼图中根据数据占比会非常小,用肉眼几乎看不出来。let echartData = {
    inner: [
        {
            value: 300,
            unit: '件',
            name: '第一检查部'
        },
        {
            value: 100,
            unit: '件',
            name: '第二检查部'
        },
        {
            value: 10,
            unit: '件',
            name: '第三检查部'
        },
        {
            value: 160,
            unit: '件',
            name: '第四检查部'
        },
        {
            value: 1,
            unit: '件',
            name: '第五检查部'
        }
    ],
    outer: [
        {
            value: 100,
            unit: '件',
            name: '第一检查部'
        },
        {
            value: 300,
            unit: '件',
            name: '第二检查部'
        },
        {
            value: 400,
            unit: '件',
            name: '第三检查部'
        },
        {
            value: 400,
            unit: '件',
            name: '第四检查部'
        },
        {
            value: 3,
            unit: '件',
            name: '第五检查部'
        }
    ]
}

 源码2:echart中的series部分

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
series: [
        //最外层圆环
        
      
       {
           name: '外环',
           type: 'pie',
           minAngle: 10,  //设置扇形的最小占比
           radius: ['50%', '75%'],
           center: ["40%", "50%"],
           startAngle: '240',
           data: echartData.outer,
           labelLine: {
               normal: {
                   length: 20,
                   length2: 140,
                   lineStyle: {
                       color: '#e6e6e6'
                   }
               }
           },
           itemStyle: { // 此配置
               normal: {
                   borderWidth: 2,
                   borderColor: '#fff',
               },
               emphasis: {
                   borderWidth: 0,
                   shadowBlur: 10,
                   shadowOffsetX: 0,
                   shadowColor: 'rgba(0, 0, 0, 0.5)'
               }
           },
           label: {
               normal: {
                   position: 'inner',
                   formatter: params => {
                       return (
                           params.value + '件'
                       );
                   },
                   fontSize: 22,
                   color: '#000',
                   // padding: [0, -130, 25, -130],
               }
           },
       },
        
       {
           name: '内环',
           type: 'pie',
            minAngle: 10,
           radius: ['25%', '50%'],
           center: ["40%", "50%"],
           itemStyle: { // 此配置
              normal: {
                   borderWidth: 2,
                   borderColor: '#fff',
               },
               emphasis: {
                   borderWidth: 0,
                   shadowBlur: 10,
                   shadowOffsetX: 0,
                   shadowColor: 'rgba(0, 0, 0, 0.5)'
               }
           },
           label: {
               normal: {
                   position: 'inner',
                   formatter: params => {
                       return (
                           params.value + '件'
                       );
                   },
                   fontSize: 22,
                   color: '#000',
               }
           },
           labelLine: {
               normal: {
                   show: false
               }
           },
           startAngle: '230',
           data: echartData.inner
       }
   ]

  

设置前

图中的箭头为所指向的两个占比,内环占比和外环占比

 

 

设置后

 

 所以说通过  

1
<strong> minAngle   属性  设置度数,就可以直接设置一个最小的占比度数,可以防止扇形过小的问题</strong>

 

 

 

 

 

1
 
posted @   fen斗  阅读(13002)  评论(1编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
点击右上角即可分享
微信分享提示