Text style settings

Basics of Text Style Configuration

In ECharts, text styles are primarily configured using the textStyle property. This configuration can appear in various components such as titles, axis labels, legends, and tooltips. The basic structure is as follows:

option = {
  title: {
    text: 'Main Title',
    textStyle: {
      color: '#333',
      fontStyle: 'italic',
      fontWeight: 'bold',
      fontFamily: 'Microsoft YaHei',
      fontSize: 18
    }
  }
};

Common properties include:

• color: Text color, supporting hex, RGB, or color names
• fontStyle: Font style - normal (default), italic, or oblique
• fontWeight: Font weight - normal, bold, bolder, lighter, or numeric (100-900)
• fontFamily: Font type, e.g., 'Arial', 'Courier New', 'Microsoft YaHei'
• fontSize: Font size in pixels

Global vs. Local Style Configuration

ECharts supports text style configuration at two levels:

Global styles are set at the root level of the option:

option = {
  textStyle: {
    color: '#666',
    fontSize: 12
  },
  // Other configurations...
};

Local styles are specific to individual components:

option = {
  title: {
    text: 'Chart Title',
    textStyle: {
      color: '#f00',
      fontSize: 16
    }
  },
  xAxis: {
    axisLabel: {
      textStyle: {
        color: '#0f0'
      }
    }
  }
};

When global and local styles conflict, local styles take precedence. For example, in the above configuration, the title text will appear in red (#f00) rather than the global gray (#666).

Rich Text Formatting

ECharts 4.0+ supports rich text formatting, allowing multiple styles within a single text element:

option = {
  series: [{
    type: 'pie',
    data: [{
      value: 335,
      name: {
        // Rich text format
        formatter: [
          '{a|This text is red}',
          '{b|This text is green}',
          '{c|This text has a background}'
        ].join('\n'),
        rich: {
          a: {
            color: 'red',
            fontSize: 16
          },
          b: {
            color: 'green',
            fontSize: 20
          },
          c: {
            backgroundColor: '#333',
            color: '#fff',
            padding: [3, 5]
          }
        }
      }
    }]
  }]
};

Rich text formatting uses the rich property to define style classes, which are then applied to text using the syntax {styleClassName|textContent}. This is particularly useful for highlighting specific parts of text.

Dynamic Text Styling

Dynamic text styling can be achieved using callback functions:

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    axisLabel: {
      formatter: function(value, index) {
        return index % 2 === 0 
          ? `{bold|${value}}` 
          : `{normal|${value}}`;
      },
      rich: {
        bold: {
          fontWeight: 'bold',
          color: '#c23531'
        },
        normal: {
          fontWeight: 'normal',
          color: '#63869e'
        }
      }
    }
  }
};

In this example, x-axis labels display different styles based on their index: even indices appear in bold red, while odd indices appear in normal blue.

Special Scenario Text Styling

Donut chart center text styling example:

option = {
  series: [{
    type: 'pie',
    radius: ['40%', '70%'],
    label: {
      show: false
    },
    emphasis: {
      label: {
        show: true,
        fontSize: '20',
        fontWeight: 'bold'
      }
    },
    data: [...],
    graphic: [{
      type: 'text',
      left: 'center',
      top: 'center',
      style: {
        text: 'Donut\nCenter Text',
        fill: '#333',
        fontSize: 20,
        fontWeight: 'bold',
        textAlign: 'center'
      }
    }]
  }]
};

Gauge chart value styling:

option = {
  series: [{
    type: 'gauge',
    detail: {
      formatter: '{value}%',
      offsetCenter: [0, '70%'],
      color: 'auto',
      fontSize: 30,
      fontWeight: 'bolder',
      rich: {
        unit: {
          fontSize: 15,
          color: '#666'
        }
      }
    },
    data: [{ value: 75 }]
  }]
};

Text Shadow and Outline Effects

ECharts supports adding shadows and outlines to text:

option = {
  title: {
    text: 'Title with Shadow and Outline',
    textStyle: {
      fontSize: 24,
      color: '#fff',
      // Text shadow
      shadowColor: 'rgba(0, 0, 0, 0.5)',
      shadowBlur: 10,
      shadowOffsetX: 2,
      shadowOffsetY: 2,
      // Text outline
      textBorderColor: '#000',
      textBorderWidth: 2,
      // Text background
      backgroundColor: 'rgba(50, 50, 50, 0.7)',
      padding: [5, 10]
    }
  }
};

These effects are particularly useful on dark backgrounds to enhance text readability. textBorderWidth sets the outline width, textBorderColor sets the outline color, and shadow effects are controlled by the shadow series of properties.

Responsive Text Sizing

For responsive designs, you can use the resize event to dynamically adjust text size:

myChart.on('resize', function(params) {
  const width = params.width;
  let fontSize = 12;
  
  if (width > 800) {
    fontSize = 16;
  } else if (width > 500) {
    fontSize = 14;
  }
  
  myChart.setOption({
    textStyle: {
      fontSize: fontSize
    }
  });
});

Alternatively, use viewport-relative units like vh/vw:

option = {
  title: {
    text: 'Responsive Title',
    textStyle: {
      fontSize: '3vw'  // 3% of viewport width
    }
  }
};

Text Styling in Multilingual Environments

When handling multilingual text, you may need to adjust styles for different languages:

function getOption(lang) {
  const isCJK = ['zh', 'ja', 'ko'].includes(lang);
  return {
    title: {
      text: lang === 'zh' ? '标题' : 'Title',
      textStyle: {
        fontFamily: isCJK ? 'Microsoft YaHei' : 'Arial',
        fontSize: isCJK ? 16 : 14
      }
    },
    tooltip: {
      textStyle: {
        fontFamily: isCJK ? 'Microsoft YaHei' : 'Arial'
      }
    }
  };
}

For CJK (Chinese, Japanese, Korean) text, larger font sizes and specific typefaces are typically required to ensure readability.