Apache ECharts 5.2.0 新特性

全局过渡动画

自然流畅的过渡动画一直是 Apache ECharts 中一项非常重要的功能。通过避免数据更新时的突变，它不仅提升了视觉效果，也为表达数据的关联和演变提供了可能。因此，在 5.2.0 中，我们进一步增强了这一动画能力。接下来，我们将看到这种全局过渡动画（Universal Transition）如何为图表增加表现力和叙事能力。

在之前的版本中，过渡动画有一定的局限性：它们只能用于相同形状的位置、大小变换，并且只能在同类型的系列上工作。例如，下面的例子反映了饼图中扇区形状的变化所体现的数据百分比变化。

function makeRandomData() {
  return [
    {
      value: Math.random(),
      name: 'A'
    },
    {
      value: Math.random(),
      name: 'B'
    },
    {
      value: Math.random(),
      name: 'C'
    }
  ];
}
option = {
  series: [
    {
      type: 'pie',
      radius: [0, '50%'],
      data: makeRandomData()
    }
  ]
};

setInterval(() => {
  myChart.setOption({
    series: {
      data: makeRandomData()
    }
  });
}, 2000);
在线示例

而从 5.2.0 开始，我们引入了全局过渡动画，这是一个更强大的动画特性。有了它，过渡不再局限于同类型的系列之间。现在，我们可以使用这种跨系列的变形动画，在任何类型的系列和任何类型的形状之间进行动画过渡。

这有多酷？让我们一起来看看！

跨系列的变形过渡

通过设置 universalTransition: true 来开启全局过渡动画特性，从饼图切换到柱状图，或从柱状图切换到散点图，甚至在旭日图（Sunburst）和层级收纳图（Treemap）等更复杂的图表之间，都可以自然地进行变形过渡。

如下所示，在饼图和柱状图之间切换。

const dataset = {
  dimensions: ['name', 'score'],
  source: [
    ['Hannah Krause', 314],
    ['Zhao Qian', 351],
    ['Jasmin Krause ', 287],
    ['Li Lei', 219],
    ['Karle Neumann', 253],
    ['Mia Neumann', 165],
    ['Böhm Fuchs', 318],
    ['Han Meimei', 366]
  ]
};
const pieOption = {
  dataset: [dataset],
  series: [
    {
      type: 'pie',
      // associate the series to be animated by id
      id: 'Score',
      radius: [0, '50%'],
      universalTransition: true,
      animationDurationUpdate: 1000
    }
  ]
};
const barOption = {
  dataset: [dataset],
  xAxis: {
    type: 'category'
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      // associate the series to be animated by id
      id: 'Score',
      // Each data will have a different color
      colorBy: 'data',
      encode: { x: 'name', y: 'score' },
      universalTransition: true,
      animationDurationUpdate: 1000
    }
  ]
};

option = barOption;

setInterval(() => {
  option = option === pieOption ? barOption : pieOption;
  // Use the notMerge form to remove the axes
  myChart.setOption(option, true);
}, 2000);
在线示例

更多常用图表间的过渡。

这种过渡不再局限于基础的折、柱、饼图，还可以在柱状图和地图之间进行，

或者在旭日图和层级收纳图之间，甚至在非常灵活的自定义系列之间也可以进行过渡。

注意，你需要配置系列 id，以确保需要进行动画过渡的系列之间存在一一对应关系。

按需引入时需要手动导入该功能。

import { UniversalTransition } from 'echarts/features';
echarts.use([UniversalTransition]);

数据分裂和合并动画

除了常见的数据值更新外，有时我们在交互后还会遇到数据聚合、下钻等更新，此时我们无法直接应用一对一的过渡，而是需要使用分裂和合并等更多动画效果来表达数据的变换。

为了能够表达数据之间可能存在的多对多联系，在 5.2.0 中我们引入了一个新概念 groupId。我们可以通过 series.dataGroupId 为整个系列设置组，或者通过更细粒度的 series.data.groupId 为每个数据项设置所属的组。如果你使用 dataset 来管理数据，则更简单，可以使用 encode.itemGroupId 来指定编码为 groupId 的维度。

例如，如果我们想为柱状图实现下钻动画，可以将下钻后的整组数据设置为相同的 groupId，从而与下钻前的数据相对应。

