富文本样式设置

富文本样式设置

ECharts 提供了丰富的富文本样式配置能力，允许在图表元素中嵌入复杂的文本格式。通过富文本样式，可以实现多行文本、不同颜色、字体大小、对齐方式等混合排版效果，极大增强了数据可视化的表现力。

富文本基本语法

ECharts 富文本使用类似 HTML 的标签语法，但采用更简洁的格式。基本结构如下：

{
  text: '{a|这段文本是红色的}{b|这段文本是蓝色的}',
  rich: {
    a: {
      color: 'red'
    },
    b: {
      color: 'blue'
    }
  }
}

在这个例子中，{a|...} 定义了一个样式块，a 是样式名称，rich 对象中定义了对应样式的具体属性。

常用样式属性

富文本支持多种样式属性，以下是一些常用配置：

rich: {
  styleName: {
    // 颜色
    color: '#333',
    // 字体大小
    fontSize: 14,
    // 字体粗细
    fontWeight: 'bold',
    // 字体家族
    fontFamily: 'Microsoft YaHei',
    // 背景色
    backgroundColor: '#eee',
    // 高度
    height: 30,
    // 行高
    lineHeight: 30,
    // 边框
    borderColor: '#333',
    borderWidth: 1,
    borderType: 'solid',
    // 内边距
    padding: [5, 10, 5, 10],
    // 圆角
    borderRadius: 4,
    // 阴影
    shadowColor: 'rgba(0,0,0,0.5)',
    shadowBlur: 5,
    shadowOffsetX: 3,
    shadowOffsetY: 3
  }
}

多行文本与对齐

富文本支持多行文本布局，可以通过 width 和 align 属性控制：

option = {
  series: [{
    type: 'pie',
    label: {
      formatter: '{title|多行文本示例}\n{content|这是第二行内容}',
      rich: {
        title: {
          fontSize: 18,
          fontWeight: 'bold',
          color: '#333',
          align: 'center'
        },
        content: {
          fontSize: 14,
          color: '#999',
          align: 'center'
        }
      }
    }
  }]
};

图标与文本混合

富文本可以与图标字体（如 Font Awesome）结合使用：

option = {
  xAxis: {
    data: ['周一', '周二', '周三', '周四', '周五'],
    axisLabel: {
      formatter: '{icon|} {value|{value}}',
      rich: {
        icon: {
          fontFamily: 'FontAwesome',
          fontSize: 16,
          color: '#FF6B81'
        },
        value: {
          fontSize: 12,
          padding: [0, 0, 0, 5]
        }
      }
    }
  }
};

复杂布局示例

下面是一个包含多种样式的复杂富文本示例：

option = {
  series: [{
    type: 'bar',
    data: [120, 200, 150, 80, 70],
    label: {
      show: true,
      position: 'top',
      formatter: [
        '{title|销售数据}',
        '{divider|}',
        '{item|产品A} {value|120} {unit|万元}',
        '{item|产品B} {value|200} {unit|万元}',
        '{item|产品C} {value|150} {unit|万元}'
      ].join('\n'),
      rich: {
        title: {
          color: '#333',
          fontSize: 16,
          fontWeight: 'bold',
          align: 'center'
        },
        divider: {
          height: 1,
          backgroundColor: '#ddd',
          width: '100%'
        },
        item: {
          width: 60,
          color: '#666'
        },
        value: {
          color: '#409EFF',
          fontWeight: 'bold',
          padding: [0, 5]
        },
        unit: {
          color: '#999',
          fontSize: 10
        }
      }
    }
  }]
};

动态数据绑定

富文本支持通过回调函数动态生成内容：

option = {
  series: [{
    type: 'line',
    data: [120, 200, 150, 80, 70],
    label: {
      show: true,
      formatter: function(params) {
        return `{value|${params.value}} {trend|${params.value > 100 ? '↑' : '↓'}}`;
      },
      rich: {
        value: {
          fontSize: 14
        },
        trend: {
          fontSize: 12,
          color: function(params) {
            return params.value > 100 ? '#F56C6C' : '#67C23A';
          }
        }
      }
    }
  }]
};

特殊字符处理

在富文本中使用特殊字符需要进行转义：

option = {
  series: [{
    type: 'pie',
    label: {
      formatter: '{a|{b}: }{c|{c} \\{单位\\}}',
      rich: {
        a: {
          color: '#333'
        },
        c: {
          color: '#999',
          fontStyle: 'italic'
        }
      }
    }
  }]
};

性能优化建议

对于大量使用富文本的图表，可以考虑以下优化措施：

1. 尽量减少富文本块的数量
2. 复用相同的样式定义
3. 避免在动画过程中频繁更新富文本内容
4. 对于静态内容，可以考虑预渲染为图片

// 优化示例：复用样式
const commonRich = {
  header: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#333'
  },
  body: {
    fontSize: 12,
    color: '#666'
  }
};

option = {
  series: [{
    type: 'scatter',
    label: {
      formatter: '{header|标题}\n{body|内容}',
      rich: commonRich
    }
  }]
};

浏览器兼容性考虑

虽然 ECharts 的富文本功能在现代浏览器中表现良好，但在一些旧版本浏览器中可能需要特别注意：

1. 某些 CSS3 属性（如阴影、渐变）可能不支持
2. 字体加载可能需要额外处理
3. 复杂的富文本布局在性能较差的设备上可能出现渲染延迟

// 兼容性处理示例
option = {
  series: [{
    type: 'bar',
    label: {
      formatter: function() {
        // 根据浏览器能力返回不同的富文本
        return isOldBrowser ? '简化文本' : '{rich|富文本内容}';
      },
      rich: {
        rich: {
          color: '#409EFF',
          fontSize: 14
        }
      }
    }
  }]
};

与其它 ECharts 功能的结合

富文本可以与 ECharts 的其它功能无缝结合，例如：

1. 与 tooltip 结合增强提示框内容
2. 与 axisLabel 结合创建更直观的坐标轴标签
3. 与 legend 结合创建自定义图例样式

// 与 tooltip 结合的示例
option = {
  tooltip: {
    formatter: function(params) {
      return `
        {header|${params[0].name}}
        {divider|}
        {item|数值} {value|${params[0].value}}
        {item|系列} {series|${params[0].seriesName}}
      `;
    },
    rich: {
      header: {
        fontSize: 16,
        color: '#333'
      },
      divider: {
        height: 1,
        backgroundColor: '#ddd',
        width: '100%',
        margin: [5, 0]
      },
      item: {
        width: 40,
        color: '#666'
      },
      value: {
        color: '#409EFF',
        fontWeight: 'bold'
      },
      series: {
        color: '#67C23A'
      }
    }
  }
};