锦上添花，ECharts实现“顶端装饰”初探

好的，现在就开始玩转ECharts，实现“顶端装饰”。

“玩转ECharts”系列，主要带你体验我们如何基于ECharts实现企业级大屏项目中那些应用广泛的奇奇怪怪图表。接下来我们先从基础图表开始，带你逐步了解实现这些图表样式的“小心机”。

我们本期将讲解如何在ECharts中实现“顶端装饰”。这是大屏中非常常见的图表展示形式，然而，ECharts自身并不提供“顶端装饰”的原生能力。那么，我们该怎么做呢？

首先，我们需要为图表顶部装饰出一个“容器”。通常来说，我们可以根据图表的大小给它一个固定值，或者基于坐标系的大小动态计算得到。这里，我们将坐标系的高度算出，再除以3，即为容器的高度，如下所示：

option.title = {
  // ...
  top: grid.top - grid.height / 3,
};

接着，我们使用一个矩形，从容器顶部起始，给“顶端装饰”画出填充色。

option.series = [{
  type: 'rect',
  // ...
  top: grid.top,
  height: grid.height / 3,
}];

当然，“顶端装饰”的本质还是一个文本，所以我们还得对填充色的区域加上文本标签。这里，为了让文本标签更好的跟我们的填充色区域匹配，我们需要先设置文本标签的样式，将文本标签的背景色设为与填充色区域相同的颜色。

option.series[0].label = {
  show: true,
  position: 'bottom',
  offset: [0, -10],
  color: '#f2f6fb',
  fontSize: 12,
  fontWeight: 'bold',
  padding: [0, 5],
  borderRadius: 4,
  backgroundColor: '#36486a',
  textBorderWidth: 1,
  borderColor: '#36486a',
};

最后，别忘了给文本标签加上需要展示的内容，这个内容最好是我们的数据值。

option.series[0].label.formatter = '{c}';

至此，“顶端装饰”就做好了。你也可以根据自己的需求给它加上边框等样式，具体做法都差不多，这里就不展开讲了。

好了，本期内容就到这里。希望对你有帮助。别忘了在评论区留言，分享你的想法。