option = {
  xAxis: {
    data: ['Animals', 'Fruits', 'Cars']
  },
  yAxis: {},
  dataGroupId: '',
  animationDurationUpdate: 500,
  series: {
    type: 'bar',
    id: 'sales',
    data: [
      {
        value: 5,
        groupId: 'animals'
      },
      {
        value: 2,
        groupId: 'fruits'
      },
      {
        value: 4,
        groupId: 'cars'
      }
    ],
    universalTransition: {
      enabled: true,
      divideShape: 'clone'
    }
  }
};

const drilldownData = [
  {
    dataGroupId: 'animals',
    data: [
      ['Cats', 4],
      ['Dogs', 2],
      ['Cows', 1],
      ['Sheep', 2],
      ['Pigs', 1],
      ['Cows', 1],
      ['Sheep', 2],
      ['Pigs', 1]
    ]
  },
  {
    dataGroupId: 'fruits',
    data: [
      ['Apples', 4],
      ['Oranges', 2],
      ['Oranges', 2]
    ]
  },
  {
    dataGroupId: 'cars',
    data: [
      ['Toyota', 4],
      ['Opel', 2],
      ['Volkswagen', 2],
      ['Volkswagen', 2]
    ]
  }
];

myChart.on('click', event => {
  if (event.data) {
    const subData = drilldownData.find(data => {
      return data.dataGroupId === event.data.groupId;
    });
    if (!subData) {
      return;
    }
    myChart.setOption({
      xAxis: {
        data: subData.data.map(item => {
          return item[0];
        })
      },
      series: {
        type: 'bar',
        id: 'sales',
        dataGroupId: subData.dataGroupId,
        data: subData.data.map(item => {
          return item[1];
        }),
        universalTransition: {
          enabled: true,
          divideShape: 'clone'
        }
      },
      graphic: [
        {
          type: 'text',
          left: 50,
          top: 20,
          style: {
            text: 'Back',
            fontSize: 18
          },
          onclick: function() {
            myChart.setOption(option, true);
          }
        }
      ]
    });
  }
});
在线示例

有了 groupId，我们还可以实现更丰富的聚合和下钻动画。

数据聚合。

单个系列下钻为两个系列

全局过渡动画将表达数据关系和演变的能力提升到了一个新的水平，为你的可视化创作灵感插上了翅膀。

此时，我们知道你已经迫不及待想要尝试了。但别急，5.2.0 中还有更多值得一看的新特性。

调色盘取色策略

在上面的全局过渡动画示例中，你可能已经注意到我们使用了一个在之前版本中没有的 colorBy 配置。该配置也是我们在这个版本中新增的一个特性，用于为系列配置不同粒度的调色盘取色。该配置目前支持两种策略。

  • 'series' 按系列分配调色盘中的颜色，使同一系列中的所有数据都具有相同的颜色。
  • 'data' 根据数据项分配调色盘中的颜色，每个数据项使用不同的颜色。

以前，我们为每种类型的系列固定了这一策略，例如，柱状图固定为 'series'，饼图固定为 'data'。

现在有了这个新功能，我们可以为柱状图中的每个数据项分配不同的颜色。

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      colorBy: 'data'
    }
  ]
};
在线示例

或者在饼图中统一使用一种颜色。

option = {
  series: {
    type: 'pie',
    colorBy: 'series',
    radius: [0, '50%'],
    itemStyle: {
      borderColor: '#fff',
      borderWidth: 1
    },
    data: [
      {
        value: 335,
        name: 'Direct Visit'
      },
      {
        value: 234,
        name: 'Union Ad'
      },
      {
        value: 1548,
        name: 'Search Engine'
      }
    ]
  }
};
在线示例

这一配置使我们能够免去逐一寻找调色盘颜色并进行设置的麻烦，在特定场景下可能会提供便利。稍后我们将进一步增强此配置，以提供更多策略。

极坐标系柱状图标签

在这一版本中，我们实现了极坐标系下柱状图的标签，并支持丰富的标签位置配置。下面是一个在起点处显示标签的进度图。

option = {
  angleAxis: {
    show: false,
    max: 10
  },
  radiusAxis: {
    show: false,
    type: 'category',
    data: ['AAA', 'BBB', 'CCC', 'DDD']
  },
  polar: {},
  series: [
    {
      type: 'bar',
      data: [3, 4, 5, 6],
      colorBy: 'data',
      roundCap: true,
      label: {
        show: true,
        // Try changing it to 'insideStart'
        position: 'start',
        formatter: '{b}'
      },
      coordinateSystem: 'polar'
    }
  ]
};
在线示例

