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

以下是詳細(xì)步驟：

1. 引入 ECharts 庫和對(duì)應(yīng)主題

在 HTML 頁面中引入 ECharts 庫和對(duì)應(yīng)主題，例如：

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


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

1. 準(zhǔn)備數(shù)據(jù)源

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

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

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

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

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

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

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

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

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

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

1. 美化柱狀圖

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

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

// 準(zhǔn)備數(shù)據(jù)源
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, // 強(qiáng)制顯示所有標(biāo)簽
      rotate: -90, // 設(shè)置旋轉(zhuǎn)角度
    },
  },
  yAxis: { type: 'value',
  },
  series: [{
    name: '訪問來源', type: 'bar',
    data: data,
    itemStyle: {
      color: '#0099CC',
    },
  }],
};

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

在這個(gè)例子中，我們添加了標(biāo)題和提示框，并設(shè)置了柱狀圖顏色

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

// 配置參數(shù)
var option = {
  title: {
    text: '柱狀圖示例',
    textStyle: {
      fontWeight: 'normal',
    },
  },
  tooltip: {},
  xAxis: { type: 'category',
    data: ['直接訪問', '郵件營銷', '聯(lián)盟廣告', '視頻廣告', '搜索引擎'],
    axisLabel: {
      interval: 0, // 強(qiáng)制顯示所有標(biāo)簽
      rotate: -90, // 設(shè)置旋轉(zhuǎn)角度
    },
  },
  yAxis: { type: 'value',
  },
  series: [{
    name: '訪問來源', type: 'bar',
    data: data,
    itemStyle: {
      color: '#0099CC',
    },
    animationDelay: function (idx) { return idx * 50; // 延遲時(shí)間遞增
    },
    animationDuration: 1000, // 動(dòng)畫時(shí)長
  }],
};

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

在這個(gè)例子中，我們?cè)O(shè)置了動(dòng)畫延遲時(shí)間和動(dòng)畫時(shí)長，使柱狀圖在加載時(shí)呈現(xiàn)出漸進(jìn)式增長的效果。

總結(jié)

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

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

學(xué)習(xí)入口：https://edu.cda.cn/goods/show/3842?targetId=6751&preview=0

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