echarts传入series data，首次渲染formatter输出多5个0

Question

【Echarts动态图时序图series传入5个数据, formatter却多返回了5个0，导致第一次渲染5个0回来】
下面我是实现一个排行榜，使用echarts动态时序图，
首次渲染，只渲染一次
发现给seires传入5条数据，x和y轴都是5个，formatter返回了10条数据回来，其中多了5个0。

下面是options。

const option = {
                xAxis: {
                    max: 'dataMax',
                    axisLabel: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                },
                yAxis: {
                    type: 'category',
                    data: ['a', 'b', 'c', 'd', 'e'],
                    inverse: true,
                    max: 4,
                    axisLabel: {
                        show: true,
                        fontSize: 12,
                        formatter: (value, index) => '{'+index+'|}  {s|' + value + '}',
                        rich: richObject
                    },
                },
                series: [
                    {
                        realtimeSort: true,
                        name: 'X',
                        type: 'bar',
                        data: [12, 34, 56, 78, 90],
                        label: {
                            show: true,
                            precision: 1,
                            valueAnimation: true,
                            formatter: (params) => {
                                console.log('=value：', params.value);
                                if (!params.value) {
                                    return `0`
                                }
                                return params.value;
                            },
                        },
                        showBackground: true,
                        animation: true
                    }
                ],
                legend: {
                    show: false
                },
            };

Y轴data：['a', 'b', 'c', 'd', 'e']
X轴data：[12, 34, 56, 78, 90]
series formatter输出value，
=value：12
=value：34
=value：56
=value：78
=value：90
=value：0
=value：0
=value：0
=value：0
=value：0

Answer 1

回答引用自GPT-4o，由博主小ᶻZ࿆编写，若还有疑问可评论或留言：

题主的问题是，在Echarts中给series传入5条数据，formatter返回了10条数据，其中多了5个0。这可能是由于Echarts在渲染过程中默认填充数据所导致的。以下是一些可能的解决方法。

解决方案

1. 调整formatter中的条件检查

   • 在formatter中增加条件判断，仅在params.value有效时返回值，避免无效数据导致的多余0输出。

   label: {
       show: true,
       precision: 1,
       valueAnimation: true,
       formatter: (params) => {
           console.log('=value：', params.value);
           return params.value ? params.value : ''; // 避免返回0
       }
   }
   

2. 修改数据初始化

   • 确保传入的数据数组长度与yAxis标签数一致，避免Echarts自动填充空值。可以手动调整数据数组的长度或使用null填充。

3. 设置yAxis.max参数

   • 通过限制yAxis的最大显示数量控制显示的数据条数，确保图表只显示5条数据。

   yAxis: {
       type: 'category',
       data: ['a', 'b', 'c', 'd', 'e'],
       inverse: true,
       max: 4, // 限制显示数量
       axisLabel: {
           show: true,
           fontSize: 12,
           formatter: (value, index) => '{' + index + '|} {s|' + value + '}',
           rich: richObject
       }
   }
   

4. 启用dataZoom控制显示范围

   • 使用dataZoom控制视图中的数据范围以避免显示多余的数据。

   dataZoom: [
       {
           type: 'slider',
           start: 0,
           end: 100 // 设置显示数据范围
       }
   ]
   

优化代码示例

以下是完整的Echarts配置代码，结合以上解决方案确保formatter只输出有效数据。

const option = {
   xAxis: {
       max: 'dataMax',
       axisLabel: {
           show: false,
       },
       splitLine: {
           show: false,
       },
   },
   yAxis: {
       type: 'category',
       data: ['a', 'b', 'c', 'd', 'e'],
       inverse: true,
       max: 4, // 限制最大显示条数
       axisLabel: {
           show: true,
           fontSize: 12,
           formatter: (value, index) => '{' + index + '|} {s|' + value + '}',
           rich: richObject
       }
   },
   series: [
       {
           realtimeSort: true,
           name: 'X',
           type: 'bar',
           data: [12, 34, 56, 78, 90],
           label: {
               show: true,
               precision: 1,
               valueAnimation: true,
               formatter: (params) => {
                   return params.value ? params.value : ''; // 仅返回有效值
               }
           },
           showBackground: true,
           animation: true
       }
   ],
   legend: {
       show: false
   },
   dataZoom: [
       {
           type: 'slider',
           start: 0,
           end: 100
       }
   ]
};

希望以上方法能帮助题主解决多余0的问题。

如有帮助，题主可以帮忙采纳一下嘛，谢谢~