文字样式设置

文字样式设置基础

ECharts中的文字样式设置主要通过textStyle配置项实现。这个配置项可以出现在标题、轴标签、图例、提示框等多个组件中。基本结构如下：

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

常用属性包括：

• color: 文字颜色，支持十六进制、RGB、颜色名称
• fontStyle: 字体风格，normal(默认)、italic、oblique
• fontWeight: 字体粗细，normal、bold、bolder、lighter或数字(100-900)
• fontFamily: 字体类型，如'Arial', 'Courier New', 'Microsoft YaHei'
• fontSize: 字体大小，单位为px

全局与局部样式设置

ECharts支持两种级别的文字样式设置：

全局样式通过textStyle设置在option根级别：

option = {
  textStyle: {
    color: '#666',
    fontSize: 12
  },
  // 其他配置...
};

局部样式则针对特定组件：

option = {
  title: {
    text: '图表标题',
    textStyle: {
      color: '#f00',
      fontSize: 16
    }
  },
  xAxis: {
    axisLabel: {
      textStyle: {
        color: '#0f0'
      }
    }
  }
};

当全局和局部样式冲突时，局部样式优先级更高。例如上面的配置中，标题文字会显示为红色(#f00)而非全局的灰色(#666)。

富文本样式设置

ECharts 4.0+支持富文本格式，可以在单个文本中使用多种样式：

option = {
  series: [{
    type: 'pie',
    data: [{
      value: 335,
      name: {
        // 富文本格式
        formatter: [
          '{a|这段文本是红色的}',
          '{b|这段文本是绿色的}',
          '{c|这段文本有背景色}'
        ].join('\n'),
        rich: {
          a: {
            color: 'red',
            fontSize: 16
          },
          b: {
            color: 'green',
            fontSize: 20
          },
          c: {
            backgroundColor: '#333',
            color: '#fff',
            padding: [3, 5]
          }
        }
      }
    }]
  }]
};

富文本格式通过rich属性定义样式类，然后在文本中使用{样式类名|文本内容}的语法应用样式。这种方式特别适合需要突出显示部分文本的场景。

动态文字样式

可以通过回调函数实现动态文字样式：

option = {
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    axisLabel: {
      formatter: function(value, index) {
        return index % 2 === 0 
          ? `{bold|${value}}` 
          : `{normal|${value}}`;
      },
      rich: {
        bold: {
          fontWeight: 'bold',
          color: '#c23531'
        },
        normal: {
          fontWeight: 'normal',
          color: '#63869e'
        }
      }
    }
  }
};

这个例子中，x轴标签会根据索引值的奇偶性显示不同的文字样式，奇数索引显示为粗体红色，偶数索引显示为普通蓝色。

特殊场景的文字样式

环形图中心文字样式设置示例：

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: '环形图\n中心文字',
        fill: '#333',
        fontSize: 20,
        fontWeight: 'bold',
        textAlign: 'center'
      }
    }]
  }]
};

仪表盘数值样式设置：

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

文字阴影与描边效果

ECharts支持为文字添加阴影和描边效果：

option = {
  title: {
    text: '带阴影和描边的标题',
    textStyle: {
      fontSize: 24,
      color: '#fff',
      // 文字阴影
      shadowColor: 'rgba(0, 0, 0, 0.5)',
      shadowBlur: 10,
      shadowOffsetX: 2,
      shadowOffsetY: 2,
      // 文字描边
      textBorderColor: '#000',
      textBorderWidth: 2,
      // 文字背景
      backgroundColor: 'rgba(50, 50, 50, 0.7)',
      padding: [5, 10]
    }
  }
};

这些效果在深色背景上特别有用，可以增强文字的可读性。textBorderWidth设置描边宽度，textBorderColor设置描边颜色；阴影效果则通过shadow系列属性控制。

响应式文字大小

在响应式设计中，可以使用resize事件动态调整文字大小：

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
    }
  });
});

或者使用vh/vw单位实现视口相关的文字大小：

option = {
  title: {
    text: '响应式标题',
    textStyle: {
      fontSize: '3vw'  // 视口宽度的3%
    }
  }
};

多语言环境下的文字样式

处理多语言文本时，可能需要针对不同语言调整样式：

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

对于CJK(中日韩)文字，通常需要更大的字号和特定的字体才能保证可读性。