為了使 ECharts 柱狀圖的 x 軸文字縱向顯示，需要進行一些配置調整。具體來說，可以通過設置 xAxis 中的 axisLabel.rotation 屬性值為 -90 或 90 來實現(xiàn)。

以下是詳細步驟：

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. 準備數(shù)據源

準備柱狀圖所需的數(shù)據源，例如：

var data = [
  {value: 335, name: '直接訪問'},
  {value: 310, name: '郵件營銷'},
  {value: 234, name: '聯(lián)盟廣告'},
  {value: 135, name: '視頻廣告'},
  {value: 1548, name: '搜索引擎'}
];

1. 創(chuàng)建 ECharts 實例，并配置基本參數(shù)

創(chuàng)建一個 div 容器并指定它的 ID，用于渲染 ECharts 實例，例如：

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

然后，在 JavaScript 中創(chuàng)建 ECharts 實例，并配置基本參數(shù)，例如：

// 創(chuàng)建 ECharts 實例
var myChart = echarts.init(document.getElementById('chart'), 'macarons');

// 配置基本參數(shù)
var option = {
  xAxis: { type: 'category',
    data: ['直接訪問', '郵件營銷', '聯(lián)盟廣告', '視頻廣告', '搜索引擎'],
    axisLabel: {
      interval: 0, // 強制顯示所有標簽
      rotate: -90, // 設置旋轉角度
    },
  },
  yAxis: { type: 'value',
  },
  series: [{
    name: '訪問來源', type: 'bar',
    data: data,
  }],
};

// 使用指定的配置項和數(shù)據展示圖表
myChart.setOption(option);

在這個例子中，我們設置了 xAxis 中 axisLabel 的 rotate 屬性值為 -90，這將使 x 軸文字沿著垂直方向旋轉，從而實現(xiàn)縱向顯示。

1. 美化柱狀圖

除了基本參數(shù)之外，還可以對柱狀圖進行美化。例如，可以設置標題、顏色、動畫效果等。以下是一個完整的例子：

// 創(chuàng)建 ECharts 實例
var myChart = echarts.init(document.getElementById('chart'), 'macarons');

// 準備數(shù)據源
var data = [
  {value: 335, name: '直接訪問'},
  {value: 310, name: '郵件營銷'},
  {value: 234, name: '聯(lián)盟廣告'},
  {value: 135, name: '視頻廣告'},
  {value: 1548, name: '搜索引擎'}
];

// 配置參數(shù)
var option = {
  title: {
    text: '柱狀圖示例',
    textStyle: {
      fontWeight: 'normal',
    },
  },
  tooltip: {},
  xAxis: { type: 'category',
    data: ['直接訪問', '郵件營銷', '聯(lián)盟廣告', '視頻廣告', '搜索引擎'],
    axisLabel: {
      interval: 0, // 強制顯示所有標簽
      rotate: -90, // 設置旋轉角度
    },
  },
  yAxis: { type: 'value',
  },
  series: [{
    name: '訪問來源', type: 'bar',
    data: data,
    itemStyle: {
      color: '#0099CC',
    },
  }],
};

// 使用指定的配置項和數(shù)據展示圖表
myChart.setOption(option);

在這個例子中，我們添加了標題和提示框，并設置了柱狀圖顏色

為了更加美觀，我們還可以添加動畫效果。通過設置 series 中的 animationDelay 屬性和 animationDuration 屬性來實現(xiàn)。例如：

// 配置參數(shù)
var option = {
  title: {
    text: '柱狀圖示例',
    textStyle: {
      fontWeight: 'normal',
    },
  },
  tooltip: {},
  xAxis: { type: 'category',
    data: ['直接訪問', '郵件營銷', '聯(lián)盟廣告', '視頻廣告', '搜索引擎'],
    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, // 動畫時長
  }],
};

// 使用指定的配置項和數(shù)據展示圖表
myChart.setOption(option);

在這個例子中，我們設置了動畫延遲時間和動畫時長，使柱狀圖在加載時呈現(xiàn)出漸進式增長的效果。

總結

通過以上步驟，我們成功地將 ECharts 柱狀圖的 x 軸文字縱向顯示，并優(yōu)化了柱狀圖的美觀程度。需要注意的是，在實際開發(fā)中，可能需要根據具體需求對參數(shù)進行更加詳細的配置。

你是否渴望進一步提升數(shù)據可視化的能力，讓數(shù)據展示更加專業(yè)、高效呢？現(xiàn)在，有一門絕佳的課程能滿足你的需求 ——Python 數(shù)據可視化 18 講（PyEcharts、Matplotlib、Seaborn）。

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

這門課程完全免費，且學習有效期長期有效。由 CDA 數(shù)據分析研究院的張彥存老師精心打造，他擁有豐富的實戰(zhàn)經驗，能將復雜知識通俗易懂地傳授給你。課程深入講解 matplotlib、seaborn、pyecharts 三大主流 Python 可視化工具，帶你從基礎繪圖到高級定制，還涵蓋多元圖表類型和各類展示場景。無論是數(shù)據分析新手想要入門，還是有基礎的從業(yè)者希望提升技能，亦或是對數(shù)據可視化感興趣的愛好者，都能從這門課程中收獲滿滿。點擊課程鏈接，開啟你的數(shù)據可視化進階之旅，讓數(shù)據可視化成為你職場晉升和探索數(shù)據世界的有力武器！