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

以下是详细步骤：

1. 引入 ECharts 库和对应主题

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

[removed]"https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js">[removed]


[removed]"https://cdn.jsdelivr.net/npm/echarts/theme/macarons.js">[removed]

1. 准备数据源

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

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

1. 创建 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 轴文字沿着垂直方向旋转，从而实现纵向显示。

1. 美化柱状图

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

// 创建 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 轴文字纵向显示，并优化了柱状图的美观程度。需要注意的是，在实际开发中，可能需要根据具体需求对参数进行更加详细的配置。

你是否渴望进一步提升数据可视化的能力，让数据展示更加专业、高效呢？现在，有一门绝佳的课程能满足你的需求 ——Python 数据可视化 18 讲（PyEcharts、Matplotlib、Seaborn）。

学习入口：https://edu.cda.cn/goods/show/3842?targetId=6751&preview=0

这门课程完全免费，且学习有效期长期有效。由 CDA 数据分析研究院的张彦存老师精心打造，他拥有丰富的实战经验，能将复杂知识通俗易懂地传授给你。课程深入讲解 matplotlib、seaborn、pyecharts 三大主流 Python 可视化工具，带你从基础绘图到高级定制，还涵盖多元图表类型和各类展示场景。无论是数据分析新手想要入门，还是有基础的从业者希望提升技能，亦或是对数据可视化感兴趣的爱好者，都能从这门课程中收获满满。点击课程链接，开启你的数据可视化进阶之旅，让数据可视化成为你职场晋升和探索数据世界的有力武器！