文字样式设置

文字样式设置

ECharts 提供了丰富的文字样式配置选项，可以自定义图表中各种文本元素的显示效果。通过合理的文字样式设置，能够显著提升图表的可读性和美观度。

基础文字样式

最基本的文字样式包括字体、大小、颜色等属性。在 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' 或数字值
• fontFamily: 字体类型，如 'Arial'、'Microsoft YaHei' 等
• fontSize: 字体大小，单位为像素

高级文字样式

除了基础样式，ECharts 还支持更复杂的文字效果：

文字阴影

textStyle: {
  shadowColor: 'rgba(0, 0, 0, 0.5)',
  shadowBlur: 10,
  shadowOffsetX: 3,
  shadowOffsetY: 3
}

文字描边

textStyle: {
  textBorderColor: '#000',
  textBorderWidth: 2,
  textBorderType: 'solid' // 可选 'solid' | 'dashed' | 'dotted'
}

文字背景

textStyle: {
  backgroundColor: 'rgba(255, 255, 255, 0.7)',
  padding: [5, 10],
  borderRadius: 4
}

富文本样式

ECharts 支持使用富文本格式，可以在同一文本块中使用不同的样式：

series: [{
  type: 'pie',
  data: [{
    value: 335,
    name: '{a|直接访问}\n{b|335}',
    label: {
      rich: {
        a: {
          color: '#999',
          fontSize: 14
        },
        b: {
          color: '#333',
          fontSize: 18,
          fontWeight: 'bold'
        }
      }
    }
  }]
}]

全局与局部样式

ECharts 支持在不同层级设置文字样式：

全局样式

option = {
  textStyle: {
    fontFamily: 'Arial'
  },
  // 其他配置...
};

组件级样式

title: {
  text: '组件级样式',
  textStyle: {
    color: '#f00'
  }
}

数据项级样式

series: [{
  data: [{
    value: 10,
    itemStyle: {
      color: '#ff0',
      textStyle: {
        fontSize: 16
      }
    }
  }]
}]

动态文字样式

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

label: {
  formatter: function(params) {
    return params.value > 100 ? 
      '{a|' + params.name + '}' : 
      '{b|' + params.name + '}';
  },
  rich: {
    a: {
      color: 'red'
    },
    b: {
      color: 'blue'
    }
  }
}

特殊场景的文字样式

坐标轴文字

xAxis: {
  axisLabel: {
    color: '#666',
    rotate: 45,
    margin: 15,
    formatter: function(value) {
      return value.length > 5 ? value.substring(0,5)+'...' : value;
    }
  }
}

图例文字

legend: {
  textStyle: {
    padding: [2, 0, 0, 0],
    lineHeight: 14
  }
}

提示框文字

tooltip: {
  textStyle: {
    fontSize: 14,
    color: '#fff'
  },
  backgroundColor: 'rgba(0,0,0,0.7)',
  extraCssText: 'box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);'
}

响应式文字样式

可以通过媒体查询实现响应式文字样式：

option = {
  // 基础配置
  media: [{
    query: {
      maxWidth: 600
    },
    option: {
      textStyle: {
        fontSize: 12
      }
    }
  }]
};

文字对齐与排列

ECharts 提供了多种文字对齐方式：

label: {
  align: 'center',  // 水平对齐：'left' | 'center' | 'right'
  verticalAlign: 'middle',  // 垂直对齐：'top' | 'middle' | 'bottom'
  lineHeight: 20,
  width: 100,
  overflow: 'truncate',  // 文字溢出处理：'none' | 'truncate' | 'break' | 'breakAll'
  ellipsis: '...'
}

文字动画效果

可以通过动画配置增强文字显示效果：

label: {
  show: true,
  animationDuration: 1000,
  animationEasing: 'elasticOut',
  animationDelay: function(idx) {
    return idx * 100;
  }
}

国际化文字处理

对于多语言场景，可以动态设置文字样式：

function setLang(lang) {
  option.title.textStyle.fontFamily = lang === 'zh' ? 
    'Microsoft YaHei' : 'Arial';
  myChart.setOption(option);
}

性能优化建议

对于大量文字渲染的场景，可以考虑以下优化：

label: {
  show: true,
  distance: 10,  // 适当增大距离减少重叠
  fontSize: 12,  // 使用较小字号
  formatter: function(params) {
    // 简化显示内容
    return params.name.substring(0,3);
  }
}