Apache ECharts 中多组数据单位自定义的解决方案

在数据可视化领域，Apache ECharts 作为一款优秀的开源可视化库，为开发者提供了丰富的配置选项。在实际应用中，我们经常会遇到需要在多组数据展示时添加不同单位的需求，特别是在折线图等包含多系列数据的图表中。

问题背景

当我们在ECharts中展示包含多组数据的图表时，比如一个折线图同时显示"重量"和"体积"两个指标，通常需要在数值后面添加不同的单位（如"g"和"kg"）。直接使用全局的valueFormatter会遇到无法区分不同数据系列的局限。

解决方案

ECharts提供了更灵活的配置方式，允许我们为每个数据系列单独设置格式化函数：

1. 系列级别的valueFormatter：可以为每个series单独配置valueFormatter，这样就能针对不同系列使用不同的单位显示。

2. 数据项级别的格式化：ECharts甚至支持为单个数据项设置不同的格式化方式，提供了极高的灵活性。

实现示例

option = {
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '重量',
      type: 'line',
      data: [120, 132, 101, 134, 90],
      tooltip: {
        valueFormatter: value => value + ' g'
      }
    },
    {
      name: '体积',
      type: 'line',
      data: [220, 182, 191, 234, 290],
      tooltip: {
        valueFormatter: value => value + ' m³'
      }
    }
  ]
};

最佳实践

1. 保持一致性：同一系列中的所有数据应该使用相同的单位，避免混淆。

2. 考虑可读性：单位应该简洁明了，必要时可以使用国际标准单位。

3. 响应式设计：对于响应式布局，考虑单位显示在不同尺寸下的可读性。

4. 本地化考虑：如果应用需要支持多语言，单位的翻译也需要纳入考虑范围。

通过这种灵活的配置方式，开发者可以轻松实现多组数据不同单位的展示需求，同时保持图表的整洁和美观。ECharts的这种设计充分体现了其对开发者友好和灵活可配置的特点。