Echarts圆环图设置Legend数据对齐百分比样式，使用Rich富文本标签和Formatter函数

2023-12-12 17:03:36

在Echarts中自定义Legend样式：打造更美观易读的图表

Echarts作为一款强大的可视化库，允许用户创建交互式和引人入胜的图表。其中的Legend（图例）组件对于帮助用户理解图表中显示的数据至关重要。然而，默认的Legend样式可能过于单调，难以阅读。本博客将探讨如何使用Rich富文本标签和Formatter函数优化Echarts的Legend样式，从而提升图表的美观度和可读性。

了解Echarts的Legend

Legend（图例）是Echarts中一个用于显示数据项名称及其对应符号的组件。它通常位于图表右侧或下方。当鼠标悬停在Legend中的数据项上时，图表中的对应数据项会被突出显示。

使用Rich富文本标签优化Legend样式

Rich富文本标签允许用户使用HTML和CSS样式自定义Legend中的数据项文本。通过使用Rich富文本标签，可以实现以下效果：

更改数据项文本的颜色、字体大小、字体样式等。
为数据项文本添加背景色或边框。
在数据项文本中添加图标或图像。

示例：

option = {
  legend: {
    // 使用Rich富文本标签设置Legend中的数据项文本样式
    rich: {
      name: {
        color: '#fff',
        fontSize: 16,
        fontWeight: 'bold'
      },
      value: {
        color: '#999',
        fontSize: 12
      },
      icon: {
        backgroundColor: '#f00',
        borderRadius: '50%',
        width: 10,
        height: 10
      }
    },
    // ... 其他 Legend 选项
  },
  // ... 其他 Echarts 选项
};

使用Formatter函数优化Legend样式

Formatter函数允许用户自定义Legend中的数据项文本内容。通过使用Formatter函数，可以实现以下效果：

在数据项文本中添加前缀或后缀。
将数据项文本转换为百分比或其他格式。
根据数据项值显示不同的文本内容。

示例：

option = {
  legend: {
    // ... 其他 Legend 选项
    // 使用Formatter函数设置Legend中的数据项文本内容
    formatter: function (name, value, index) {
      // 将数据项文本转换为百分比格式
      var percent = value / this.getData().getSum('value') * 100;
      // 返回自定义的Legend数据项文本内容
      return '{name|' + name + '}{value|' + value + '}{percent|' + percent.toFixed(2) + '%}';
    }
  },
  // ... 其他 Echarts 选项
};