更多标签位置配置。

这种灵活的标签位置配置项极大地丰富了极坐标系柱状图的表现力，使文字能够清晰地与相应数据匹配。

空数据的饼图样式

在之前的版本中，如果饼图中没有数据，屏幕可能会完全空白。因为没有视觉元素，用户可能会怀疑是否存在 bug。

为了解决这个问题，在这一版本中，当没有数据时，我们将默认显示一个灰色的占位圆，以防止屏幕完全空白。我们可以通过 emptyCircleStyle 配置该占位圆的样式。

option = {
  series: [
    {
      type: 'pie',
      data: [],
      // showEmptyCircle: false,
      emptyCircleStyle: {
        // change the style to empty circle
        color: 'transparent',
        borderColor: '#ddd',
        borderWidth: 1
      }
    }
  ]
};
在线示例

如果你不想显示这个灰色圆圈，也可以设置 showEmptyCircle: false 将其关闭。

高维数据的性能增强

自 4.0 以来，我们引入了 dataset 来管理图表数据。然而，在一些具有极高维度（>100）数据的极端场景下，我们可能会遇到一些显著的性能下降，例如下面通过一千个系列可视化千维数据的场景（#11907），甚至可能导致卡顿。

const indices = Array.from(Array(1000), (_, i) => {
  return `index${i}`;
});
const option = {
  xAxis: { type: 'category' },
  yAxis: {},
  dataset: {
    // dimension: ['date', . . indices],
    source: Array.from(Array(10), (_, i) => {
      return {
        date: i,
        ... .indices.reduce((item, next) => {
          item[next] = Math.random() * 100;
          return item;
        }, {})
      };
    })
  },
  series: indices.map(index => {
    return { type: 'line', name: index };
  })
};

出现这种性能问题的原因是，我们根据需要对每个系列底层的高维数据集进行处理，并保存处理后的数据副本以及关于数据维度的元信息。这意味着在示例中必须处理并保存 1000 x 1000 个维度，这给内存和垃圾回收带来了巨大压力，导致高维情况下的性能剧烈下降。

在新版本中，我们针对这一问题进行了优化，使得所有系列尽可能共享数据集存储（是否共享取决于系列如何使用数据）。这种优化确保了内存不会随着数据集维度和系列的增加而膨胀，显著提升了这种极端场景下的初始化性能。刚才描述的示例的渲染时间也已降低到可以接受的 300 毫秒以内。

受益于此优化的不仅仅是这种高维场景。在使用大数据量的数据集时，由于数据共享，多个系列只需处理一次数据，因此也能带来显著的性能提升。

自定义系列的类型优化

自定义系列提供了一种非常灵活的方式来创建系列图形。与其他系列相比，自定义系列的学曲线可能有点陡峭。因此，在此版本中，我们进一步优化了自定义系列中核心方法 renderItem 的类型，对 renderItem 的参数和返回值类型进行了更精确的推断，从而可以根据返回的类型推断出可以设置元素的哪些属性。

series = {
  type: 'custom',
  renderItem(params) {
    return {
      type: 'group',
      // The group type uses children to store children of other types
      children: [
        {
          type: 'circle',
          // circle has the following configurable shape attributes
          shape: { r: 10, cx: 0, cy: 0 },
          // Configurable styles
          style: { fill: 'red' }
        },
        {
          type: 'rect',
          // rect has the following configurable shape properties
          shape: { x: 0, y: 0, width: 100, height: 100 }
        },
        {
          type: 'path',
          // Custom path shapes
          shape: { d: '...' }
        }
      ]
    };
  }
};

总结

如果你对 5.2.0 中的某些功能和优化感兴趣，可以尝试更新到最新版本的 Apache ECharts 并亲自体验。

如果你对 Apache ECharts 的后续计划感兴趣，也可以在 GitHub Milestone 关注我们的开发计划。欢迎作为贡献者加入我们（更多信息请查看 Wiki）。

完整更新日志

查看 更新日志

贡献者 在 GitHub 上编辑此页

pissang pissangOvilia Ovilia