Rich text style settings

Rich Text Styling Settings

ECharts provides extensive rich text styling configuration capabilities, allowing complex text formatting to be embedded within chart elements. With rich text styling, mixed typesetting effects such as multi-line text, different colors, font sizes, and alignment methods can be achieved, greatly enhancing the expressive power of data visualization.

Basic Syntax of Rich Text

ECharts rich text uses a syntax similar to HTML but in a more concise format. The basic structure is as follows:

{
  text: '{a|This text is red}{b|This text is blue}',
  rich: {
    a: {
      color: 'red'
    },
    b: {
      color: 'blue'
    }
  }
}

In this example, {a|...} defines a style block, where a is the style name, and the rich object defines the specific properties of the corresponding style.

Common Style Attributes

Rich text supports various style attributes. Here are some commonly used configurations:

rich: {
  styleName: {
    // Color
    color: '#333',
    // Font size
    fontSize: 14,
    // Font weight
    fontWeight: 'bold',
    // Font family
    fontFamily: 'Microsoft YaHei',
    // Background color
    backgroundColor: '#eee',
    // Height
    height: 30,
    // Line height
    lineHeight: 30,
    // Border
    borderColor: '#333',
    borderWidth: 1,
    borderType: 'solid',
    // Padding
    padding: [5, 10, 5, 10],
    // Border radius
    borderRadius: 4,
    // Shadow
    shadowColor: 'rgba(0,0,0,0.5)',
    shadowBlur: 5,
    shadowOffsetX: 3,
    shadowOffsetY: 3
  }
}

Multi-Line Text and Alignment

Rich text supports multi-line text layout, which can be controlled using the width and align attributes:

option = {
  series: [{
    type: 'pie',
    label: {
      formatter: '{title|Multi-Line Text Example}\n{content|This is the second line}',
      rich: {
        title: {
          fontSize: 18,
          fontWeight: 'bold',
          color: '#333',
          align: 'center'
        },
        content: {
          fontSize: 14,
          color: '#999',
          align: 'center'
        }
      }
    }
  }]
};

Mixing Icons and Text

Rich text can be combined with icon fonts (e.g., Font Awesome):

option = {
  xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
    axisLabel: {
      formatter: '{icon|} {value|{value}}',
      rich: {
        icon: {
          fontFamily: 'FontAwesome',
          fontSize: 16,
          color: '#FF6B81'
        },
        value: {
          fontSize: 12,
          padding: [0, 0, 0, 5]
        }
      }
    }
  }
};

Complex Layout Example

Below is an example of rich text with multiple styles in a complex layout:

option = {
  series: [{
    type: 'bar',
    data: [120, 200, 150, 80, 70],
    label: {
      show: true,
      position: 'top',
      formatter: [
        '{title|Sales Data}',
        '{divider|}',
        '{item|Product A} {value|120} {unit|million}',
        '{item|Product B} {value|200} {unit|million}',
        '{item|Product C} {value|150} {unit|million}'
      ].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
        }
      }
    }
  }]
};

Dynamic Data Binding

Rich text supports dynamically generating content through callback functions:

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';
          }
        }
      }
    }
  }]
};

Special Character Handling

Special characters in rich text need to be escaped:

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

Performance Optimization Recommendations

For charts that extensively use rich text, consider the following optimization measures:

1. Minimize the number of rich text blocks.
2. Reuse the same style definitions.
3. Avoid frequently updating rich text content during animations.
4. For static content, consider pre-rendering as images.

// Optimization example: Reusing styles
const commonRich = {
  header: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#333'
  },
  body: {
    fontSize: 12,
    color: '#666'
  }
};

option = {
  series: [{
    type: 'scatter',
    label: {
      formatter: '{header|Title}\n{body|Content}',
      rich: commonRich
    }
  }]
};

Browser Compatibility Considerations

While ECharts' rich text features perform well in modern browsers, special attention may be needed in older browser versions:

1. Some CSS3 properties (e.g., shadows, gradients) may not be supported.
2. Font loading may require additional handling.
3. Complex rich text layouts may experience rendering delays on low-performance devices.

// Compatibility handling example
option = {
  series: [{
    type: 'bar',
    label: {
      formatter: function() {
        // Return different rich text based on browser capability
        return isOldBrowser ? 'Simplified text' : '{rich|Rich text content}';
      },
      rich: {
        rich: {
          color: '#409EFF',
          fontSize: 14
        }
      }
    }
  }]
};

Integration with Other ECharts Features

Rich text can be seamlessly integrated with other ECharts features, such as:

1. Combining with tooltips to enhance content.
2. Combining with axis labels to create more intuitive axis labels.
3. Combining with legends to create custom legend styles.

// Example of integration with tooltips
option = {
  tooltip: {
    formatter: function(params) {
      return `
        {header|${params[0].name}}
        {divider|}
        {item|Value} {value|${params[0].value}}
        {item|Series} {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'
      }
    }
  }
};