echarts legend formatter用法

Echarts Legend Formatter 用法

Echarts 是一款基于 JavaScript 的数据可视化库，它提供了一种简单易用的方式来创建交互式的图表和地图。在 Echarts 中，Legend（图例）是用来标示不同数据系列的颜色与名称的重要组件。而在一些情况下，我们可能需要自定义 Legend 中的标签格式以适应特定的需求，这时就可以使用 Echarts 的 Legend Formatter。

Echarts 提供了丰富的格式化方式来定制 Legend 中的标签，下面我们来介绍一些常用的用法。

1. 使用函数进行自定义格式化

Echarts 允许我们使用函数来自定义 Legend 中的标签格式。通过在配置项中传入一个函数，我们可以根据数据的值来返回一个新的标签。函数接收两个参数：value（当前数据项的值）和 name（当前数据项的名称）。假设我们有如下的数据：

```javascript var data = [

{value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ]; ```

我们可以使用以下的方式来自定义 Legend 中的标签： ```javascript

formatter: function(value, name) { return name + ' : ' + value; } ```

这样，Legend 中的标签就会显示为名称和对应的值。 2. 使用字符串模板进行格式化

除了使用函数外，Echarts 还支持使用字符串模板来自定义 Legend 中标签的格式。通过在字符串中使用 `{xxx}` 的形式，并在配置项中设置 `formatter` 为对应的字符串模板，我们可以动态地将数据的值或名称插入到标签中。下面是一个示例：

```javascript

formatter: '{name} : {value}' ```

同样的，根据上述的数据，Legend 中的标签会根据模板显示为对应的名称和值。

3. 使用回调函数进行更复杂的格式化

除了简单的值和名称的拼接外，有时我们还需要更复杂的格式化需求。Echarts 提供了回调函数来满足这种情况。回调函数可以执行一些特定的逻辑操作，并返回最终的标签字符串。下面是一个示例：

```javascript

formatter: function(value, name) {

if (value > 1000) {

return name + ' : ' + value + ' (超过1000)'; } else {

return name + ' : ' + value + ' (未超过1000)'; } } ```

通过回调函数，我们可以根据数据的具体情况来返回不同的标签格式。 总结：

Echarts Legend Formatter 提供了多种灵活的方式来定制 Legend 中的标签格式。我们可以使用函数、字符串模板或回调函数来满足不同的需求。无论是简单的拼接还是复杂的逻辑操作，都可以通过合适的方式来实现自定义的标签格式。这使得我们在使用 Echarts 创建图表时能够更好地展示数据并满足特定的需求。