为了使 ECharts 柱状图的 x 轴文字纵向显示，需要进行一些配置调整。具体来说，可以通过设置 xAxis 中的 axisLabel.rotation 属性值为 -90 或 90 来实现。

以下是详细步骤：

1. 引入 ECharts 库和对应主题

在 HTML 页面中引入 ECharts 库和对应主题，例如：

<!-- 引入 ECharts 库 -->
[removed]"https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js">[removed]

<!-- 引入 ECharts 主题 -->
[removed]"https://cdn.jsdelivr.net/npm/echarts/theme/macarons.js">[removed]

2. 准备数据源

准备柱状图所需的数据源，例如：

var data = [
  {value: 335, name: '直接访问'},
  {value: 310, name: '邮件营销'},
  {value: 234, name: '联盟广告'},
  {value: 135, name: '视频广告'},
  {value: 1548, name: '搜索引擎'}
];

3. 创建 ECharts 实例，并配置基本参数

创建一个 div 容器并指定它的 ID，用于渲染 ECharts 实例，例如：

id="chart" style="width: 600px; height: 400px;">

然后，在 JavaScript 中创建 ECharts 实例，并配置基本参数，例如：

// 创建 ECharts 实例
var myChart = echarts.init(document.getElementById('chart'), 'macarons');

// 配置基本参数
var option = {
  xAxis: {
    type: 'category',
    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
    axisLabel: {
      interval: 0, // 强制显示所有标签
      rotate: -90, // 设置旋转角度
    },
  },
  yAxis: {
    type: 'value',
  },
  series: [{
    name: '访问来源',
    type: 'bar',
    data: data,
  }],
};

// 使用指定的配置项和数据展示图表
myChart.setOption(option);

在这个例子中，我们设置了 xAxis 中 axisLabel 的 rotate 属性值为 -90，这将使 x 轴文字沿着垂直方向旋转，从而实现纵向显示。

4. 美化柱状图

除了基本参数之外，还可以对柱状图进行美化。例如，可以设置标题、颜色、动画效果等。以下是一个完整的例子：

// 创建 ECharts 实例
var myChart = echarts.init(document.getElementById('chart'), 'macarons');

// 准备数据源
var data = [
  {value: 335, name: '直接访问'},
  {value: 310, name: '邮件营销'},
  {value: 234, name: '联盟广告'},
  {value: 135, name: '视频广告'},
  {value: 1548, name: '搜索引擎'}
];

// 配置参数
var option = {
  title: {
    text: '柱状图示例',
    textStyle: {
      fontWeight: 'normal',
    },
  },
  tooltip: {},
  xAxis: {
    type: 'category',
    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
    axisLabel: {
      interval: 0, // 强制显示所有标签
      rotate: -90, // 设置旋转角度
    },
  },
  yAxis: {
    type: 'value',
  },
  series: [{
    name: '访问来源',
    type: 'bar',
    data: data,
    itemStyle: {
      color: '#0099CC',
    },
  }],
};

// 使用指定的配置项和数据展示图表
myChart.setOption(option);

在这个例子中，我们添加了标题和提示框，并设置了柱状图颜色

为了更加美观，我们还可以添加动画效果。通过设置 series 中的 animationDelay 属性和 animationDuration 属性来实现。例如：

// 配置参数
var option = {
  title: {
    text: '柱状图示例',
    textStyle: {
      fontWeight: 'normal',
    },
  },
  tooltip: {},
  xAxis: {
    type: 'category',
    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
    axisLabel: {
      interval: 0, // 强制显示所有标签
      rotate: -90, // 设置旋转角度
    },
  },
  yAxis: {
    type: 'value',
  },
  series: [{
    name: '访问来源',
    type: 'bar',
    data: data,
    itemStyle: {
      color: '#0099CC',
    },
    animationDelay: function (idx) {
      return idx * 50; // 延迟时间递增
    },
    animationDuration: 1000, // 动画时长
  }],
};

// 使用指定的配置项和数据展示图表
myChart.setOption(option);

在这个例子中，我们设置了动画延迟时间和动画时长，使柱状图在加载时呈现出渐进式增长的效果。

总结

通过以上步骤，我们成功地将 ECharts 柱状图的 x 轴文字纵向显示，并优化了柱状图的美观程度。需要注意的是，在实际开发中，可能需要根据具体需求对参数进行更加详细的配置。